/* SPARRC overrides, loaded after the theme.
   Small and defensive on purpose: the airtime theme already centres the phone
   and carries 39 media queries, so this only guards the things that break when
   a rotated element meets a narrow screen. */

/* The phone is rotated 8deg; on a narrow screen its corners can push past the
   viewport and give the whole page a horizontal scrollbar. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Belt and braces on centring, in case a parent is left-aligned. */
.ldmdtW { margin-left: auto !important; margin-right: auto !important; }

@media (max-width: 640px) {
  /* Straighten the phone on small screens: the tilt costs width it cannot
     afford, and the video reads better upright on a handset. */
  .pTgKf { transform: none !important; -webkit-transform: none !important; }
  /* Keep it inside the screen whatever the theme asks for. */
  .pTgKf { max-width: min(70vw, 230px); height: auto; aspect-ratio: 200 / 410; }
  .cYFHW { height: 100%; }
}

/* The video should fill the frame rather than letterbox inside it. */
.cYFHW video { width: 100%; height: 100%; object-fit: cover; display: block; }
