@layer components {
  .myth {
    --myth-numeral: 2.75rem;
    position: relative;
    display: grid;
    grid-template-columns: var(--myth-numeral) minmax(0, 1fr);
    align-items: baseline;
    padding-block: clamp(1.125rem, 0.9rem + 0.9vw, 1.625rem);
    border-top: 1px solid var(--line-faint);
    line-height: 1.42;
  }

  .myth__numeral {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
  }

  .myth__claim {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.19rem + 0.3vw, 1.375rem);
    font-style: italic;
    font-weight: var(--weight-text);
    line-height: 1.34;
    letter-spacing: -0.004em;
    text-wrap: pretty;
  }

  .myth__said,
  .myth__stands {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .myth__quote::before {
    content: var(--myth-quote-open);
    margin-left: -0.52em;
    color: var(--ink-muted);
  }

  .myth__quote::after {
    content: var(--myth-quote-close);
    color: var(--ink-muted);
  }

  .myth__answer {
    grid-column: 2;
    grid-row: 2;
    max-width: 62ch;
    margin-top: var(--space-2xs);
    font-size: var(--text-base);
    line-height: 1.6;
    text-wrap: pretty;
  }

  .myth--lead .myth__said,
  .myth--display .myth__said,
  .myth--lead .myth__stands,
  .myth--display .myth__stands {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-family: var(--font-text);
    font-size: var(--text-2xs);
    font-style: normal;
    font-weight: var(--weight-strong);
    line-height: 1.5;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: normal;
  }

  .myth--lead .myth__said,
  .myth--display .myth__said {
    display: block;
    color: var(--ink-soft);
  }

  .myth--lead .myth__stands,
  .myth--display .myth__stands {
    margin-right: var(--space-2xs);
    color: var(--ink-accent);
  }

  .myth--lead .myth__numeral,
  .myth--display .myth__numeral {
    color: var(--ink-accent);
  }

  .myth--lead .myth__quote,
  .myth--display .myth__quote {
    display: block;
    margin-top: var(--space-2xs);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-title);
  }

  .myth--lead .myth__quote::before,
  .myth--lead .myth__quote::after,
  .myth--display .myth__quote::before,
  .myth--display .myth__quote::after {
    color: var(--ink-accent);
  }

  .myth--lead {
    padding-top: 0;
    padding-bottom: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    border-top: 0;
  }

  .myth--lead .myth__quote {
    max-width: 22ch;
    font-size: clamp(1.875rem, 1.3rem + 2.5vw, 3.125rem);
    line-height: 1.1;
  }

  .myth--lead.myth--long .myth__quote {
    max-width: 30ch;
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem);
    line-height: 1.16;
  }

  .myth--lead .myth__answer,
  .myth--display .myth__answer {
    max-width: 46ch;
    font-size: var(--text-md);
    line-height: 1.55;
  }

  .myth--lead .myth__answer {
    margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  }

  .myth--display {
    padding-block: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
    border-top-color: var(--line-strong);
  }

  .myth--display .myth__quote {
    max-width: 26ch;
    font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
    line-height: 1.18;
  }

  .myth--display .myth__answer {
    margin-top: var(--space-s);
  }

  .myth--solo .myth__claim {
    max-width: 44ch;
  }

  @media (min-width: 48em) {
    .myth {
      --myth-numeral: 3.25rem;
    }
  }

  @media (min-width: 64em) {
    .myth--display .myth__answer {
      margin-left: min(28%, 12rem);
    }
  }
}