/**
 * Load before vendor CSS — prevents header/preloader logo flash at full image size.
 */
.header .logo {
  display: block;
  flex-shrink: 0;
  max-width: min(260px, calc(100vw - 64px));
  line-height: 0;
}

.header .logo img {
  --logo-ratio: 970 / 390;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  aspect-ratio: var(--logo-ratio);
  object-fit: contain;
}

#preloader .preloader__logo {
  --logo-ratio: 970 / 390;
  width: auto;
  max-width: min(280px, 78vw);
  max-height: 52px;
  height: auto;
  aspect-ratio: var(--logo-ratio);
  object-fit: contain;
}

@media (max-width: 1279px) {
  .header .logo {
    max-width: min(200px, calc(100vw - 56px));
  }

  .header .logo img {
    max-height: 42px;
  }
}

@media (max-width: 575px) {
  .mobile-nav-active .header .logo {
    max-width: min(180px, calc(100vw - 56px));
  }

  .mobile-nav-active .header .logo img {
    max-height: 34px;
  }
}