/* ==========================================================================
   Preview — the page embedded in the frame of the component's reference page.

   The carousel, a background, nothing else: this framing is what serves as the
   poster of the component. Four things to hold to, and they are all here:

   1. box-sizing on html and body, otherwise the inner padding adds to the
      100 % height and the bottom of the image goes below the frame.
   2. the carousel takes the whole box rather than imposing its own format: the
      frame of the reference page is 16/9, the thumbnail is 2/1, and the same
      file has to fit in both.
   3. the scale follows the width, with no ceiling — calc(100vw / 80), and
      nothing else. The layout is therefore identical at every size, which
      means that one single constant is enough to frame it, and that a capture
      taken at double size and then reduced gives exactly the same image. A
      min() here would break that property.
   4. the component has no responsive breakpoint to neutralise: neither its
      stylesheet nor its script reads a width threshold.
   ========================================================================== */

html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background: #000;
}

.hotspot-carousel {
  /* 80: the number of times the body copy fits across the width of the
     frame. Measured on the original, which sets 16 px within 1532 px of
     width, save that the frame of the reference page is taller than its own —
     the carousel breathes a little more in it. */
  --hsc-font-size: calc(100vw / 80);
  /* The format comes from the frame, not from the component. */
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}