@media (max-width: 820px) {
  header,
  .site-header {
    gap: 10px;
  }

  nav,
  .nav {
    gap: 8px 14px;
    row-gap: 8px;
  }

  header > a,
  .brand,
  nav a,
  .nav a,
  .button,
  .btn,
  .button-row a,
  .hero-actions a,
  .hero-secondary-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
  }

  header > a,
  .brand,
  nav a,
  .nav a {
    padding-inline: 4px;
  }

  .hero-secondary-links {
    gap: 8px 12px;
  }

  .hero-secondary-links a {
    padding-inline: 4px;
  }

  .kicker,
  .section-kicker,
  .eyebrow {
    font-size: 14px;
  }

  p,
  li,
  h1,
  h2,
  h3 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  main {
    overflow-x: clip;
  }

  .lead {
    line-height: 1.62;
  }

  .panel,
  .card,
  .toc,
  .note {
    padding: 18px;
  }
}