@layer components {
  .card-page {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  @media (max-width: 40rem) {
    .card-page {
      grid-template-columns: 1fr;
    }
  }

  .card-page__details {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  /* The pips flow inline with the name so they follow its last word. A flex row
     would size the name to the full column once it wraps, stranding the pips at
     the far right of a two-line title. */
  .card-page__title .pips {
    margin-left: var(--space-1);
  }

  .card-page__printed {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .card-face {
    justify-self: stretch;
    display: grid;
    gap: var(--space-2);
  }

  .card-face + .card-face {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  /* A grid item, so a bottom margin would add to the track gap rather than
     collapse into it. */
  .card-face__name {
    font-size: var(--text-lg);
    margin-bottom: 0;
  }

  .card-face__type {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  /* The two numbers a reader scans a type line for, kept at full strength
     against the muted words around them. */
  .card-face__cost,
  .card-face__stats {
    color: var(--color-ink);
  }

  /* MTGJSON separates a card's rules with newlines, which is the only structure
     oracle text has. */
  .card-face__text {
    white-space: pre-line;
  }

  .card-page__links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-sm);
  }
}