/* Shared content edge for every page at the mobile navigation breakpoint. */
@media (max-width: 767px) {
  :root {
    --site-mobile-gutter: 12px;
    --page-gutter: var(--site-mobile-gutter);
    --about-page-gutter: var(--site-mobile-gutter);
    --contact-gutter: var(--site-mobile-gutter);
    --case-gutter: var(--site-mobile-gutter);
  }

  .site-navigation :is(.brand, .works-brand) {
    left: var(--site-mobile-gutter) !important;
  }

  .site-navigation > .menu-toggle {
    right: var(--site-mobile-gutter);
  }

  .mobile-menu__panel {
    padding-inline: var(--site-mobile-gutter);
  }

  .hero-content {
    padding-inline: var(--site-mobile-gutter);
  }

  .client-logo-reel,
  .dept-intro,
  .studio-metrics,
  .featured-works,
  .closing-cta {
    padding-inline: var(--site-mobile-gutter);
  }

  .client-voices__heading {
    margin-inline: var(--site-mobile-gutter);
  }

  .client-voices__rail {
    padding-inline: var(--site-mobile-gutter);
    scroll-padding-inline: var(--site-mobile-gutter);
  }

  .closing-cta__content {
    padding-inline: var(--site-mobile-gutter);
  }

  .studio-footer {
    --studio-footer-gutter: var(--site-mobile-gutter);
    padding-inline: var(--site-mobile-gutter);
  }

  .about-capabilities__track {
    padding-inline: var(--site-mobile-gutter);
  }

  .contact-panel {
    margin-inline: calc(-1 * var(--contact-gutter));
    padding-inline: var(--contact-gutter);
  }
}