@media (min-width: 701px) {
  .nav-wrap,
  .hero > .nav {
    justify-content: space-between;
  }

  .nav-wrap > nav,
  .hero > .nav > nav {
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .nav-wrap > .header-cta,
  .hero > .nav > .header-cta {
    margin-left: auto;
  }
}

@media (min-width: 901px) {
  .nav-wrap > nav,
  .hero > .nav > nav {
    left: 61%;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .nav-wrap > nav,
  .hero > .nav > nav {
    left: 56%;
  }
}

@media (max-width: 700px) {
  .nav-wrap > nav,
  .nav-wrap > .header-cta,
  .hero > .nav > nav,
  .hero > .nav > .header-cta {
    display: none;
  }
}