/* /photo-video: photos by subject, a drag slider, then the videos. Same grammar as Work (.wk sections, .photos grid, the
   photo viewer). The slider's two photos line up, so only the light changes under the divider. Square corners, one ink. */
.page-photo-video .photos__open { cursor: zoom-in; }
.page-photo-video .wk-index { row-gap: 0; }

.cmp { margin: 2rem calc(-1 * var(--pad)) 0; }
.cmp__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #111; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; --cmp: 50%; }
.cmp__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cmp__top { clip-path: inset(0 calc(100% - var(--cmp)) 0 0); }
.cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--cmp); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.cmp__grip { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; background: #fff; color: #0a0a0a; }
.cmp__grip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.cmp__tag { position: absolute; top: .75rem; padding: .25rem .5rem; background: rgba(10, 10, 10, .62); color: #fff; font-size: .8125rem; line-height: 1.2; font-weight: 600; pointer-events: none; }
.cmp__tag--left { left: .75rem; }
.cmp__tag--right { right: .75rem; }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.cmp__range:focus-visible ~ .cmp__bar .cmp__grip { outline: 2px solid #fff; outline-offset: 3px; }
.cmp figcaption { padding: .5rem var(--pad) 0; font-size: .875rem; line-height: 1.35; color: var(--ink); }
.cmp + .photos { margin-top: 2.5rem; }

@media (min-width: 1024px) {
  .page-photo-video .photos > li:first-child { grid-column: 1 / -1; }
  .page-photo-video .photos--two { grid-template-columns: repeat(2, 1fr); }
  .page-photo-video .photos--two > li:first-child { grid-column: auto; }
  .cmp { margin-inline: 0; margin-top: 3rem; }
  .cmp figcaption { padding-inline: 0; font-size: .9375rem; }
  .cmp + .photos { margin-top: 2.5rem; }
  .cmp__tag { top: 1rem; font-size: .9375rem; }
  .cmp__tag--left { left: 1rem; }
  .cmp__tag--right { right: 1rem; }
}