/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   The hero is 46.088 times its body size in height, measured on the
   reproduction as on the original. In a 16:9 frame the height is 9/16 of the
   width: the body size that fills the frame exactly is therefore
   0.5625 W / 46.088 = W / 81.934. The divisor is rounded up — 82 — so that a
   hair of empty space is left rather than a pixel of overflow.

   Four things to watch, all of them verified:

   1. box-sizing on html and body, otherwise the padding would add to the 100%
      height and the component would drift downwards.
   2. The review card is absolutely positioned and therefore weighs nothing in
      the height calculation: it is the photograph, in flow, that carries it.
      Nothing to make up for here, but it is what has to be checked before
      framing.
   3. The scale follows the width, with no cap: at a frame of 1440 px we land on
      a body size of 17.6 px, i.e. the original's layout enlarged by 10%. With no
      cap it is the same at every size, so a single constant is enough and the
      framing no longer moves.
   4. The component's narrow breakpoints are written with @container: neutralising
      them takes one declaration, container-type: normal. Without that, a 900 px
      frame would fold the hero into a single column when the scale has already
      brought everything to the right size.
   ========================================================================== */

html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f8f7f7;
}

body {
  display: grid;
  align-content: center;
}

.testimonial-hero {
  /* 1440 / 82 = 17.56 px. */
  --prh-font-size: calc(100vw / 82);

  /* The component is no longer a query container: its narrow breakpoints can no
     longer fire, and the layout stays the wide one whatever the size of the
     frame. */
  container-type: normal;
}