*{box-sizing:border-box;--duration: .5s}body{margin:0}#canvas{position:relative;overflow:hidden;width:100%;min-height:80vh;background-color:#eee;display:flex;flex-direction:column;justify-content:center;transition:background-color .2s}.viewers{display:flex}.viewer{_display:flex;align-items:center;transition:width var(--duration) ease}.viewer{position:relative}.wrapper{transition:all var(--duration) ease;position:absolute;rotate:var(--rotation)}.current .wrapper{left:50%;top:50%;transform:translate(-50%,-50%)}.prev .wrapper{left:100%;top:50%;transform:translate(-100%,-50%)}.next .wrapper{left:0;top:50%;transform:translateY(-50%)}.current{justify-content:center;width:100%}.prev,.next{width:5rem}.prev{--rotation: 3deg;--offcanvas: -1000px;justify-content:flex-end}.next{--rotation: -3deg;--offcanvas: 1000px;justify-content:flex-start}.next:has(a:hover),.prev:has(a:hover){--rotation: 0deg;width:15rem}.preview{height:600px;display:block;transition:height .2s}body:not(.no-js) .current .preview{cursor:zoom-in}.forwards .next,.backwards .prev{animation:offcanvas 1s backwards}.viewer-active .next,.viewer-active .prev{transition:transform .2s ease;transform:translate(var(--offcanvas))}@keyframes offcanvas{0%{transform:translate(var(--offcanvas))}to{transform:translate(0)}}#osd{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:2;display:none}@keyframes osd{0%{opacity:0}to{opacity:1}}#canvas.viewer-active{background-color:#000}.viewer-active #osd{display:block;animation:osd .25s .25s backwards}.viewer-active .current .preview{height:80vh}