Selected Works Projects Gallery Section

<section class="lg:px-12 text-[#3F3E3A] bg-[#F2F0E9] pt-24 pr-6 pb-24 pl-6">
        <div class="flex flex-col lg:flex-row justify-between items-end mb-16">
            <div class="">
                <h2 class="lg:text-6xl leading-none text-5xl font-medium text-[#3F3E3A] font-playfair mb-4 tracking-tight" style="">
                    Selected Works
                </h2>
                <p class="text-[#3F3E3A]/60 max-w-sm text-sm leading-relaxed font-geist" style="transition: outline 0.1s ease-in-out;">
                    Curated collection of residential and commercial projects defined by clean lines and sustainable materials.
                </p>
            </div>
            <div class="flex gap-4 mt-8 lg:mt-0">
                 <button onclick="setView('grid')" id="btn-grid" class="w-12 h-12 rounded-xl border border-[#3F3E3A]/10 flex items-center justify-center bg-[#3F3E3A] text-[#F2F0E9] transition-colors">
                    <iconify-icon icon="lucide:grid-3x3" class="text-xl" stroke-width="1.5"></iconify-icon>
                </button>
                <button onclick="setView('list')" id="btn-list" class="w-12 h-12 rounded-xl border border-[#3F3E3A]/10 flex items-center justify-center hover:bg-[#3F3E3A] hover:text-[#F2F0E9] transition-colors">
                    <iconify-icon icon="lucide:list" class="text-xl" stroke-width="1.5"></iconify-icon>
                </button>
            </div>
        </div>

        <!-- Project Container -->
        <div id="projects-container" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Item 1 -->
            <div class="group cursor-pointer project-item">
                <div class="relative aspect-[16/10] rounded-2xl overflow-hidden mb-6 bg-[#3F3E3A]/5 project-img-container">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4a82ca5b-ffa7-4e34-81d1-7b20a0bbd06d_1600w.webp" alt="Interior" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale-[0.3]">
                    <div class="absolute top-4 right-4 px-3 py-1 bg-white/90 backdrop-blur text-[10px] font-bold uppercase tracking-widest rounded-md text-[#3F3E3A] font-geist" style="transition: outline 0.1s ease-in-out;">Interior</div>
                </div>
                <div class="flex justify-between items-start border-t border-[#E6E4DC] pt-5 project-details">
                    <div>
                        <h3 class="text-2xl text-[#3F3E3A] mb-1 group-hover:opacity-70 transition-opacity font-playfair font-medium tracking-tight" style="">The Stone House</h3>
                        <p class="text-xs text-[#3F3E3A]/50 font-mono uppercase tracking-wider font-geist" style="transition: outline 0.1s ease-in-out;">Copenhagen, Denmark</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm font-medium text-[#3F3E3A] font-geist" style="transition: outline 0.1s ease-in-out;">2023</p>
                    </div>
                </div>
            </div>

            <!-- Item 2 -->
            <div class="group cursor-pointer lg:mt-24 project-item">
                <div class="relative aspect-[16/10] rounded-2xl overflow-hidden mb-6 bg-[#3F3E3A]/5 project-img-container">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3bddd261-7b06-4b0b-b492-db3a866ae985_800w.webp" alt="Structure" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale-[0.3]">
                    <div class="absolute top-4 right-4 px-3 py-1 bg-white/90 backdrop-blur text-[10px] font-bold uppercase tracking-widest rounded-md text-[#3F3E3A] font-geist" style="transition: outline 0.1s ease-in-out;">Restoration</div>
                </div>
                <div class="flex justify-between items-start border-t border-[#E6E4DC] pt-5 project-details">
                    <div class="">
                        <h3 class="text-2xl text-[#3F3E3A] mb-1 group-hover:opacity-70 transition-opacity font-playfair font-medium tracking-tight" style="">Archive Museum</h3>
                        <p class="text-xs text-[#3F3E3A]/50 font-mono uppercase tracking-wider font-geist" style="transition: outline 0.1s ease-in-out;">Berlin, Germany</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm font-medium text-[#3F3E3A] font-geist" style="transition: outline 0.1s ease-in-out;">2022</p>
                    </div>
                </div>
            </div>
        </div>
    </section>