/* Equal side columns keep the navigation at the true centre of the banner. */
@media (min-width: 761px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 16px;
  }
  .site-header .brand { justify-self: start; }
  .site-header .desktop-nav { justify-self: center; margin: 0; }
  .site-header .cart-link { justify-self: end; }
}

/* Preserve space for all four links on smaller laptop and tablet screens. */
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header { column-gap: 10px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand > span,
  .site-header.scrolled .brand > span,
  .page-mode .site-header .brand > span { font-size: 18px; }
  .site-header .brand-symbol,
  .site-header.scrolled .brand-symbol { width: 30px; height: 34px; }
  .site-header .desktop-nav { padding: 5px 8px; gap: 2px; }
  .site-header .desktop-nav a { padding: 10px 8px; font-size: 11px; }
}