/* A fixed source rectangle removes the reference mockups' baked-in controls.
   Cover sizing happens AFTER that crop, so wide screens cannot reveal them. */
.scene {
  container-type: size;
  background-size: 0 0 !important;
}
.scene::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, calc(100cqh * var(--art-ratio)));
  height: max(100cqh, calc(100cqw / var(--art-ratio)));
  transform: translate(-50%, -50%);
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: var(--art-size);
  background-position: var(--art-position);
  pointer-events: none;
}
.scene-crown {
  /* Original 1672 × 941; approved artwork rectangle x90,y155,w1490,h475. */
  --art-ratio: 3.136842;
  --art-size: 112.214765% 198.105263%;
  --art-position: 49.450549% 33.261803%;
}
.scene-panorama {
  /* Stop above the mockup's painted play button. */
  --art-ratio: 4.584615;
  --art-size: 112.214765% 289.538462%;
  --art-position: 49.450549% 25.162338%;
}
.scene-royal {
  /* Exclude side arrows and the painted play button in the lower left. */
  --art-ratio: 4.0625;
  --art-size: 128.615385% 294.0625%;
  --art-position: 76.612903% 24.959742%;
}
.hero > .scene-prev,
.hero > .scene-next {
  position: absolute;
  top: 42%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 64px;
  padding: 0;
  border: 1px solid #ceb58e60;
  border-radius: 4px;
  background: #080809a6;
  color: #f1dfc5;
  transition: background .2s, border-color .2s;
}
.hero > .scene-prev { left: 12px; }
.hero > .scene-next { right: 12px; }
.hero > .scene-prev:hover,
.hero > .scene-next:hover { background: #080809e6; border-color: var(--metal); }
.hero > .scene-prev svg,
.hero > .scene-next svg { width: 28px; height: 28px; }
@media(max-width:640px) {
  .hero > .scene-prev,.hero > .scene-next { top: 160px; width: 44px; height: 56px; }
  .hero > .scene-prev { left: 8px; }
  .hero > .scene-next { right: 8px; }
}