/* History: a row of phone screens, each with a label (a date) under it, used in the case study header to show how the product has changed. Each screen is a still
   picture (378 x 818, 1.5 x the 251 x 545 box, so it stays sharp) in a rounded box (23px corners). The row is 1053px wide and is meant to run off the right edge
   of the screen (the header's picture half clips it), so keep it inside a box that has overflow: hidden.
   Narrow screens (900px and under): the row becomes a sideways-scrolling row of its own, full screen width, with 30px of room above and below. Swipe or trackpad scroll, or drag it
   with the mouse (js/drag-scroll.js: DragScroll.enable(historyElement)); it carries on with momentum and settles with a screen on the container's left edge. No scrollbar.
   <div class="history" role="img" aria-label="…">
     <figure class="history__item">
       <div class="history__screen"><img src="assets/images/luno/header/home-today.png" alt="" width="378" height="818"></div>
       <figcaption class="history__label">Today</figcaption>             (Subtitle style, built in)
     </figure> … </div> */
.history { display: flex; gap: 16px; align-items: flex-start; width: 1053px; padding-left: 11px; flex: none; }
.history__item { margin: 0; flex: none; width: 251px; padding-top: 5px; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.history__screen { position: relative; flex: none; width: 251.35px; height: 544.91px; border-radius: 23px; overflow: hidden; }
.history__screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history__label {   /* the Subtitle type style, built in */
  color: var(--color-case-dark); text-box: trim-both cap alphabetic; white-space: nowrap;
  font: var(--weight-medium) var(--fs-subtitle)/var(--lh-subtitle) var(--font-text);
}

@media (max-width: 900px) {
  .history {
    width: 100%; padding: 30px var(--bleed-edge); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity; scroll-padding-inline-start: var(--bleed-edge); cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y;
  }
  .history::-webkit-scrollbar { display: none; }
  .history__item { scroll-snap-align: start; -webkit-user-drag: none; }
  .history.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .history.is-dragging, .history.is-moving { scroll-snap-type: none; }   /* while the script carries the row, the browser's own snapping stays out of the way */
}