@media (max-width: 1200px) {
  .site-header__main {
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .site-header__main {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .utility-row--guest-1,
  .utility-row--guest-2,
  .utility-row--user-1,
  .utility-row--user-2,
  .utility-row--user-3 {
    justify-content: flex-start;
  }

  .site-header__nav {
    justify-content: flex-start;
  }

  .app-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page-shell,
  .site-header__main,
  .site-header__nav,
  .site-footer__inner,
  .app-body {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .brand-panel__title {
    font-size: 1.8rem;
  }

  .utility-row {
    gap: var(--space-xs);
  }
}