/* A quiet, upright brand showcase. The logo is always fitted in full. */
.hero-composition.smite-composition {
  height: 480px;
  transform: none;
  background: radial-gradient(ellipse at 50% 35%, #511226 0%, #220a14 52%, #14080e 100%);
  border: 1px solid #743047;
  border-radius: 14px;
  box-shadow: 0 25px 70px #00000035;
}
.smite-composition .hero-grid,
.smite-composition .hero-orbit,
.smite-composition .hero-sticker,
.smite-composition .hero-swatch { display: none; }
.smite-composition .hero-art-window {
  inset: 58px 36px 62px;
  width: auto;
  height: auto;
  transform: none;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.smite-composition .hero-logo-wrap {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 24px;
  background: none;
}
.smite-composition .smite-art .hero-logo {
  width: auto;
  height: 100%;
  max-width: 60%;
  max-height: 255px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 20px #00000040);
}
.smite-composition .hero-brand-name {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.04em;
  text-align: center;
}
.smite-composition .hero-brand-name small {
  margin: 12px 0 0;
  font-size: 8px;
  letter-spacing: .3em;
}
.smite-composition .art-caption {
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #c58d9e;
}
.smite-composition .hero-art-label { color: #dba9b8; }
.smite-composition .composition-index { color: #b77c91; }
@media (max-width: 1100px) {
  .hero-composition.smite-composition { height: 420px; }
  .smite-composition .hero-art-window { inset: 55px 28px 58px; }
  .smite-composition .smite-art .hero-logo { max-height: 215px; }
  .smite-composition .hero-brand-name { font-size: 42px; }
  .smite-composition .hero-logo-wrap { gap: 20px; }
}
@media (max-width: 700px) {
  .hero-composition.smite-composition { height: 390px; width: 100%; }
  .smite-composition .hero-art-window { inset: 52px 25px 57px; }
  .smite-composition .smite-art .hero-logo { max-height: 205px; max-width: 58%; }
  .smite-composition .hero-brand-name { font-size: 38px; }
  .smite-composition .hero-brand-name small { font-size: 7px; margin-top: 10px; }
  .smite-composition .hero-logo-wrap { gap: 18px; }
  .smite-composition .composition-index { display: none; }
  .smite-composition .hero-art-label { top: 24px; left: 25px; font-size: 8px; }
  .smite-composition .art-caption { font-size: 6px; bottom: -34px; }
}