Responsive Yacht Category Card Grid

<section class="relative sm:py-20 pt-16 pb-16">
      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none"></div>
      <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
        <div class="text-center max-w-2xl mx-auto">
          <h2 class="sm:text-4xl text-3xl font-semibold tracking-tight">Discover Luxury Yachting</h2>
          <p class="mt-3 text-sm sm:text-base text-white/70" style="">Browse by category</p>
        </div>

        <div class="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mt-10">
  <a href="#" class="group relative hover:ring-1 hover:ring-inset hover:ring-cyan-400/30 hover:bg-gradient-to-b hover:from-cyan-500/10 hover:to-transparent hover:border-cyan-400/20 transition bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5" style="">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 flex bg-white/10 group-hover:bg-gradient-to-tr group-hover:from-cyan-400 group-hover:to-blue-500 rounded-xl items-center justify-center transition-all" style="">
          <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="waves" class="lucide lucide-waves h-5 w-5 text-slate-300 group-hover:text-black transition-colors" style=""><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path></svg>
        </div>
        <p class="font-semibold tracking-tight">Motor Yachts</p>
      </div>
      <span class="inline-flex items-center gap-1 text-xs text-white/40 group-hover:text-cyan-300 transition-colors">
        <span class="hidden group-hover:inline">Explore</span>
        <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="chevron-right" class="lucide lucide-chevron-right h-5 w-5 group-hover:hidden"><path d="m9 18 6-6-6-6" class=""></path></svg>
        <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 hidden group-hover:inline-flex"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
      </span>
    </div>
    <p class="group-hover:text-white/70 transition-colors text-xs text-white/60 mt-3" style="">Power and performance for ocean adventures.</p>
  </a><a href="#" class="group relative hover:ring-1 hover:ring-inset hover:ring-cyan-400/30 hover:bg-gradient-to-b hover:from-cyan-500/10 hover:to-transparent hover:border-cyan-400/20 transition bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5" style="">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 flex group-hover:bg-gradient-to-tr group-hover:from-cyan-400 group-hover:to-blue-500 transition-all bg-white/10 rounded-xl items-center justify-center" style="">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sailboat" class="lucide lucide-sailboat lucide-waves group-hover:text-black transition-colors w-[20px] h-[20px] text-slate-50" data-icon-replaced="true" style="width: 20px; height: 20px;"><path d="M10 2v15" class=""></path><path d="M7 22a4 4 0 0 1-4-4 1 1 0 0 1 1-1h16a1 1 0 0 1 1 1 4 4 0 0 1-4 4z" class=""></path><path d="M9.159 2.46a1 1 0 0 1 1.521-.193l9.977 8.98A1 1 0 0 1 20 13H4a1 1 0 0 1-.824-1.567z" class=""></path></svg>
        </div>
        <p class="font-semibold tracking-tight">Sailing Yachts</p>
      </div>
      <span class="inline-flex items-center gap-1 text-xs text-white/40 group-hover:text-cyan-300 transition-colors">
        <span class="hidden group-hover:inline">Explore</span>
        <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="chevron-right" class="lucide lucide-chevron-right h-5 w-5 group-hover:hidden"><path d="m9 18 6-6-6-6" class=""></path></svg>
        <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 hidden group-hover:inline-flex"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
      </span>
    </div>
    <p class="group-hover:text-white/70 transition-colors text-xs text-white/60 mt-3" style="">Experience the romance of wind-powered sailing.</p>
  </a>
  
  <a href="#" class="group relative hover:ring-1 hover:ring-inset hover:ring-cyan-400/30 hover:bg-gradient-to-b hover:from-cyan-500/10 hover:to-transparent hover:border-cyan-400/20 transition rounded-2xl bg-white/5 border border-white/10 p-5" style="">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 flex bg-white/10 group-hover:bg-gradient-to-tr group-hover:from-cyan-400 group-hover:to-blue-500 rounded-xl items-center justify-center transition-all" style="">
          <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="crown" class="lucide lucide-crown h-5 w-5 text-slate-300 group-hover:text-black transition-colors" style=""><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" class=""></path><path d="M5 21h14" class=""></path></svg>
        </div>
        <p class="font-semibold tracking-tight">Superyachts</p>
      </div>
      <span class="inline-flex items-center gap-1 text-xs text-white/40 group-hover:text-cyan-300 transition-colors">
        <span class="hidden group-hover:inline">Explore</span>
        <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="chevron-right" class="lucide lucide-chevron-right h-5 w-5 group-hover:hidden"><path d="m9 18 6-6-6-6" class=""></path></svg>
        <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 hidden group-hover:inline-flex"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
      </span>
    </div>
    <p class="mt-3 text-xs text-white/60 group-hover:text-white/70 transition-colors" style="">Ultimate luxury with full crew and amenities.</p>
  </a>
  <a href="#" class="group relative hover:ring-1 hover:ring-inset hover:ring-cyan-400/30 hover:bg-gradient-to-b hover:from-cyan-500/10 hover:to-transparent hover:border-cyan-400/20 transition rounded-2xl bg-white/5 border border-white/10 p-5" style="">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-white/10 group-hover:bg-gradient-to-tr group-hover:from-cyan-400 group-hover:to-blue-500 flex items-center justify-center transition-all" style="">
          <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="users" class="lucide lucide-users h-5 w-5 text-slate-300 group-hover:text-black transition-colors" style=""><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
        </div>
        <p class="font-semibold tracking-tight">Group Charters</p>
      </div>
      <span class="inline-flex items-center gap-1 text-xs text-white/40 group-hover:text-cyan-300 transition-colors">
        <span class="hidden group-hover:inline">Explore</span>
        <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="chevron-right" class="lucide lucide-chevron-right h-5 w-5 group-hover:hidden"><path d="m9 18 6-6-6-6" class=""></path></svg>
        <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 hidden group-hover:inline-flex"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
      </span>
    </div>
    <p class="mt-3 text-xs text-white/60 group-hover:text-white/70 transition-colors" style="">Corporate events and private celebrations.</p>
  </a>
</div>
      </div>
    </section>