Responsive Photo Portfolio Grid

<section class="mt-10">
                    <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-widest font-geist">(01) Recent Work</p>
                            <h3 class="mt-2 text-2xl sm:text-3xl tracking-tight font-geist font-medium">Stories worth telling.</h3>
                        </div>
                        <a href="#work" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 font-geist bg-white rounded-full pt-2 pr-4 pb-2 pl-4">
                            View All Photos
                            <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">
                        <!-- Column 1 -->
                        <div class="flex flex-col gap-4 sm:gap-5">
                            <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
                                <img src="https://cdn.midjourney.com/49b0ac3d-2cbd-437f-b90e-ecc988088fc0/0_0.png?w=800&amp;q=80" alt="Wedding ceremony" class="h-56 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="">
                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <div class="absolute bottom-0 left-0 right-0 p-5">
                                    <p class="text-xs text-white/70 font-geist">Wedding • Ceremony</p>
                                    <div class="mt-1 flex items-center justify-between">
                                        <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Emma &amp; James</h4>
                                        <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 h-4 w-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>
                            </a>

                            <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
                                <img src="https://cdn.midjourney.com/524a521b-db59-4ded-aecf-253646a80d72/0_0.png?w=800&amp;q=80" alt="Family portrait" class="h-72 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="">
                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <div class="absolute bottom-0 left-0 right-0 p-5">
                                    <p class="text-xs text-white/70 font-geist">Family • Portrait</p>
                                    <div class="mt-1 flex items-center justify-between">
                                        <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">The Johnsons</h4>
                                        <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 h-4 w-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>
                            </a><a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
    <img src="https://cdn.midjourney.com/44228acb-b357-4821-a090-cb342f303877/0_0.png?w=800&amp;q=80" alt="Corporate event" class="h-56 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="">
    <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
        <p class="text-xs text-white/70 font-geist">Corporate • Events</p>
        <div class="mt-1 flex items-center justify-between">
            <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Tech Summit 2024</h4>
            <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 h-4 w-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>
</a>
                        </div>

                        <!-- Column 2 -->
                        <div class="flex flex-col gap-4 sm:gap-5">
                            <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
                                <img src="https://cdn.midjourney.com/cc6127c3-1915-4209-be59-8092cb87038d/0_0.png?w=800&amp;q=80" alt="Maternity shoot" class="h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <div class="absolute bottom-0 left-0 right-0 p-5">
                                    <p class="text-xs text-white/70 font-geist">Maternity • Lifestyle</p>
                                    <div class="mt-1 flex items-center justify-between">
                                        <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Expecting Joy</h4>
                                        <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 h-4 w-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>
                            </a>

                            <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
                                <img src="https://cdn.midjourney.com/a6270a4c-c513-4fbb-92d1-068644d1407a/0_0.png?w=800&amp;q=80" alt="Engagement shoot" class="h-56 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="">
                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <div class="absolute bottom-0 left-0 right-0 p-5">
                                    <p class="text-xs text-white/70 font-geist">Engagement • Outdoor</p>
                                    <div class="mt-1 flex items-center justify-between">
                                        <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Alex &amp; Maria</h4>
                                        <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 h-4 w-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>
                            </a><a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
    <img alt="Branding project" class="h-64 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="" src="https://cdn.midjourney.com/e07289f5-2d8e-4d0f-8a02-4018a2762f52/0_0.png?w=800&amp;q=80">
    <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
    <div class="absolute bottom-0 left-0 right-0 pt-5 pr-5 pb-5 pl-5">
        <p class="text-xs text-white/70 font-geist">Branding • Visual Identity</p>
        <div class="mt-1 flex items-center justify-between">
            <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Brand Studio</h4>
            <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 h-4 w-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>
</a>
                        </div>

                        <!-- Column 3 -->
                        <div class="flex flex-col gap-4 sm:gap-5">
                            <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
                                <img src="https://cdn.midjourney.com/2e78d06c-d602-4e00-9135-dfdf64fed7b3/0_0.png?w=800&amp;q=80" alt="Corporate headshots" class="h-72 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="">
                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <div class="absolute bottom-0 left-0 right-0 p-5">
                                    <p class="text-xs text-white/70 font-geist">Corporate • Headshots</p>
                                    <div class="mt-1 flex items-center justify-between">
                                        <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Professional Series</h4>
                                        <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 h-4 w-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>
                            </a>

                            <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
                                <img src="https://cdn.midjourney.com/2077ebf2-9576-47f8-b7c3-2cd08df78e60/0_0.png?w=800&amp;q=80" alt="Newborn photography" class="h-48 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="">
                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <div class="absolute bottom-0 left-0 right-0 p-5">
                                    <p class="text-xs text-white/70 font-geist">Newborn • Studio</p>
                                    <div class="mt-1 flex items-center justify-between">
                                        <h4 class="sm:text-lg text-base font-medium text-white tracking-tight font-geist">Baby Rosa</h4>
                                        <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 h-4 w-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>
                            </a><a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
    <img alt="Fashion editorial" class="h-64 w-full transition-transform duration-500 group-hover:scale-105 object-cover" style="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f87495d1-10d1-4ec6-9d06-68e52b825d20_800w.jpg">
    <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
        <p class="text-xs text-white/70 font-geist">Editorial • Fashion</p>
        <div class="mt-1 flex items-center justify-between">
            <h4 class="sm:text-lg text-base font-medium text-white tracking-tight font-geist">Autumn Collection</h4>
            <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 h-4 w-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>
</a>
                        </div>
                    </div>

                    <div class="mt-8 sm:mt-10 flex justify-center">
                        <a href="#work" 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 font-geist">
                            View Full Gallery
                            <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>