Portfolio Carousel Section with Draft Cards

<section class="overflow-hidden flex flex-col text-[#44403C] bg-[#E7E5E4] pt-32 pr-0 pb-32 pl-0 relative justify-center">
        
        <div class="px-6 lg:px-12 mb-12 flex justify-between items-end">
            <div class="">
                <span class="text-xs font-bold uppercase tracking-widest text-[#44403C]/40 mb-2 block font-geist" style="transition: outline 0.1s ease-in-out;">Portfolio</span>
                <h2 class="text-4xl lg:text-5xl text-[#44403C] font-playfair font-medium tracking-tight" style="">Current Drafts</h2>
            </div>
            
            <!-- Controls -->
            <div class="flex gap-2">
                <button onclick="rotateCarousel('prev')" class="w-12 h-12 rounded-lg border border-[#44403C]/10 bg-[#F5F5F4] hover:bg-white transition-colors flex items-center justify-center text-[#44403C]">
                    <iconify-icon icon="lucide:arrow-left" class="text-lg" stroke-width="1.5"></iconify-icon>
                </button>
                <button onclick="rotateCarousel('next')" class="w-12 h-12 rounded-lg border border-[#44403C]/10 bg-[#F5F5F4] hover:bg-white transition-colors flex items-center justify-center text-[#44403C]">
                    <iconify-icon icon="lucide:arrow-right" class="text-lg" stroke-width="1.5"></iconify-icon>
                </button>
            </div>
        </div>

        <!-- Interactive Carousel Container -->
        <div class="flex overflow-visible w-full h-[500px] relative items-center justify-center" id="carousel-container">
            
            <!-- Card Left -->
            <div class="carousel-card absolute w-[300px] lg:w-[400px] h-[450px] bg-white rounded-2xl shadow-lg opacity-40 scale-90 -translate-x-[60%] z-10 overflow-hidden cursor-pointer" id="card-left" onclick="rotateCarousel('prev')">
                <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/14422859-2c3e-444b-911b-03aae8342fd5_800w.webp" class="w-full h-full object-cover grayscale sepia-[0.2]" alt="Plan">
                <div class="absolute bottom-0 left-0 p-6 w-full bg-gradient-to-t from-black/50 to-transparent">
                    <p class="text-white font-serif text-xl font-geist" style="transition: outline 0.1s ease-in-out;">Urban Study</p>
                </div>
            </div>

            <!-- Card Center -->
            <div class="carousel-card absolute w-[300px] lg:w-[400px] h-[450px] bg-white rounded-2xl shadow-2xl scale-100 z-20 overflow-hidden" id="card-center">
                <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5e70a40f-3f85-4179-ae7c-ae8ce4783151_800w.webp" class="w-full h-full object-cover" alt="Plan">
                <div class="absolute inset-0 border-[12px] border-white/10"></div>
                <div class="absolute bottom-0 left-0 p-8 w-full bg-white border-t border-[#E7E5E4]">
                    <div class="flex justify-between items-center">
                        <div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-[#A1A1AA] mb-1 block font-geist" style="transition: outline 0.1s ease-in-out;">Residential</span>
                            <h3 class="text-2xl text-[#44403C] font-playfair font-medium tracking-tight" style="">Villa Helix</h3>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-[#F5F5F4] flex items-center justify-center">
                            <iconify-icon icon="lucide:plus" class="text-[#44403C]" stroke-width="1.5"></iconify-icon>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card Right -->
            <div class="carousel-card absolute w-[300px] lg:w-[400px] h-[450px] bg-white rounded-2xl shadow-lg opacity-40 scale-90 translate-x-[60%] z-10 overflow-hidden cursor-pointer" id="card-right" onclick="rotateCarousel('next')">
                <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5323bb36-ee4e-4aa0-a014-ac8c26c0bcf9_800w.webp" class="w-full h-full object-cover grayscale sepia-[0.2]" alt="Plan">
                <div class="absolute bottom-0 left-0 p-6 w-full bg-gradient-to-t from-black/50 to-transparent">
                    <p class="text-white font-serif text-xl font-geist" style="transition: outline 0.1s ease-in-out;">Civic Center</p>
                </div>
            </div>
        </div>

        <div class="flex justify-center gap-2 mt-12">
            <div class="w-2 h-2 rounded-full bg-[#44403C]"></div>
            <div class="w-2 h-2 rounded-full bg-[#A1A1AA]"></div>
            <div class="w-2 h-2 rounded-full bg-[#A1A1AA]"></div>
        </div>
    </section>