/* How it plays: section-level hooks on top of the ported design CSS.

   misfit/css/landing.css draws .plays and the whole .how-layout column pair
   exactly as the approved design does, and already reads the section surface
   through var(--mm-surface-plays, <design value>), which the section root sets
   inline from its colour setting.

   The one thing that cannot stay baked is the desktop shape. The design locks
   the section to aspect-ratio 1900/760 so the video and the three steps land on
   the band the artwork was composed for; a merchant who swaps the video for a
   taller one, or adds a fourth step, needs to move that ratio with it. */

@media (min-width: 901px) {
  .plays {
    aspect-ratio: var(--mm-plays-ratio, 1900/760);
  }
}

/* The platform's video component brings its own aspect-ratio box; the design's
   frame already sets one, so let the component fill it instead of stacking a
   second ratio inside. */
.how-video theme-video-media,
.how-video .theme-video-media {
  width: 100%;
  height: 100%;
}