@media screen and (min-width: 701px) {
  .garment-header-inner {
    width: min(calc(100% - 64px), 1480px);
    min-height: 94px;
    grid-template-columns: 370px minmax(0, 1fr) auto;
    gap: 30px;
  }

  .garment-logo {
    width: 348px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
    overflow: visible;
  }

  .garment-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    transform: translateZ(0) scale(1.18);
    transform-origin: left center;
    transition: opacity 320ms ease;
    will-change: opacity;
  }

  .garment-logo .logo-light {
    content: url('../img/logo2.png?v=20260917a');
  }

  .garment-logo .logo-dark {
    content: url('../img/logo.png?v=20260917a');
  }

  .dibu {
    position: relative;
    background-image:
      linear-gradient(90deg, rgba(3, 12, 24, 0.76) 0%, rgba(3, 13, 27, 0.62) 48%, rgba(2, 12, 25, 0.38) 100%),
      url('./footer-datacenter.webp') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  .dibu .footer,
  .dibu .footer2 {
    position: relative;
    z-index: 1;
  }

  .dibu .footer-l .logo {
    width: 270px;
    height: 92px;
    display: flex;
    align-items: center;
  }

  .dibu .footer-l .logo img {
    object-fit: contain;
    object-position: left center;
  }
}

@media screen and (min-width: 701px) and (max-width: 1280px) {
  .garment-header-inner {
    grid-template-columns: 314px minmax(0, 1fr) auto;
    gap: 22px;
  }

  .garment-logo {
    width: 294px;
    height: 80px;
  }
}

@media screen and (min-width: 701px) and (max-width: 980px) {
  .garment-header-inner {
    grid-template-columns: 252px minmax(0, 1fr) auto;
  }

  .garment-logo {
    width: 240px;
    height: 68px;
  }
}