Responsive Brand Logo Grid Section

<div class="relative overflow-hidden sm:p-8 text-white text-center bg-neutral-950 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6">
        <div class="absolute inset-0 pointer-events-none">
          <div class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_20%_-20%,rgba(255,255,255,0.06),transparent_60%)]"></div>
          <div class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_80%_120%,rgba(255,255,255,0.05),transparent_60%)]"></div>
          <div class="absolute inset-0 bg-[radial-gradient(#ffffff0d_1px,transparent_1px)] [background-size:20px_20px] opacity-[0.12]"></div>
        </div>
        <div class="relative">
          <h2 class="text-2xl sm:text-3xl tracking-tight">Trusted by product teams</h2>
          <p class="text-white/70 mt-2">From seed‑stage startups to enterprise platform groups.</p>
          <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-7 gap-4 mt-8 mb-8 items-center">
              <div class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center">
                  
                  <span class="text-lg font-normal tracking-tighter">TechFlow</span>
              </div>
              
              <div class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center">
                  
                  <span class="text-lg font-bold tracking-tighter font-bricolage">Nexus Labs</span>
              </div>
              
              <div class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center">
                  
                  <span class="text-lg font-semibold tracking-tighter font-merriweather">DataSync</span>
              </div>
              
              <div class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center">
                  
                  <span class="text-lg font-normal tracking-tighter font-instrument-serif">VisionCorp</span>
              </div>
              
              <div class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center">
                  
                  <span class="text-lg font-semibold tracking-tighter font-playfair">CloudBase</span>
              </div>
              
              <div class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center">
                  
                  <span class="text-lg font-normal tracking-tighter">InnovateTech</span>
              </div>
              
              <div class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center">
                  
                  <span class="text-lg font-bold tracking-tighter">FlowState</span>
              </div>
          </div>
        </div>
    </div>