Backstage Image Card with Overlay Label

<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
  aspect-[4/3] rounded-lg overflow-hidden border
  border-neutral-900 bg-neutral-900">
  <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?q=80&w=1000&auto=format&fit=crop" alt="Backstage" class="w-full h-full object-cover opacity-60
    group-hover:opacity-100 transition-opacity duration-500
    grayscale group-hover:grayscale-0" />
  <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
    <span class="text-xs font-medium text-white flex items-center gap-1">
      <iconify-icon icon="lucide:clapperboard" width="12"></iconify-icon>
    </span>
  </div>
</div>