Portfolio Card with Image Hover Zoom

<article class="group overflow-hidden bg-white/80 border-black/5 border rounded-xl backdrop-blur-sm">
  <div class="relative aspect-[16/10]">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ce4a30c0-92e5-44c5-9ae4-49b73739f76e_800w.jpg" alt="Modern brand identity design" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
    <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
  </div>
  <div class="pt-4 pr-4 pb-4 pl-4">
    <div class="flex items-center gap-2 text-xs text-gray-500">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette"
        class="lucide lucide-palette w-4 h-4 stroke-1.5">
        <path
          d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z">
        </path>
        <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
        <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
        <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
        <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
      <span class="font-geist">Brand Identity</span>
    </div>
    <h3 class="mt-2 text-base font-semibold tracking-tight text-gray-900 font-geist">Vertex Brand System</h3>
    <p class="text-sm text-gray-600 font-geist mt-1">Complete visual identity for fintech startup.</p>
  </div>
</article>