<div class=" bg-secondary px-10">
    <div 
    class="max-w-7xl justify-center py-5 mx-auto font-bold text-2xl text-white"
    >
      Delivery Area
    </div>
  </div>

<div class="h-auto">
    <div class="mx-auto p-5">
        <div class="grid grid-cols-12 ">
            <div class="col-span-12 py-5 ">
                <div class="font-bold text-5xl text-secondary max-w-7xl mx-auto text-center md:text-left">
                    Serving these communites
                </div>
                <div class="font-bold text-xl bg-secondary text-primary h-10 mb-10">

                </div>
            </div>
            <div class="col-span-12 py-5 ">
                <div class="invisible md:visible h-0 md:h-auto  flex gap-20 justify-center text-3xl">
                    <div >
                        <div class="text-2xl">Auburn</div>
                        <div class="text-2xl">Millbury</div>
                        <div class="text-2xl">Sutton</div>
                        <div class="text-2xl">Oxford</div>
                        <div class="text-2xl">North Oxford</div>
                        <div class="text-2xl">Webster</div>
                        <div class="text-2xl">SouthBridge</div>
                        <div class="text-2xl">Douglas</div>
                        <div class="text-2xl">Holden</div>
                        <div class="text-2xl">Shrewsbury</div>
                        <div class="text-2xl">Grafton</div>
                      </div>
                      <div >
                        <div class="text-2xl">Dudley</div>
                        <div class="text-2xl">Charlton</div>
                        <div class="text-2xl">Leicester</div>
                        <div class="text-2xl">Cherry Valley</div>
                        <div class="text-2xl">Rochdale</div>
                        <div class="text-2xl">Spencer</div>
                        <div class="text-2xl">West Brookfield</div>
                        <div class="text-2xl">Brookfield</div>
                        <div class="text-2xl">North Brookfield</div>
                        <div class="text-2xl">Worcester</div>
                      </div>
                    </div>
                    <div class="visible sm:visible md:invisible h-auto sm:h-auto md:h-0">
                      <div class="text-center">
                        <div class="text-2xl">Auburn</div>
                        <div class="text-2xl">Millbury</div>
                        <div class="text-2xl">Sutton</div>
                        <div class="text-2xl">Oxford</div>
                        <div class="text-2xl">North Oxford</div>
                        <div class="text-2xl">Webster</div>
                        <div class="text-2xl">SouthBridge</div>
                        <div class="text-2xl">Douglas</div>
                        <div class="text-2xl">Holden</div>
                        <div class="text-2xl">Shrewsbury</div>
                        <div class="text-2xl">Grafton</div>
                        <div class="text-2xl">Dudley</div>
                        <div class="text-2xl">Charlton</div>
                        <div class="text-2xl">Leicester</div>
                        <div class="text-2xl">Cherry Valley</div>
                        <div class="text-2xl">Rochdale</div>
                        <div class="text-2xl">Spencer</div>
                        <div class="text-2xl">West Brookfield</div>
                        <div class="text-2xl">Brookfield</div>
                        <div class="text-2xl">North Brookfield</div>
                        <div class="text-2xl">Worcester</div>
                      </div>
                    </div>
            </div>
            <div class="col-span-12 py-5 ">
                <div class="flex justify-center items-center md:h-auto  ">
                    <img class="" src="/images/map.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>