Responsive Photo Gallery Grid with Scrollable Filters

<div
  class="max-w-7xl mt-0 mr-auto mb-0 ml-auto pr-0 pl-0 space-y-6 gap-x-y-0 gap-y-0 sm:gap-y-0 sm:pl-0 sm:pr-0 sm:mb-0">
  <section class="sm:pl-0 sm:pr-0 max-w-7xl mr-auto mb-24 ml-auto pr-0 pl-0"></section>

  <!-- Top Nav -->
  <header
    class="sticky top-0 z-40 -mx-2 mb-6 bg-neutral-950/80 backdrop-blur supports-[backdrop-filter]:bg-neutral-950/60">
  </header>

  <!-- Toolbar: Search + Sort + Actions -->
  <section class="mb-5">
    <div
      class="ring-inset xl:pt-3 xl:pb-3 xl:pl-3 xl:pr-3 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-neutral-950/60 rounded-2xl ring-neutral-800 ring-1 pt-3 pr-3 pb-3 pl-3">
      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <!-- Left: Filter pill (h-10) -->
        <div class="flex items-center gap-3">
          <button class="inline-flex flex-none items-center whitespace-nowrap gap-2 h-10 px-3 text-sm font-medium font-geist text-neutral-200 bg-neutral-900 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                    <line x1="21" y1="4" x2="14" y2="4" class=""></line>
                    <line x1="10" y1="4" x2="3" y2="4" class=""></line>
                    <line x1="21" y1="12" x2="12" y2="12" class=""></line>
                    <line x1="8" y1="12" x2="3" y2="12" class=""></line>
                    <line x1="21" y1="20" x2="16" y2="20" class=""></line>
                    <line x1="12" y1="20" x2="3" y2="20" class=""></line>
                    <circle cx="12" cy="4" r="2" class=""></circle>
                    <circle cx="8" cy="12" r="2" class=""></circle>
                    <circle cx="16" cy="20" r="2" class=""></circle>
                  </svg>
                  Filter
                </button>
        </div>

        <!-- Center: Chip scroller with same control height -->
        <div class="flex items-center justify-between gap-2 min-w-0">
          <!-- Prev -->
          <button id="btn-left" class="flex-none inline-flex items-center justify-center w-10 h-10 rounded-lg bg-neutral-900 text-neutral-300 ring-1 ring-inset ring-neutral-800 hover:text-white hover:ring-neutral-700 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[16px] h-[16px]">
                    <path d="m15 18-6-6 6-6" class=""></path>
                  </svg>
                </button>

          <!-- Chips -->
          <div id="menu-track" class="flex overflow-x-auto scrollbar-none min-w-0 pr-2 pl-2 gap-x-2 gap-y-2"
            style="scrollbar-width:none; mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); scroll-behavior: smooth;">
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900 text-white ring-1 ring-inset ring-neutral-700 rounded-xl transition">
                    All Photos
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Nature
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Business
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Technology
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Portrait
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Architecture
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Food
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Travel
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Animals
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Abstract
                  </button>
            <button class="chip inline-flex flex-none items-center whitespace-nowrap h-10 px-3 text-sm font-medium font-geist bg-neutral-900/50 text-neutral-300 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                    Lifestyle
                  </button>
          </div>

          <!-- Next -->
          <button id="btn-right" class="flex-none inline-flex items-center justify-center w-10 h-10 rounded-lg bg-neutral-900 text-neutral-300 ring-1 ring-inset ring-neutral-800 hover:text-white hover:ring-neutral-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[16px] h-[16px]">
                    <path d="m9 18 6-6-6-6" class=""></path>
                  </svg>
                </button>
        </div>

        <!-- Right: Sort (same h-10) -->
        <div class="flex items-center gap-3">
          <button class="inline-flex flex-none items-center whitespace-nowrap gap-2 h-10 px-3 text-sm font-medium font-geist text-neutral-200 bg-neutral-900 ring-1 ring-inset ring-neutral-800 rounded-xl hover:text-white hover:ring-neutral-700 transition">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                    <path d="m6 8 6 6 6-6" class=""></path>
                  </svg>
                  Recommended
                </button>
        </div>
      </div>

      <script>
        (function() {
                const btnLeft = document.getElementById('btn-left');
                const btnRight = document.getElementById('btn-right');
                const menuTrack = document.getElementById('menu-track');
                const scrollAmount = 250;

                function updateButtons() {
                  const atStart = menuTrack.scrollLeft <= 0;
                  const atEnd = menuTrack.scrollLeft + menuTrack.clientWidth >= menuTrack.scrollWidth - 1;

                  btnLeft.disabled = atStart;
                  btnRight.disabled = atEnd;
                }

                btnLeft.addEventListener('click', function() {
                  menuTrack.scrollLeft -= scrollAmount;
                  setTimeout(updateButtons, 300);
                });

                btnRight.addEventListener('click', function() {
                  menuTrack.scrollLeft += scrollAmount;
                  setTimeout(updateButtons, 300);
                });

                menuTrack.addEventListener('scroll', updateButtons);

                updateButtons();
              })();
      </script>
    </div>
  </section>

  <!-- Filter Chips -->
  <section class="mb-6"></section>

  <!-- Grid -->
  <main
    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:pb-24 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll pb-24 gap-x-4 gap-y-4">
    <!-- Card 1 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ef749f82-a7d0-4319-97df-75365c533bc7_1600w.webp" alt="Mountain Landscape at Sunset" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Mountain Landscape at Sunset
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Benjamin Boulanger
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 2 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7f78131e-65e9-49b2-aa1f-ccc33e28df9f_1600w.webp" alt="Modern Office Workspace" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Modern Office Workspace
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc0337fb-ed78-4515-a35d-9bf52d6af946_320w.webp" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Benny To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 3 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7356ff87-92cc-4a91-a88b-3ad9a28041bf_1600w.webp" alt="Urban City Street at Night" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Urban City Street at Night
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Benjamin Boulanger
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 4 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7969202b-d159-47e3-badd-ce3ff5efef3a_1600w.webp" alt="Professional Portrait Photography" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Professional Portrait Photography
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc0337fb-ed78-4515-a35d-9bf52d6af946_320w.webp" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Benny To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 5 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b5d711f2-c1d8-4a6c-80aa-a69b42a33e00_1600w.jpg" alt="Tropical Beach Paradise" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Tropical Beach Paradise
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc0337fb-ed78-4515-a35d-9bf52d6af946_320w.webp" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Benny To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 6 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cc78b114-8d82-4b45-b756-25d0697fe629_1600w.jpg" alt="Fresh Food and Ingredients" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Fresh Food and Ingredients
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a90d32f-809f-4383-b71f-6a9c50621b69_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Megan Lyn
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 7 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8dbdc665-9457-4d9e-8802-35ee5a13090e_1600w.webp" alt="Abstract Art and Patterns" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Abstract Art and Patterns
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b476201e-4ebc-447a-b9b9-0c7e4e8302a0_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Meng To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 8 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/82781526-4ef8-4653-8d37-243d7194d6e5_800w.webp" alt="Technology and Innovation" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Technology and Innovation
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Meng To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 9 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/aedb2425-6c2b-48a3-8ba5-01ea63f19cf5_1600w.webp" alt="Wildlife and Nature Photography" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Wildlife and Nature Photography
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&amp;q=80" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Sourany Phomphone
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 10 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2974da65-b519-45e9-a413-b9d7b00099a5_1600w.jpg" alt="Minimalist Architecture" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Minimalist Architecture
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/24f664fd-07a7-45e6-9553-ed03aa0c764f_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Meng To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 11 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a8a18478-d20b-4c5f-9811-5e3a92a55aa1_1600w.webp" alt="Sunset Over the Ocean" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Sunset Over the Ocean
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/24f664fd-07a7-45e6-9553-ed03aa0c764f_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Meng To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Card 12 -->
    <article class="group relative overflow-hidden rounded-2xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e1cdcac4-b146-4843-a403-1e0e749b5e24_1600w.webp" alt="Cozy Interior Design" class="w-full h-64 sm:h-72 md:h-80 lg:h-96 object-cover transition duration-500 group-hover:scale-[1.02]">
      <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div
          class="flex flex-col group-hover:translate-y-0 transition-transform duration-300 pt-6 pr-6 pb-6 pl-6 absolute right-0 bottom-0 left-0 translate-y-4 gap-x-3 gap-y-3">
          <h4 class="text-2xl lg:text-lg font-semibold text-white mb-1 font-geist" style="">
            Cozy Interior Design
          </h4>
          <div class="flex items-center justify-between">
            <div class="flex gap-2 items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/24f664fd-07a7-45e6-9553-ed03aa0c764f_320w.jpg" alt="Author" class="w-8 h-8 rounded-full ring-1 ring-neutral-800 object-cover">
              <div class="flex flex-col leading-tight">
                <span class="text-base font-medium text-neutral-200 font-geist" style="">
                        Meng To
                      </span>
                <span class="text-sm text-neutral-400 font-geist" style="">
                        5 years of experience
                      </span>
              </div>
            </div>
            <button class="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition inline-flex items-center justify-center z-20" aria-label="Download">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="7 10 12 15 17 10" class=""></polyline>
                      <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                    </svg>
                  </button>
          </div>
        </div>
      </div>
    </article>
  </main>

  <!-- Pagination Footer -->
</div>