@layer components {
  /* Everyone a page is for, each a way in to the page written for them: across a hairline grid,
     a mark, who they are in the serif and the line that is theirs. */
  .site-types {
    display: flex;
    flex-direction: column;
    gap: var(--space-11);
    max-inline-size: var(--max-content);
    margin-inline: auto;
    padding: var(--space-13) var(--gutter-fluid);
  }

  .site-types__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-inline-size: var(--measure-site-lead);
  }

  .site-types__title {
    font: var(--type-site-headline);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .site-types__lead {
    font: var(--type-site-lead);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .site-types__grid {
    display: grid;
    border-block-start: var(--border-width) solid var(--color-border);
    list-style: none;
  }

  .site-types__grid > li {
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .site-type {
    display: grid;
    grid-template-columns: auto minmax(var(--space-0), 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    block-size: var(--size-fill);
    padding: var(--space-8) var(--space-2);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--dur-base) var(--ease-calm);
  }

  .site-type__mark {
    grid-row: span 3;
    display: grid;
    place-items: center;
    inline-size: var(--site-step-mark-size);
    block-size: var(--site-step-mark-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-raised);
    color: var(--color-accent-ink);
    --icon-size: var(--site-step-icon-size);
    transition: background-color var(--dur-base) var(--ease-calm), color var(--dur-base) var(--ease-calm);
  }

  .site-type__name {
    font: var(--type-site-belief);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .site-type__line {
    font: var(--type-body-lg);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .site-type__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--type-label);
    color: var(--color-accent-ink);
  }

  @media (hover: hover) {
    .site-type:hover {
      background-color: var(--color-surface-raised);
    }

    .site-type:hover .site-type__mark {
      background-color: var(--color-accent);
      color: var(--color-ink-on-accent);
    }
  }

  @media (width >= 700px) {
    .site-types__grid {
      grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
      column-gap: var(--space-9);
    }

    .site-types__grid > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

  @media (width >= 1000px) {
    .site-types {
      gap: var(--space-12);
    }

    .site-types__title {
      font: var(--type-site-headline-lg);
    }

    .site-types__lead {
      font: var(--type-site-lead-lg);
    }

    .site-types__grid {
      grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
    }

    .site-types__grid > :last-child:nth-child(odd) {
      grid-column: auto;
    }

    .site-type {
      grid-template-columns: none;
      padding: var(--space-9) var(--space-6);
    }

    .site-type__mark {
      grid-row: auto;
      margin-block-end: var(--space-4);
    }
  }
}