/* Mobile-first overrides */

@media (max-width: 767px) {
  #main-nav {
    left: auto;
    right: var(--space-lg);
    transform: translateY(-1rem);
    padding: 0.625rem 1rem;
  }

  #main-nav.is-visible {
    transform: translateY(0);
  }

  .nav-logo {
    left: var(--space-lg);
  }

  .section-heading {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .container {
    padding-inline: var(--space-md);
  }
}

@media (min-width: 1440px) {
  :root {
    --container-max: 80rem;
  }
}