Certification Info Card with Stats & Image Background

<article
  class="relative overflow-hidden lg:rounded-3xl hover:border-amber-400/50 transition-all min-h-[280px] flex flex-col text-white bg-zinc-900 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e81a7e76-0ea2-4b7d-8137-a761706f2c3b_800w.jpg)] bg-cover border-amber-500/30 rounded-2xl shadow-xl max-w-[320px]">
  <div class="lg:p-8 grow pt-6 pr-6 pb-6 pl-6">
    <div class="flex items-center gap-2 uppercase text-xs font-normal text-zinc-400 tracking-widest mb-6">
      <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"
        class="w-4 h-4 text-green-400">
        <path
          d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
        </path>
        <path d="m9 12 2 2 4-4"></path>
      </svg>
      Certification
    </div>
    <div class="space-y-4">
      <h3 class="text-3xl font-normal text-white tracking-tight font-bricolage">Pro MUA</h3>
      <p class="text-sm leading-relaxed text-zinc-300">Industry-recognized certification that opens doors to
        professional opportunities in beauty, fashion, and media.</p>
      <div class="grid grid-cols-2 gap-4 pt-4">
        <div class="text-center">
          <div class="text-2xl font-bold text-amber-400">92%</div>
          <div class="text-xs text-zinc-400 uppercase tracking-wide">Job Rate</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-emerald-400">1000+</div>
          <div class="text-xs text-zinc-400 uppercase tracking-wide">Certified</div>
        </div>
      </div>
    </div>
  </div>
  <div class="lg:p-8 border-zinc-800 border-t pt-6 pr-6 pb-6 pl-6">
    <div class="flex items-center gap-2 text-sm">
      <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"
        class="w-4 h-4 text-green-400">
        <path
          d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
        </path>
        <circle cx="12" cy="8" r="6"></circle>
      </svg>
      <span class="text-amber-200">Industry Recognition</span>
    </div>
  </div>
</article>