.menu.scene-bg {
  background-image: linear-gradient(90deg, rgba(24,32,57,.22), rgba(24,32,57,.02) 50%, rgba(24,32,57,.12)), url('../assets/final/backgrounds/main-menu-key.webp');
  background-size: cover;
  background-position: center;
}

/* Native redraws retain the desktop characters and art direction without
   shrinking or stretching the wide desktop canvas. */
@media (min-width: 721px) and (max-width: 1180px) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  .menu.scene-bg {
    background-image: linear-gradient(90deg, rgba(24,32,57,.12), rgba(24,32,57,0) 50%, rgba(24,32,57,.09)), url('../assets/final/backgrounds/main-menu-tablet-landscape.webp');
    background-size: 100% 100%, cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media (min-width: 721px) and (max-width: 1180px) and (orientation: portrait) {
  .menu.scene-bg {
    background-image: linear-gradient(0deg, rgba(20,28,57,.32), rgba(20,28,57,.01) 68%), url('../assets/final/backgrounds/main-menu-tablet-portrait.webp');
    background-size: 100% 100%, cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .menu.scene-bg {
    background-image: linear-gradient(0deg, rgba(20,28,57,.36), rgba(20,28,57,.01) 68%), url('../assets/final/backgrounds/main-menu-phone-portrait.webp');
    background-size: 100% 100%, cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}