.sx[data-sx] .night{background:var(--black);padding-block:var(--section)}
.sx[data-sx] .night__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(calc(1*var(--u)),2vw,calc(2*var(--u)));row-gap:calc(1.5*var(--u));align-items:end}
.sx[data-sx] .night__head .h2{grid-column:1 / span 8}
.sx[data-sx] .night__head .lede{grid-column:9 / -1;color:var(--muted-night)}
.sx[data-sx] .shot{--x:50%;position:relative;margin-top:clamp(calc(2.5*var(--u)),5vw,calc(4*var(--u)));overflow:hidden;border-radius:calc(1.25*var(--u));background:#000;user-select:none;touch-action:pan-y}
.sx[data-sx] .shot img{width:100%;aspect-ratio:1264 / 848;object-fit:cover}
.sx[data-sx] .shot__night{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.sx[data-sx] .shot__night img{height:100%}
.sx[data-sx] .shot__tag{position:absolute;top:calc(1.1*var(--u));display:inline-flex;align-items:center;gap:calc(.5*var(--u));padding:calc(.5*var(--u)) calc(.75*var(--u));border-radius:calc(.4*var(--u));background:rgba(5,7,11,.72);color:#fff}
.sx[data-sx] .shot__tag--day{left:calc(1.1*var(--u))}
.sx[data-sx] .shot__tag--night{right:calc(1.1*var(--u))}
.sx[data-sx] .shot__tag .ico{width:calc(1.05*var(--u));height:calc(1.05*var(--u))}
.sx[data-sx] .shot__handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.sx[data-sx] .shot__handle span{position:absolute;top:50%;left:50%;width:calc(3.5*var(--u));height:calc(3.5*var(--u));margin:calc(-1.75*var(--u)) 0 0 calc(-1.75*var(--u));border-radius:50%;background:#fff;color:var(--black);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.7);transition:transform .3s var(--ease)}
.sx[data-sx] .shot:hover .shot__handle span{transform:scale(1.07)}
.sx[data-sx] .shot input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.sx[data-sx] .shot input:focus-visible ~ .shot__handle span{outline:2px solid var(--cyan);outline-offset:3px}
.sx[data-sx] .night__note{margin-top:calc(1*var(--u));color:var(--muted-night);font-size:calc(.8125*var(--u))}
@media (max-width:900px){
  .sx[data-sx] .night__head .h2,.sx[data-sx] .night__head .lede{grid-column:1 / -1}
}