@media (max-width: 47.999rem) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.25rem;
    --container-gutter: var(--container-gutter-mobile);
    --grid-gap: 1rem;
  }

  .section {
    padding-block: var(--space-8);
  }

  .layout-grid > [class*="col-"] {
    grid-column: span 12;
  }

  .button-block-mobile {
    width: 100%;
  }
}

@media (min-width: 48rem) and (max-width: 61.999rem) {
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.375rem;
  }

  .layout-grid > .col-3,
  .layout-grid > .col-4,
  .layout-grid > .col-6,
  .layout-grid > .col-8 {
    grid-column: span 6;
  }
}

@media (min-width: 62rem) {
  .nav-desktop-wrap {
    display: block;
  }

  .nav-mobile {
    display: none;
  }
}

@media (min-width: 100rem) {
  .section-wide {
    width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-wide));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}