Curated Product Gallery Section with Hover Effects

<div
  class="sm:p-8 bg-neutral-50 max-w-7xl 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">Shop for your home essentials</h3>


  </div>
  <article
    class="relative overflow-hidden aspect-[4/5] opacity-90 w-full h-[400px] bg-[url(https://cdn.midjourney.com/9dcf2138-f6e6-49ec-bc5b-e8761cd81601/0_0.png?w=800&amp;q=80)] 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>
    <p class="leading-tight absolute bottom-4 left-4 text-lg font-medium text-white tracking-tight font-geist" style="">
      Cleaning &amp; Vacuums</p>
  </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">
      <article
        class="relative overflow-hidden aspect-[4/5] opacity-90 w-full h-[300px] bg-[url(https://cdn.midjourney.com/41e7bad9-4ca9-492a-812e-491116008d5c/0_0.png?w=800&amp;q=80)] bg-cover border-neutral-200 border rounded-2xl 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">
          <p class="leading-tight text-lg font-medium text-white tracking-tight font-geist" style="">Home Storage</p>
        </div>
      </article>
    </div>
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <article
        class="relative overflow-hidden aspect-[4/5] hover:opacity-100 transition opacity-90 w-full h-[300px] bg-[url(https://cdn.midjourney.com/59b1196e-eac4-4632-88f8-efa082b7a03c/0_0.png?w=800&amp;q=80)] bg-cover border-neutral-200 border rounded-2xl">
        <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">
          <p class="leading-tight text-lg font-medium text-white tracking-tight font-geist" style="">Home Decor</p>
        </div>
      </article>
    </div>
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <article
        class="relative overflow-hidden aspect-[4/5] opacity-90 w-full h-[300px] bg-[url(https://cdn.midjourney.com/ae5ac21a-698a-4c15-97f4-450e6cf694e0/0_0.png?w=800&amp;q=80)] bg-cover border-neutral-200 border rounded-2xl 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">
          <p class="leading-tight text-lg font-medium text-white tracking-tight font-geist" style="">Bedding</p>
        </div>
      </article>
    </div>


  </div>
</div>