@media (max-width: 700px) {
  .top-nav,
  body.ui-on-dark .top-nav,
  body.ui-on-dark.ui-scrolled .top-nav,
  body.ui-on-light .top-nav,
  body.ui-on-light.ui-scrolled .top-nav {
    left: clamp(24px, 10vw, 46px);
    right: clamp(24px, 10vw, 46px);
    height: 64px;
    padding: 0 18px 0 clamp(32px, 8vw, 44px);
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
  }

  .top-nav .nav-links,
  body.ui-on-dark .top-nav .nav-links,
  body.ui-on-dark.ui-scrolled .top-nav .nav-links,
  body.ui-on-light .top-nav .nav-links,
  body.ui-on-light.ui-scrolled .top-nav .nav-links {
    display: none;
  }

  .top-nav .nav-brand,
  body.ui-on-dark .top-nav .nav-brand,
  body.ui-on-dark.ui-scrolled .top-nav .nav-brand,
  body.ui-on-light .top-nav .nav-brand,
  body.ui-on-light.ui-scrolled .top-nav .nav-brand {
    min-width: 0;
    max-width: none;
    overflow: visible;
    line-height: 1.18;
    justify-self: start;
    font-size: clamp(22px, 6.3vw, 26px);
  }

  .top-nav .nav-right,
  body.ui-on-dark .top-nav .nav-right,
  body.ui-on-dark.ui-scrolled .top-nav .nav-right,
  body.ui-on-light .top-nav .nav-right,
  body.ui-on-light.ui-scrolled .top-nav .nav-right {
    width: auto;
    min-width: 0;
    justify-self: end;
  }

  .top-nav .hamburger,
  body.ui-on-dark .top-nav .hamburger,
  body.ui-on-dark.ui-scrolled .top-nav .hamburger,
  body.ui-on-light .top-nav .hamburger,
  body.ui-on-light.ui-scrolled .top-nav .hamburger {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 380px) {
  .top-nav,
  body.ui-on-dark .top-nav,
  body.ui-on-dark.ui-scrolled .top-nav,
  body.ui-on-light .top-nav,
  body.ui-on-light.ui-scrolled .top-nav {
    left: 24px;
    right: 24px;
    padding-left: 30px;
    padding-right: 14px;
  }

  .top-nav .hamburger,
  body.ui-on-dark .top-nav .hamburger,
  body.ui-on-dark.ui-scrolled .top-nav .hamburger,
  body.ui-on-light .top-nav .hamburger,
  body.ui-on-light.ui-scrolled .top-nav .hamburger {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}