Feature Card with Image

<div class="relative group rounded-3xl bg-white/5 p-7 lg:p-8 ring-1 ring-white/15 backdrop-blur-sm overflow-hidden"
  style="box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 6px 22px rgba(0,0,0,0.14); min-height: 360px;">
  <div class="absolute inset-0 opacity-10"
    style="background: linear-gradient(90deg, transparent 0%, rgba(110,231,183,0.3) 50%, transparent 100%); animation: shimmer 3s ease-in-out infinite; transform: translateX(-100%);">
  </div>
  <div class="pointer-events-none absolute -top-10 -right-10 h-28 w-28 rounded-full bg-emerald-300/20 blur-3xl"></div>
  <div class="relative z-10">
    <div class="relative w-full aspect-video rounded-2xl overflow-hidden mb-5 ring-1 ring-emerald-300/30"><img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a66a6053-081d-461e-b7bf-f325b92ef575_800w.jpg" alt="Feature image" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent"></div>
      <div
        class="absolute left-3 bottom-3 inline-flex items-center gap-1.5 rounded-full bg-black/40 px-2.5 py-1 text-xs text-white ring-1 ring-white/20 backdrop-blur-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
          <path
            d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z">
          </path>
        </svg>Wood • Warmth</div>
    </div>
    <h3 class="text-lg font-medium text-white mb-2">Wood-Fired Comfort</h3>
    <p class="text-sm text-slate-300/90">Cozy up by the crackling wood stove with locally sourced timber. Perfect for
      chilly mountain evenings.</p>
    <div class="mt-4 flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-white/15"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-emerald-300"><path d="M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"></path><path d="M7 16v6"></path><path d="M13 19v3"></path><path d="M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"></path></svg>Local timber</span><span class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-white/15"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-emerald-300"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path></svg>Eco heating</span>
    </div>
  </div>
  <style>
    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }
  </style>
</div>