Logo Row.

---
/**
 * LogoRow: a short lead-in line and one evenly spaced, wrapping row of logos.
 *
 * Give each item an `src` (single-colour marks work best) or leave it off to
 * set the name as a wordmark in the theme's display face.
 *
 * @example
 * <LogoRow title="Stocked by" items={[{ name: "Harbor & Pine" }, { name: "Lumen", src: "/logos/lumen.svg" }]} />
 */
interface Item {
  name: string;
  src?: string;
  href?: string;
}
interface Props {
  title?: string;
  items: Item[];
  class?: string;
}

const { title, items, class: className } = Astro.props;
---

<section class:list={["vs-logo-row", className]} aria-label={title ?? "Customers"}>
  <div class="vs-logo-row__inner">
    {title && <p class="vs-logo-row__title">{title}</p>}
    <ul class="vs-logo-row__list">
      {
        items.map((it) => {
          const mark = it.src ? <img src={it.src} alt={it.name} height="28" loading="lazy" /> : <span class="vs-display">{it.name}</span>;
          return <li>{it.href ? <a href={it.href}>{mark}</a> : mark}</li>;
        })
      }
    </ul>
  </div>
</section>

<style>
  .vs-logo-row {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-logo-row__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(40px, 6cqi, 72px) var(--vs-gutter);
  }
  .vs-logo-row__title {
    margin: 0 0 28px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--vs-ink-3);
  }
  .vs-logo-row__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px clamp(28px, 6cqi, 72px);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vs-ink-2);
  }
  .vs-logo-row__list span {
    font-size: 1.375rem;
    white-space: nowrap;
  }
  .vs-logo-row__list img {
    display: block;
    width: auto;
    height: 28px;
    filter: grayscale(1);
    opacity: 0.75;
  }
  .vs-logo-row__list a {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
  }
  .vs-logo-row__list a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
</style>