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

   A photo, a centred component, nothing else: this framing is what serves as
   the poster of the component.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  padding: 6vmin;
  background: #0a1210 url("demo-fond.webp") center / cover no-repeat;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The component keeps the scale of its original drawing and takes a little
   more than half the frame, as on the reference poster. */
.glass-select {
  width: min(34rem, 100%);
  /* Lifted by a little less than half the height of the open menu: open or
     closed, the whole thing stays centred in the frame. */
  transform: translateY(-3rem);
}

/* Below ~640 px wide, the frame of the reference page becomes narrow: the
   scale is reduced rather than letting the component overflow. */
@media (max-width: 40rem) {
  .glass-select {
    --gs-font-size: 1.5rem;
    transform: translateY(-2rem);
  }
}