Animated Product Gallery Section with Headline

<div class="w-full max-w-7xl mt-12 mr-auto mb-24 ml-auto pt-6 pr-6 pb-6 pl-6" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(1)">
      <div class="relative">
        

        <div class="text-center [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll">
          <h2 class="text-5xl sm:text-6xl lg:text-7xl leading-none text-white/95 tracking-tight uppercase font-sans font-medium">
            HANDCRAFTED
          </h2>
          <h2 class="text-5xl sm:text-6xl lg:text-7xl leading-none text-white/95 tracking-tight uppercase mt-1 font-sans font-medium">
            PERFECTION
          </h2>

          <div class="flex gap-2 text-amber-400/40 mt-6 items-center">
            <span class="text-base font-sans">+</span>
            <div class="h-px flex-1 bg-amber-900/30"></div>
            <span class="text-base font-sans">+</span>
          </div>

          <p class="mt-6 text-xl sm:text-2xl text-neutral-300/90 tracking-tight max-w-3xl mx-auto font-sans font-medium">
            Small-batch roasting that honors tradition while embracing
            innovation. Each blend crafted to perfection.
          </p>
        </div>

        <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll">
          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 hover-lift">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dfb3b1af-e254-413c-9eee-298cb5f9a877_800w.jpg" alt="Steaming Latte in Kraft Paper Cup" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover">
          </div>
          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 hover-lift">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e91ebfd7-5404-48d3-a52f-3b1820ecc451_800w.webp" alt="Paper cup latte with heart latte art" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover">
          </div>
          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 hover-lift">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9135951f-bf3a-47d0-b8e0-04b5cecefaac_800w.webp" alt="Minimal smartphone flat lay with coffee" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover">
          </div>
          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 hover-lift">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b480f873-fdea-4b10-95db-08a8ebc3d830_800w.webp" alt="Sleek black coffee bags with floating beans" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover">
          </div>
        </div>
      </div>
    </div>