Hybrid Training Feature Card

<div class="relative overflow-hidden lg:rounded-3xl hover:border-neutral-400/50 transition-all min-h-[280px] lg:min-h-[320px] flex flex-col bg-neutral-800/60 rounded-2xl shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] backdrop-blur-lg w-72 h-64">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600&display=swap');
  </style>
  <div class="relative z-10 lg:p-8 flex flex-col h-full bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ee5b36ac-7a97-495e-a6a4-5f9b5b0adcea_800w.jpg)] bg-cover 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-neutral-200/90 ring-1 ring-neutral-400/30 bg-neutral-500/15 backdrop-blur-sm font-sans">Field</span>
        <span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-neutral-200/90 ring-1 ring-neutral-400/30 bg-neutral-500/15 backdrop-blur-sm font-sans">Virtual</span>
      </div>
    </div>
    <div class="mt-auto">
      <h3 class="lg:text-5xl text-4xl text-white tracking-tight mb-2 font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">Hybrid Training</h3>
      <p class="text-sm leading-relaxed text-neutral-200/85 mb-4 font-sans">"Perfect blend of tactical theory and on-field practice. Master technique and strategy together."</p>
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 rounded-full bg-neutral-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="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-neutral-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-neutral-200/90 font-medium font-sans">Modern Training</div>
          <div class="text-neutral-300/60 font-sans">Best of Both Worlds</div>
        </div>
      </div>
    </div>
  </div>
</div>