Logo Cloud Grid

<section class="ws-logo-cloud bg-[var(--ws-logo-cloud-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <p class="text-center text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)]">Trusted by innovative companies worldwide</p>

    <div class="mx-auto mt-10 grid max-w-4xl grid-cols-2 items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
      <div class="flex items-center justify-center">
        <svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
          <rect x="0" y="8" width="14" height="14" rx="3"/>
          <text x="20" y="22" font-size="16" font-weight="600">Acme</text>
        </svg>
      </div>
      <div class="flex items-center justify-center">
        <svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
          <circle cx="10" cy="15" r="8"/>
          <text x="24" y="22" font-size="16" font-weight="600">Nova</text>
        </svg>
      </div>
      <div class="flex items-center justify-center">
        <svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
          <polygon points="10,2 18,28 2,28"/>
          <text x="24" y="22" font-size="16" font-weight="600">Vertex</text>
        </svg>
      </div>
      <div class="flex items-center justify-center">
        <svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
          <rect x="2" y="6" width="10" height="10" rx="2" transform="rotate(45 7 11)"/>
          <text x="22" y="22" font-size="16" font-weight="600">Prism</text>
        </svg>
      </div>
      <div class="flex items-center justify-center">
        <svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
          <rect x="0" y="8" width="20" height="4" rx="2"/>
          <rect x="0" y="16" width="14" height="4" rx="2"/>
          <text x="26" y="22" font-size="16" font-weight="600">Stripe</text>
        </svg>
      </div>
    </div>
  </div>
</section>