/* Case study - tall screenshot peek (16:9 viewport, hover scrub, no scrollbar) */

.case-media-image.case-media-scroll-peek {
  position: relative;
  aspect-ratio: 16 / 9;
}

.case-media-image.case-media-scroll-peek .case-media-scroll-peek__viewport {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.case-media-image.case-media-scroll-peek .case-media-scroll-peek__viewport::-webkit-scrollbar {
  display: none;
}

.case-media-image.case-media-scroll-peek .case-media-scroll-peek__viewport img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: unset !important;
  object-position: top center;
}

@media (pointer: fine) {
  .case-media-image.case-media-scroll-peek .case-media-scroll-peek__viewport[data-scroll-peek-cursor="up"] {
    cursor: url("/website/components/case-study/cursors/scroll-peek-up.svg") 20 20, n-resize;
  }

  .case-media-image.case-media-scroll-peek .case-media-scroll-peek__viewport[data-scroll-peek-cursor="down"] {
    cursor: url("/website/components/case-study/cursors/scroll-peek-down.svg") 20 20, s-resize;
  }

  .case-media-image.case-media-scroll-peek .case-media-scroll-peek__viewport[data-scroll-peek-cursor="idle"] {
    cursor: default;
  }
}