Responsive Signature Dishes Grid Section

<section class="w-full sm:px-6 md:px-10 max-w-7xl mr-auto ml-auto pt-12 pr-4 pb-6 pl-4">
        <div class="flex sm:mb-8 mb-6 items-end justify-between">
            <div class="">
                <p class="text-[11px] sm:text-xs uppercase text-neutral-500 tracking-[0.2em]">(01) La Carta</p>
                <h2 class="mt-2 text-2xl sm:text-3xl font-semibold tracking-tight font-playfair">Signature dishes we're passionate about.</h2>
            </div>
            <a href="#menu" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 bg-white rounded-full px-4 py-2">
                Full menu
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4" style="stroke-width: 1.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
            <!-- Dish 1 -->
            <div class="group relative overflow-hidden ring-1 ring-neutral-200 cursor-pointer bg-white rounded-3xl shadow-sm h-80">
                <img src="https://cdn.midjourney.com/2eebbbc6-df55-4d9e-8b34-ad25cbc1ed0a/0_0.png?w=800&amp;q=80" alt="Risotto alla Milanese" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
                <div class="absolute bottom-0 left-0 right-0 p-5">
                    <p class="text-xs text-white/70">Primo • Risotto</p>
                    <div class="mt-1 flex items-center justify-between">
                        <h3 class="sm:text-lg text-base font-semibold text-white tracking-tight">Risotto alla Milanese</h3>
                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4" style="stroke-width: 1.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Dish 2 -->
            <div class="group relative overflow-hidden ring-1 ring-neutral-200 cursor-pointer bg-white rounded-3xl shadow-sm h-80">
                <img src="https://cdn.midjourney.com/3b8ab5be-cc27-4162-bc9f-d6937e463e58/0_0.png?w=800&amp;q=80" alt="Pizza Margherita" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
                <div class="absolute bottom-0 left-0 right-0 p-5">
                    <p class="text-xs text-white/70">Pizza • Classica</p>
                    <div class="mt-1 flex items-center justify-between">
                        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Pizza Margherita</h3>
                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4" style="stroke-width: 1.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Dish 3 -->
            <div class="group relative overflow-hidden ring-1 ring-neutral-200 cursor-pointer bg-white rounded-3xl shadow-sm h-80">
                <img src="https://cdn.midjourney.com/87c2476e-c102-40c7-aec2-a866e606cf9f/0_0.png?w=800&amp;q=80" alt="Pasta Carbonara" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
                <div class="absolute bottom-0 left-0 right-0 p-5">
                    <p class="text-xs text-white/70">Pasta • Romano</p>
                    <div class="mt-1 flex items-center justify-between">
                        <h3 class="sm:text-lg text-base font-semibold text-white tracking-tight">Carbonara Classica</h3>
                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4" style="stroke-width: 1.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-8 sm:mt-10 flex justify-center">
            <a href="#menu" class="inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-neutral-200 px-5 py-3 text-sm text-neutral-700 hover:shadow">
                View complete menu
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4" style="stroke-width: 1.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </a>
        </div>
    </section>