Featured Collection Card with Image Gallery

<div
  class="sm:p-8 bg-neutral-50 max-w-6xl border-neutral-200 border rounded-3xl mt-8 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
  <!-- Info card -->
  <div class="group relative overflow-hidden sm:p-6 ]">
    <div class="pointer-events-none absolute inset-0 opacity-[0.07]"
      style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.9) 1px, transparent 1px); background-size: 14px 14px;">
    </div>

    <h3 class="text-3xl font-semibold tracking-tight font-geist">Self‑Care favorites | under $100</h3>


  </div>
  <article
    class="relative overflow-hidden aspect-[4/5] opacity-90 w-full h-[400px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/612f58ac-d3d1-4858-9d32-54fb91e264ba_1600w.jpg)] bg-cover border-neutral-200 border rounded-2xl mb-4 hover:opacity-100 transition">
    <div class="absolute top-3 left-3">

    </div>
    <div class="absolute top-3 right-3">

    </div>
    <div class="absolute bottom-3 left-3 right-3">

    </div>
  </article>
  <!-- Gallery -->
  <div class="lg:col-span-3 grid grid-cols-2 md:grid-cols-3 gap-4">
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <img alt="AI Dashboard Analytics" class="hover:opacity-100 transition opacity-90 w-full h-full object-cover" src="https://cdn.midjourney.com/ae779d2d-a0d7-4e8f-8dec-077f6e17cc6d/0_0.png?w=800&amp;q=80">
    </div>
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <img alt="Data Visualization Charts" class="hover:opacity-100 transition opacity-90 w-full h-full object-cover" src="https://cdn.midjourney.com/7f8ff315-157b-40d4-9ce0-02489c199f6d/0_0.png?w=800&amp;q=80">
    </div>
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <img alt="Smart Shopping Interface" class="hover:opacity-100 transition opacity-90 w-full h-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ba4b4b0e-bae6-4196-a342-434a1c9939f0_800w.jpg">
    </div>
  </div>
</div>