/* Mobile composition contracts for HERO assets designed around desktop text-safe space. */
@media (max-width: 720px) {
  .hero.compact-hero[data-hero-media="right-subject-wide"]::before {
    background-image:
      linear-gradient(90deg, rgba(0, 18, 48, .97), rgba(0, 23, 60, .86) 65%, rgba(0, 23, 60, .55)),
      var(--hero-image) !important;
    background-position: center, right bottom !important;
    background-size: cover, auto 88% !important;
    background-repeat: no-repeat !important;
  }

  .page-hero[data-hero-media="right-subject-wide"] {
    background-position: center, right top, center !important;
    background-size: cover, auto 70%, cover !important;
    background-repeat: no-repeat !important;
  }
}