body {
  background-color: #02142d;
  background-image:
    linear-gradient(135deg, rgba(6, 20, 25, 0.5) 0%, rgba(6, 20, 25, 0.3) 60%, rgba(6, 20, 25, 0.55) 100%),
    url('/static/images/hero-sports-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* The full artwork is a wide 1364x768 scene with empty space in the middle,
   so "cover" on a narrow portrait screen zooms into that gap. Swap in a
   portrait crop of just the left character cluster instead. */
@media (max-width: 640px) {
  body {
    background-image:
      linear-gradient(135deg, rgba(6, 20, 25, 0.5) 0%, rgba(6, 20, 25, 0.3) 60%, rgba(6, 20, 25, 0.55) 100%),
      url('/static/images/hero-sports-bg-mobile.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
  }
}