All Ages Level Card

<div class="relative overflow-hidden lg:rounded-3xl hover:border-neutral-400/50 transition-all min-h-[280px] 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-64 h-[360px]">
  <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/82a21b5e-43c7-450c-853a-3c4966a5e63a_800w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6 justify-between">
    <div class="flex mb-6 items-start justify-between">
      <span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-neutral-300/90 ring-1 ring-neutral-400/30 bg-neutral-500/15 backdrop-blur-sm font-sans">Level</span>
    </div>
    <div class="text-center">
      <h3 class="lg:text-4xl text-3xl text-white tracking-tight mb-2 font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">All Ages</h3>
      <p class="text-sm text-neutral-200/80 font-sans">Youth to Professional</p>
      <div class="flex justify-center gap-1 mt-3">
        <div class="w-2 h-2 rounded-full bg-neutral-400"></div>
        <div class="w-2 h-2 rounded-full bg-neutral-400"></div>
        <div class="w-2 h-2 rounded-full bg-neutral-400"></div>
        <div class="w-2 h-2 rounded-full bg-neutral-400/40"></div>
      </div>
    </div>
  </div>
</div>