/* Responsive hero illustrations. Kept separate from the versioned shared/theme layers. */

.hero--media {
  overflow: hidden;
}

.hero--media .hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero--media .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero--media::before {
  background:
    linear-gradient(90deg, rgb(5 9 14 / 0.76), rgb(5 9 14 / 0.24) 58%, rgb(5 9 14 / 0.12)),
    linear-gradient(to bottom, rgb(5 9 14 / 0.08), rgb(5 9 14 / 0.34));
}

.hero--media::after {
  background:
    linear-gradient(110deg, rgb(5 9 14 / 0.16), transparent 54%),
    linear-gradient(to top, rgb(5 9 14 / 0.92), rgb(5 9 14 / 0.08) 72%);
}

body[data-theme='prequel'] .hero--media::before {
  background:
    linear-gradient(90deg, rgb(7 16 24 / 0.78), rgb(7 16 24 / 0.2) 58%, rgb(7 16 24 / 0.08)),
    linear-gradient(to bottom, rgb(7 16 24 / 0.04), rgb(7 16 24 / 0.2));
}

body[data-theme='prequel'] .hero--media::after {
  background: linear-gradient(to top, rgb(7 16 24 / 0.94), rgb(7 16 24 / 0.04) 72%);
}

body[data-theme='original'] .hero--media::before {
  background:
    linear-gradient(90deg, rgb(9 13 18 / 0.8), rgb(9 13 18 / 0.22) 58%, rgb(9 13 18 / 0.08)),
    linear-gradient(to bottom, rgb(9 13 18 / 0.04), rgb(9 13 18 / 0.22));
}

body[data-theme='original'] .hero--media::after {
  background: linear-gradient(to top, rgb(9 13 18 / 0.94), rgb(9 13 18 / 0.06) 72%);
}

body[data-theme='sequel'] .hero--media::before {
  background:
    linear-gradient(90deg, rgb(5 9 19 / 0.78), rgb(5 9 19 / 0.2) 58%, rgb(5 9 19 / 0.06)),
    linear-gradient(to bottom, rgb(5 9 19 / 0.04), rgb(5 9 19 / 0.2));
}

body[data-theme='sequel'] .hero--media::after {
  background: linear-gradient(to top, rgb(5 9 19 / 0.94), rgb(5 9 19 / 0.04) 72%);
}

@media (max-width: 48rem) {
  body[data-theme='prequel'] .hero--media .hero__media img {
    object-position: 40% center;
  }

  body[data-theme='original'] .hero--media .hero__media img {
    object-position: 20% center;
  }

  body[data-theme='sequel'] .hero--media .hero__media img {
    object-position: 58% center;
  }

  .hero--trilogy.hero--media .hero__media img {
    object-position: 52% center;
  }
}

@media (forced-colors: active) {
  .hero--media .hero__media {
    display: none;
  }
}

@media print {
  .hero--media .hero__media {
    display: none;
  }
}