/* Homepage hero treatment for the supplied battlefield scene. */
.hero-backdrop::after {
  background:
    linear-gradient(90deg, rgba(6, 12, 18, 0.22), rgba(6, 12, 18, 0.14) 30%, rgba(6, 12, 18, 0.04) 58%, transparent 80%),
    linear-gradient(180deg, rgba(6, 12, 18, 0.03), transparent 50%, rgba(6, 12, 18, 0.12));
}

.hero-backdrop img {
  object-position: 50% 50%;
  filter: none;
}

/* Keep the desktop hero copy on the same content grid as the section below. */
@media (min-width: 721px) {
  html body .hero-layout,
  html body .hero-scroll-inner {
    width: min(calc(100% - 64px), 1320px);
  }
}

@media (min-width: 1051px) and (min-height: 960px) {
  html body .hero-layout,
  html body .hero-scroll-inner {
    width: min(calc(100% - 72px), 1400px);
  }
}

@media (min-width: 721px) and (max-height: 820px) {
  html body .hero-layout,
  html body .hero-scroll-inner {
    width: min(calc(100% - 48px), 1280px);
  }
}

@media (max-width: 720px) {
  html body .hero-backdrop::after {
    background:
      linear-gradient(90deg, rgba(6, 12, 18, 0.28), rgba(6, 12, 18, 0.17) 38%, rgba(6, 12, 18, 0.05) 72%, transparent),
      linear-gradient(180deg, rgba(6, 12, 18, 0.06), transparent 38%, rgba(6, 12, 18, 0.16));
  }

  html body .hero-backdrop img {
    object-position: 24% 50%;
  }
}