Responsive Feature Cards Section with Tailwind

<section class="relative z-10 -mt-10">
          <div class="mx-auto max-w-6xl px-4 md:px-6">
            <div class="flex flex-col md:flex-row gap-3 md:gap-4 supports-[backdrop-filter]:bg-white/5 md:p-4 bg-white/5 border-white/10 border rounded-2xl pt-3 pr-3 pb-3 pl-3 backdrop-blur-3xl">
              <!-- Card 1 -->
              <a href="#" class="flex-1 group hover:bg-white/5 transition md:p-5 flex items-start gap-4 bg-white/0 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4">
                <div class="h-10 w-10 grid place-items-center shadow-cyan-500/20 text-center bg-gradient-to-t from-slate-900 to-slate-700/50 rounded-full pt-3 pr-3 pb-3 pl-3 shadow-sm 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" data-lucide="sparkles" class="lucide lucide-sparkles w-[20px] h-[20px] text-[#ffffff]/50" data-icon-replaced="true" style="width: 20px; height: 20px;"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                </div>
                <div class="">
                  <p class="text-sm text-white/70 mt-1">E9 Relic</p>
                  <h3 class="mt-1 text-base md:text-lg font-semibold tracking-tight">Cosmos for Everyone</h3>
                  <p class="text-sm text-white/70 mt-1">A signature exhibit that blends artifacts with interactive projection.</p>
                </div>
              </a>
              <!-- Card 2 -->
              <a href="#" class="flex-1 group rounded-xl bg-white/0 hover:bg-white/5 transition border border-white/10 p-4 md:p-5 flex items-start gap-4">
                <div class="h-10 w-10 grid place-items-center shadow-cyan-500/20 text-center bg-gradient-to-t from-slate-900 to-slate-700/50 rounded-full pt-3 pr-3 pb-3 pl-3 shadow-sm 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" data-lucide="globe-2" class="lucide lucide-globe-2 w-[20px] h-[20px] text-[#ffffff]/50" data-icon-replaced="true" style="width: 20px; height: 20px;"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" class=""></path><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17" class=""></path><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                </div>
                <div class="">
                  <p class="text-sm text-white/70 mt-1">Virtual</p>
                  <h3 class="mt-1 text-base md:text-lg font-semibold tracking-tight">Largest Online Observatory</h3>
                  <p class="mt-1 text-sm text-white/70">Tour deep-sky datasets and live streams from global partner scopes.</p>
                </div>
              </a>
              <!-- Card 3 -->
              <a href="#" class="flex-1 group rounded-xl bg-white/0 hover:bg-white/5 transition border border-white/10 p-4 md:p-5 flex items-start gap-4">
                <div class="h-10 w-10 grid place-items-center shadow-cyan-500/20 text-center bg-gradient-to-t from-slate-900 to-slate-700/50 rounded-full pt-3 pr-3 pb-3 pl-3 shadow-sm 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" data-lucide="flask-conical" class="lucide lucide-flask-conical w-[20px] h-[20px] text-[#ffffff]/50" data-icon-replaced="true" style="width: 20px; height: 20px;"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2" class=""></path><path d="M6.453 15h11.094" class=""></path><path d="M8.5 2h7" class=""></path></svg>
                </div>
                <div class="">
                  <p class="text-sm text-white/70 mt-1">Learn</p>
                  <h3 class="mt-1 text-base md:text-lg font-semibold tracking-tight">Workshops &amp; Science</h3>
                  <p class="mt-1 text-sm text-white/70">Hands‑on labs for all ages, from rocketry to astrophotography.</p>
                </div>
              </a>
            </div>
          </div>
        </section>