/* Mobile-first layout adjustments. Component styles live in style.css. */
:root { --page-gutter: 1.125rem; }

@media (min-width: 600px) {
  :root { --page-gutter: clamp(1.5rem, 5vw, 2.5rem); }
  .card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .section-heading { margin-bottom: 3.5rem; }
}

@media (max-width: 760px) {
  .site-nav { flex-wrap: wrap; }
  .site-nav__links {
    width: 100%;
    overflow-x: auto;
    padding: 0 0 0.8rem;
    scrollbar-width: thin;
  }
  .site-nav__links a { white-space: nowrap; }
  .button { min-height: 3rem; }
}

@media (max-width: 420px) {
  .button-row { align-items: stretch; flex-direction: column; }
  .button-row .button { width: 100%; }
}