/* --------------------------------------------------------------------------
   Section media — a video or a slideshow chosen in the CMS for a section the
   site drew with one picture.

   Loaded only by a page that has one, the way hero-media.css is: a page whose
   sections are unchanged never loads it, and site.css stays byte for byte what
   it was. The slideshow itself is the hero slideshow (hero-media.css); this
   only lets a section's own frame hold it, and a video, at the frame's size —
   so a 4:3 picture becomes a 4:3 video or slideshow, a 340px-high frame stays
   340px high, and the layout never moves when the media type changes.

   The video is the heroes' and the Ranking band's treatment: muted, looping,
   fetched lazily by site.js, and never fetched at all when motion is turned
   off — the still stands in.
   -------------------------------------------------------------------------- */

.sectionmedia { position: relative; }

.sectionmedia > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}