Hybrid Learning Feature Card with Tags

<article
  class="relative overflow-hidden lg:rounded-3xl md:col-span-2 lg:col-span-1 hover:border-red-400/50 transition-all min-h-[280px] lg:min-h-[320px] max-w-[320px] flex flex-col bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e09a753d-0238-4af6-9202-bcf58fe9612a_800w.jpg)] bg-cover border-red-500/30 rounded-2xl shadow-xl backdrop-blur-lg">
  <div class="relative z-10 lg:p-8 flex flex-col h-full pt-6 pr-6 pb-6 pl-6 justify-between">
    <div class="flex items-start justify-between">
      <div class="flex flex-wrap gap-2">
        <span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-red-200/90 ring-1 ring-red-400/30 bg-red-500/15 backdrop-blur-sm">Online</span>
        <span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-cyan-200/90 ring-1 ring-cyan-400/30 bg-cyan-500/15 backdrop-blur-sm">Hands-on</span>
      </div>

    </div>
    <div class="mt-auto">
      <h3 class="text-4xl lg:text-5xl font-normal text-white tracking-tight font-bricolage mb-2">Hybrid Learning</h3>
      <p class="text-sm leading-relaxed text-red-200/85 mb-4">"The perfect blend of digital convenience and tactile
        mastery. Learn theory online, practice hands-on."</p>
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center">
          <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-blue-400">
            <rect width="20" height="14" x="2" y="3" rx="2"></rect>
            <line x1="8" x2="16" y1="21" y2="21"></line>
            <line x1="12" x2="12" y1="17" y2="21"></line>
          </svg>
        </div>
        <div class="text-xs">
          <div class="text-red-200/90 font-medium">Modern Format</div>
          <div class="text-red-300/60">Best of Both Worlds</div>
        </div>
      </div>
    </div>
  </div>
</article>