#page-intro {
  --page-intro-logo-size: 84px;
  --page-intro-logo-image-size: 48px;
  --page-intro-text-offset: 8px;

  border-bottom: 0.5px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, var(--bg-raised));

  > div {
    display: grid;
    grid-template-columns: var(--page-intro-logo-size) minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 18px;
    align-items: start;
    padding-block: 24px;
  }

  figure {
    display: grid;
    place-items: center;
    width: var(--page-intro-logo-size);
    height: var(--page-intro-logo-size);
    margin: 0;
    color: var(--ink);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--bg-sunken) 72%, transparent), transparent),
      var(--bg-raised);
    border: 0.5px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;

    picture,
    img {
      display: block;
      width: var(--page-intro-logo-image-size);
      height: auto;
    }
  }

  > div > div {
    min-width: 0;
    padding-top: var(--page-intro-text-offset);
  }

  h1 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 30px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.12;

    > span + span {
      display: block;
      margin-top: 6px;
      color: var(--ink);
      font-size: 16px;
      font-weight: 400;
      font-variant-numeric: tabular-nums;
    }

    + div {
      max-width: 760px;
      margin: 0;
      color: var(--ink-muted);
      font-size: 14px;
    }
  }

  aside[aria-label="Advertisement"] {
    grid-column: 1 / -1;
    min-height: 112px;
  }

  @media (min-width: 40rem) {
    --page-intro-logo-size: 112px;
    --page-intro-logo-image-size: 58px;
    --page-intro-text-offset: 12px;

    > div {
      column-gap: 22px;
      padding-block: 28px 24px;
    }

    figure {
      font-size: 44px;
    }
  }

  @media (min-width: 64rem) {
    > div {
      grid-template-columns: var(--page-intro-logo-size) 22px minmax(0, 1fr) 28px 300px;
      column-gap: 0;
    }

    figure {
      grid-column: 1;
    }

    > div > div {
      grid-column: 3;
    }

    aside[aria-label="Advertisement"] {
      grid-column: 5;
    }
  }
}