/* RUTL 200 and AION 2 release countdown. */
.site-header .brand--aion-release {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

.site-header .brand--aion-release .brand-logo--rutl-200 {
  height: auto !important;
  aspect-ratio: 6 / 1;
  object-fit: cover !important;
  object-position: center 46% !important;
}

.header-release {
  display: block;
  flex: 0 0 auto;
  min-width: 8rem;
  color: #eadba7;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.header-release-row {
  display: grid;
  gap: 0.1rem;
  white-space: nowrap;
}

.header-release-row strong {
  display: inline-block;
  min-width: 8rem;
  color: #ffe08a;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

html[data-rutl-theme="light"] .header-release,
html[data-rutl-theme="light"] .header-release-row strong {
  color: #654816;
}

@media (min-width: 1121px) {
  .site-header:has(.brand--aion-release) {
    grid-template-columns: minmax(22rem, 1fr) minmax(0, max-content) minmax(13rem, 1fr);
  }

  .site-header:has(.brand--aion-release) .tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    width: max-content;
    max-width: 100%;
    min-width: 0;
  }
}

@media (min-width: 1121px) and (max-width: 1600px) {
  .site-header:has(.brand--aion-release) {
    grid-template-columns: minmax(19rem, 1fr) minmax(0, max-content) minmax(13rem, 1fr);
  }

  .site-header .brand--aion-release .brand-logo--rutl-200 {
    width: 10rem;
  }
}

@media (max-width: 1120px) {
  .site-header .brand--aion-release {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.35rem !important;
  }
}

@media (max-width: 760px) {
  .site-header .brand--aion-release {
    flex-direction: row;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .site-header .brand--aion-release .brand-logo--rutl-200 {
    width: min(8rem, 30vw) !important;
  }

  .header-release {
    min-width: 0;
    font-size: 0.72rem;
  }
}