.m-header-nav .m-header-nav__logo .logo-hopscotch {
  display: block;
  width: 267px;
  max-width: 36vw;
  height: auto;
}

.m-header-nav .logo-hopscotch img {
  display: block;
  width: 100%;
  height: auto;
}

.m-header-nav .logo-hopscotch .nav-logo--on-light {
  display: none;
}

.m-header-nav.black .logo-hopscotch .nav-logo--on-dark {
  display: none;
}

.m-header-nav.black .logo-hopscotch .nav-logo--on-light {
  display: block;
}

.m-header-nav.on-scroll .logo-hopscotch,
.m-header-nav.on-scroll .m-header-nav__menu {
  opacity: 1;
  pointer-events: auto;
}

.m-header-nav.on-scroll {
  pointer-events: auto;
}

.m-header-nav__mobile-overlay .logo-hopscotch {
  display: block;
  width: min(267px, 80vw);
}

@media (max-width: 623px) {
  .m-header-nav .m-header-nav__logo .logo-hopscotch {
    width: 190px;
    max-width: 60vw;
  }
}