header.nav > .wrap {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) 220px !important;
  align-items: center !important;
  gap: 24px !important;
}

header.nav .brand {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

header.nav .nav-links {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  overflow: hidden !important;
}

header.nav .nav-links a {
  white-space: nowrap !important;
}

header.nav > .wrap > .button {
  width: 220px !important;
  max-width: 220px !important;
  justify-self: end !important;
  flex: 0 0 220px !important;
}

@media (max-width: 980px) {
  header.nav > .wrap {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  header.nav .nav-links {
    display: none !important;
  }

  header.nav > .wrap > .button {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 640px) {
  header.nav > .wrap {
    min-height: 62px !important;
    gap: 10px !important;
  }

  header.nav .brand {
    gap: 9px !important;
    font-size: 15px !important;
  }

  header.nav .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  header.nav > .wrap > .button {
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}