Logos — single row

// Made-up names — replace with your customers' logos (SVG), with their permission.
const logos = [
  { name: "Northwind", className: "font-bold tracking-[-0.05em]" },
  { name: "Blue Pine", className: "font-medium tracking-wide" },
  { name: "Kaveri", className: "text-[22px] font-semibold italic tracking-tight" },
  { name: "LUMEN", className: "text-base tracking-[0.24em]" },
  { name: "Orbit", className: "font-extrabold tracking-tight" },
  { name: "Halcyon", className: "font-medium" },
  { name: "tessera", className: "text-[22px] font-bold tracking-[-0.06em]" },
  { name: "Marigold", className: "font-semibold lowercase" },
];

export function LogosRow() {
  return (
    <section aria-label="Customers" className="bg-bg py-12 font-sans">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <p className="mb-6 text-center text-[13.5px] text-fg-subtle">Studios and small teams that bill with Fernbill</p>
        <ul className="grid grid-cols-2 items-center gap-x-8 gap-y-6 text-fg-subtle min-[420px]:grid-cols-3 md:flex md:justify-between">
          {logos.slice(0, 6).map((l) => (
            <li key={l.name} className="flex justify-center opacity-85 grayscale transition hover:text-fg hover:opacity-100">
              <span className={"whitespace-nowrap text-xl leading-none " + l.className}>{l.name}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}