/* The trailer's page (pages/trailer.ts): the video as large as the screen allows. */
.theater {
  display: grid;
  justify-items: center;
  gap: 28px;
  padding-block: 4px 48px;
}
.theater video {
  display: block;
  width: min(100%, max(440px, calc((100svh - 250px) * 16 / 9)));
  max-width: var(--measure);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #0e1726 url('/img/trailer-wide.jpg') center / cover no-repeat;
  box-shadow: 7px 8px 0 var(--shade);
}
@media (orientation: portrait) {
  .theater video {
    width: min(100%, max(240px, calc((100svh - 190px) * 9 / 16)));
    aspect-ratio: 9 / 16;
    background-image: url('/img/trailer-upright.jpg');
  }
}
.theater .actions {
  justify-content: center;
}