Product Card with Gradient Overlay & Hover Zoom

<div class="max-w-xl relative group overflow-hidden aspect-[3/4] bg-white/10 ring-white/15 ring-1 rounded-2xl backdrop-blur">
  <img src="https://cdn.midjourney.com/23068c2c-3629-4025-af2a-629137790bb1/0_0.png?w=800&amp;q=80" alt="Essential blazer" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
  <div class="absolute bottom-4 left-4 right-4">
    <h3 class="text-white font-semibold text-sm font-geist">Tailored Blazer</h3>
    <p class="text-xs text-white/70 font-geist">From $229</p>
  </div>
</div>