@media (max-width: 1024px) {
  header.on-front .logo {
    display: block;
    left: 20px;
    right: auto;
    height: 38px;
    width: auto;
    max-width: calc(100% - 140px);
    margin-top: -19px;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
  }

  header.on-front.is-mobile-scrolled .logo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  header.on-front.is-mobile-scrolled {
    background: #fff;
    box-shadow: 0 2px 10px rgba(31, 81, 104, 0.12);
  }

  header.on-front.is-mobile-scrolled .open-search {
    color: #1f5168;
  }

  .menu-button-wrapper.is-mobile-scrolled .menu-button .line {
    background: #1f5168;
  }
}