Responsive Portfolio Featured Work Grid

<div
    class="relative overflow-hidden sm:px-10 lg:px-14 lg:py-14 bg-gradient-to-br from-gray-50 to-white ring-gray-200 ring-1 rounded-3xl pt-10 pr-6 pb-10 pl-6 max-w-6xl">
    <div class="flex items-end justify-between mb-8">
        <div class="">
            <p class="text-[11px] sm:text-xs uppercase font-light text-gray-500 tracking-widest mb-3">Portfolio</p>
            <h2 class="text-3xl sm:text-5xl font-light tracking-tighter text-gray-900">Featured Work</h2>
            <p class="mt-4 text-xl text-gray-600">Exploring the intersection of creativity and innovation</p>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
            class="bg-gradient-to-br from-gray-50 to-white ring-1 ring-gray-200 rounded-3xl overflow-hidden group hover:ring-coral-300 transition-colors scroll-element fade-in-up stagger-1 animate-in">
            <div class="aspect-video overflow-hidden">
                <img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&amp;w=600&amp;auto=format&amp;fit=crop" alt="Brand Identity Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" style="">
            </div>
            <div class="p-6">
                <h3 class="font-semibold mb-2 text-gray-900">Brand Identity</h3>
                <p class="text-gray-600 text-sm">Complete visual identity for tech startup</p>
                <div class="mt-4 flex justify-between items-center">
                    <span class="text-coral-500 text-sm">Visual Identity</span>
                    <button class="h-8 w-8 hover:bg-gray-700 flex transition-colors bg-gray-900 rounded-full items-center justify-center">
                            <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" class="w-3.5 h-3.5 text-white">
                                <path d="M7 7h10v10" class=""></path>
                                <path d="M7 17 17 7" class=""></path>
                            </svg>
                        </button>
                </div>
            </div>
        </div>

        <div
            class="bg-gradient-to-br from-gray-50 to-white ring-1 ring-gray-200 rounded-3xl overflow-hidden group hover:ring-coral-300 transition-colors scroll-element fade-in-up stagger-2 animate-in">
            <div class="aspect-video overflow-hidden">
                <img src="https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?q=80&amp;w=600&amp;auto=format&amp;fit=crop" alt="UI/UX Design Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            </div>
            <div class="pt-6 pr-6 pb-6 pl-6">
                <h3 class="font-semibold mb-2 text-gray-900">Mobile App Design</h3>
                <p class="text-gray-600 text-sm">User experience design for fintech platform</p>
                <div class="mt-4 flex justify-between items-center">
                    <span class="text-coral-500 text-sm">UI/UX Design</span>
                    <button class="h-8 w-8 hover:bg-gray-700 flex transition-colors bg-gray-900 rounded-full items-center justify-center">
                            <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" class="w-3.5 h-3.5 text-white">
                                <path d="M7 7h10v10" class=""></path>
                                <path d="M7 17 17 7" class=""></path>
                            </svg>
                        </button>
                </div>
            </div>
        </div>

        <div
            class="bg-gradient-to-br from-gray-50 to-white ring-1 ring-gray-200 rounded-3xl overflow-hidden group hover:ring-coral-300 transition-colors scroll-element fade-in-up stagger-3 animate-in">
            <div class="aspect-video overflow-hidden">
                <img src="https://images.unsplash.com/photo-1586717791821-3f44a563fa4c?q=80&amp;w=600&amp;auto=format&amp;fit=crop" alt="Animation Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-6">
                <h3 class="font-semibold mb-2 text-gray-900">Motion Graphics</h3>
                <p class="text-gray-600 text-sm">Animated explainer video series</p>
                <div class="mt-4 flex justify-between items-center">
                    <span class="text-coral-500 text-sm">Animation</span>
                    <button class="h-8 w-8 hover:bg-gray-700 flex transition-colors bg-gray-900 rounded-full items-center justify-center">
                            <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" class="w-3.5 h-3.5 text-white">
                                <path d="M7 7h10v10" class=""></path>
                                <path d="M7 17 17 7" class=""></path>
                            </svg>
                        </button>
                </div>
            </div>
        </div>
    </div>

    <div class="scroll-element fade-in-up animate-in text-center mt-12">
        <button class="inline-flex gap-2 hover:bg-black transition-colors ring-1 ring-gray-300 text-sm font-medium text-white bg-gray-900 rounded-full pt-2.5 pr-4 pb-2.5 pl-4 shadow-sm items-center">
                        View All Projects
                        <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"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                    </button>
    </div>
</div>