Hover-Expandable Product Card Gallery

<div class="flex gap-1.5 animate-on-scroll animate bg-[#ffffff] w-[1190px] h-[464px] max-w-none rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-2xl scale-in space-x-4">
  <div class="card-panel flex-1 overflow-hidden cursor-pointer transition-all duration-500 flex hover:flex-4 group bg-gray-800 h-full rounded-3xl relative top-0 right-0 bottom-0 left-0 items-center justify-center animate-on-scroll blur-in stagger-1 animate">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/81c1ffe7-4ef4-4ad0-af93-20b8464eee2e_800w.jpg" alt="Hydrating serums collection" class="card-image w-full h-full object-cover rounded-sm">
    <div class="card-overlay group-hover:opacity-100 transition-opacity duration-300 flex flex-col bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 rounded-3xl pt-6 pr-6 pb-6 pl-6 absolute top-0 right-0 bottom-0 left-0 justify-end">
      <h3 class="text-white text-xl font-medium mb-1 tracking-tight">Hydrate &amp; Restore</h3>
      <p class="text-gray-200 text-sm">Moisture-rich serums with hyaluronic acid</p>
      <p class="text-gray-400 text-xs mt-2">Essential Hydration Collection</p>
    </div>
  </div>
  <div class="card-panel flex-1 overflow-hidden cursor-pointer transition-all duration-500 flex hover:flex-4 group bg-gray-800 h-full rounded-3xl relative top-0 right-0 bottom-0 left-0 items-center justify-center animate-on-scroll blur-in stagger-2 animate">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8c09615d-a59e-4e70-a69c-f85d41f58008_800w.jpg" alt="Gentle cleansing products" class="card-image w-full h-full object-cover rounded-3xl">
    <div class="card-overlay group-hover:opacity-100 transition-opacity duration-300 flex flex-col bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 rounded-3xl pt-6 pr-6 pb-6 pl-6 absolute top-0 right-0 bottom-0 left-0 justify-end">
      <h3 class="text-white text-xl font-medium mb-1 tracking-tight">Cleanse &amp; Purify</h3>
      <p class="text-gray-200 text-sm">pH-balanced cleansers for sensitive skin</p>
      <p class="text-gray-400 text-xs mt-2">Gentle Care Collection</p>
    </div>
  </div>
  <div class="card-panel flex-1 overflow-hidden cursor-pointer transition-all duration-500 flex hover:flex-4 relative group bg-gray-800 h-full rounded-3xl top-0 right-0 bottom-0 left-0 items-center justify-center animate-on-scroll blur-in stagger-3 animate">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/097cb637-6762-467b-a1d3-db0d530693f4_800w.jpg" alt="Anti-aging skincare products" class="card-image w-full h-full object-cover rounded-3xl">
    <div class="card-overlay group-hover:opacity-100 transition-opacity duration-300 flex flex-col bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 rounded-3xl pt-6 pr-6 pb-6 pl-6 absolute top-0 right-0 bottom-0 left-0 justify-end">
      <h3 class="text-white text-xl font-medium mb-1 tracking-tight">Renew &amp; Repair</h3>
      <p class="text-gray-200 text-sm">Anti-aging actives with botanical support</p>
      <p class="text-gray-400 text-xs mt-2">Advanced Renewal Series</p>
    </div>
  </div>
  <div class="card-panel flex-1 overflow-hidden cursor-pointer transition-all duration-500 flex hover:flex-4 group bg-gray-800 h-full rounded-3xl relative top-0 right-0 bottom-0 left-0 items-center justify-center animate-on-scroll blur-in stagger-4 animate">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/66c7e7a4-0871-4ca4-9a13-ee7daeeeebe7_800w.jpg" alt="Natural botanical ingredients" class="card-image w-full h-full object-cover rounded-3xl">
    <div class="card-overlay group-hover:opacity-100 transition-opacity duration-300 flex flex-col bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 rounded-3xl pt-6 pr-6 pb-6 pl-6 absolute top-0 right-0 bottom-0 left-0 justify-end">
      <h3 class="text-white text-xl font-medium mb-1 tracking-tight">Botanical Blend</h3>
      <p class="text-gray-200 text-sm">Nature-inspired actives for healthy glow</p>
      <p class="text-gray-400 text-xs mt-2">Natural Radiance Collection</p>
    </div>
  </div>
  <div class="card-panel flex-1 overflow-hidden cursor-pointer transition-all duration-500 flex hover:flex-4 group relative bg-stone-50 h-full rounded-3xl top-0 right-0 bottom-0 left-0 items-center justify-center animate-on-scroll blur-in stagger-5 animate">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f0c6ca8f-90a8-4036-bdd1-9adc2e917c7b_3840w.jpg" alt="Nourishing face oils and creams" class="card-image w-full h-full object-cover rounded-sm">
    <div class="card-overlay group-hover:opacity-100 transition-opacity duration-300 flex flex-col bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 rounded-3xl pt-6 pr-6 pb-6 pl-6 absolute top-0 right-0 bottom-0 left-0 justify-end">
      <h3 class="text-white text-xl font-medium mb-1 tracking-tight">Nourish &amp; Protect</h3>
      <p class="text-gray-200 text-sm">Rich moisturizers with barrier protection</p>
      <p class="text-gray-400 text-xs mt-2">Barrier Repair Collection</p>
    </div>
  </div>

  <style>
    .font-inter {
      font-family: 'Inter', sans-serif;
    }

    .card-panel {
      transition: flex 0.5s ease;
    }

    .card-panel:hover {
      flex: 4;
    }

    .card-image {
      transition: all 0.5s ease;
    }

    .card-overlay {
      transition: opacity 0.3s ease;
    }
  </style>
  
  <style id="all-fonts-style-font-geist">
    .font-geist {
      font-family: 'Geist', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-roboto">
    .font-roboto {
      font-family: 'Roboto', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-montserrat">
    .font-montserrat {
      font-family: 'Montserrat', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-poppins">
    .font-poppins {
      font-family: 'Poppins', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-playfair">
    .font-playfair {
      font-family: 'Playfair Display', serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-instrument-serif">
    .font-instrument-serif {
      font-family: 'Instrument Serif', serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-merriweather">
    .font-merriweather {
      font-family: 'Merriweather', serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-bricolage">
    .font-bricolage {
      font-family: 'Bricolage Grotesque', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-jakarta">
    .font-jakarta {
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-manrope">
    .font-manrope {
      font-family: 'Manrope', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-space-grotesk">
    .font-space-grotesk {
      font-family: 'Space Grotesk', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-work-sans">
    .font-work-sans {
      font-family: 'Work Sans', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-pt-serif">
    .font-pt-serif {
      font-family: 'PT Serif', serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-geist-mono">
    .font-geist-mono {
      font-family: 'Geist Mono', monospace !important;
    }
  </style>
  
  <style id="all-fonts-style-font-space-mono">
    .font-space-mono {
      font-family: 'Space Mono', monospace !important;
    }
  </style>
  
  <style id="all-fonts-style-font-quicksand">
    .font-quicksand {
      font-family: 'Quicksand', sans-serif !important;
    }
  </style>
  
  <style id="all-fonts-style-font-nunito">
    .font-nunito {
      font-family: 'Nunito', sans-serif !important;
    }
  </style>
</div>