/*
ISAICHILLOUT — Mobile Hero Focus v6.3
Only adjusts the horizontal crop/focus of hero background images on mobile.
No layout, typography, navigation, cards, audio players, or desktop styles are changed.
*/

@media (max-width: 760px) {
  :root {
    --ich-mobile-hero-focus-x: 72%;
  }

  /* Backgrounds applied directly to the hero or to its decorative layers. */
  .home-hero,
  .home-hero::before,
  .home-hero::after,
  .home-hero .hero-backdrop,
  .home-hero .hero-backdrop::before,
  .home-hero .hero-backdrop::after,
  .deep-hero,
  .deep-hero::before,
  .deep-hero::after,
  header[class*="-hero"],
  header[class*="-hero"]::before,
  header[class*="-hero"]::after,
  [class*="-hero"] .hero-backdrop,
  [class*="-hero"] .hero-background,
  [class*="-hero"] .hero-bg {
    background-position-x: var(--ich-mobile-hero-focus-x) !important;
  }

  /* Covers heroes that use an actual image element instead of CSS background-image. */
  .home-hero .hero-backdrop img,
  .deep-hero > picture img,
  [class*="-hero"] .hero-background img,
  [class*="-hero"] .hero-bg img {
    object-position: var(--ich-mobile-hero-focus-x) center !important;
  }
}