.nav {
  --nav-logo-width: 13.375em;

  align-items: center;
  background: var(--color-pink);
  display: grid;
  grid-auto-flow: column;
  height: var(--nav-height);
  padding-inline: var(--space-large);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__logo {
  display: flex;
}

.nav__logo a {
  color: var(--color-dark);
  width: var(--nav-logo-width);
}

.nav__logo svg {
  height: auto;
  max-width: 100%;
  overflow: visible;
  width: 100%;
}

.nav__details {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.nav__details p {
  display: none;
}

.nav__details .button {
  margin-left: auto;
}



@media(min-width: 48em) {

  .nav__logo {
    filter: blur(0.2em);
    left: var(--space-large);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: scale(0.7);
    transition:
      filter var(--transition),
      opacity var(--transition),
      transform var(--transition)
    ;
    will-change: transform;
  }

  .nav__details {
    transition: margin var(--transition);
  }

  .nav__details p {
    display: inline-flex;
  }

  .nav__details .button {
    margin-left: 0;
  }

  .nav--sticky .nav__logo {
    filter: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav--sticky .nav__details {
    margin-left: var(--nav-logo-width);
  }

  .nav--sticky .nav__details:before {
    content: '';
    display: inline-flex;
  }

}



@media(min-width: 64em) {

  .nav {
    padding-inline: var(--space-xxx-large);
  }

  .nav__logo {
    left: var(--space-xxx-large);
  }

}