/* The supplied Onyx artwork is 3:2. Keep the complete image in every placement. */
.site-brand-logo {
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  flex-shrink: 0;
}
.mp-brand > .site-brand-logo,
.tg-brand > .site-brand-logo {
  width: 114px;
  height: 76px;
}
body .logo.site-brand-mark {
  width: 96px;
  height: 64px;
  border-radius: 0;
}
body .logo.site-brand-mark > .site-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body .auth-logo,
body .logo.site-brand-auth {
  width: 228px;
  height: 152px;
  border-radius: 0;
}
body .auth-logo > .site-brand-logo {
  width: 100%;
  height: 100%;
}
#view-about .about-hero .about-hero-logo {
  width: 180px;
  height: 120px;
  border-radius: 0;
}
#view-about .about-hero-logo > .site-brand-logo {
  width: 100%;
  height: 100%;
}
.aurora-footer .site-brand-logo {
  width: 100%;
  max-width: 228px;
  height: auto;
  aspect-ratio: 3 / 2;
}
main > .site-brand-logo {
  width: 180px;
  height: 120px;
}
/* Remove the old square badge in every theme, including its legacy !important rules. */
body .logo.site-brand-mark,
body .auth-logo,
#view-about .about-hero .about-hero-logo {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.mp-brand > .site-brand-logo,
.tg-brand > .site-brand-logo,
.logo.site-brand-mark .site-brand-logo,
.auth-logo .site-brand-logo {
  filter: drop-shadow(0 4px 10px rgba(0, 185, 185, .1));
}
@media (max-width: 650px) {
  .mp-brand > .site-brand-logo,
  .tg-brand > .site-brand-logo {
    width: 90px;
    height: 60px;
  }
  body .brand .logo.site-brand-mark {
    width: 81px;
    height: 54px;
  }
  body .auth-logo, body .logo.site-brand-auth { width: 198px; height: 132px; }
  .tg-management .tg-top { flex-wrap: wrap; }
  #view-about .about-hero .about-hero-logo {
    width: 120px;
    height: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #auroraPageLoading .site-brand-logo,
  #auroraPageLoading .aurora-loading-mark::before,
  #auroraPageLoading .aurora-loading-mark::after,
  #auroraPageLoading .aurora-loading-bar::after { animation: none; }
}

/* Compact brand on authentication forms, at every breakpoint. */
body .auth-logo { width:144px; height:96px; margin:0 auto 12px; }
body .auth-logo > .site-brand-logo { width:100%; height:100%; }