*,:after,:before{box-sizing:border-box;position:relative}body,html{height:100%;width:100%;margin:0;padding:0;font-size:3vmin}html{background:#151515;color:#fff;overflow:hidden}body{display:flex;justify-content:center;align-items:center}.slides{display:grid;>.slide{grid-area:1/-1}>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#fff;position:absolute;font-size:5rem;width:5rem;height:5rem;top:30%;transition:opacity .3s;opacity:.7;z-index:5;&:hover{opacity:1}&:focus{outline:none}&:first-child{left:-50%}&:last-child{right:-50%}}}.slideContent{width:30vw;height:40vw;background-size:cover;background-position:50%;background-repeat:no-repeat;transition:transform .5s ease-in-out;opacity:.7;display:grid;align-content:center;transform-style:preserve-3d;transform:perspective(1000px) translateX(calc(100% * var(--offset))) rotateY(calc(-45deg * var(--dir)))}.slideContentInner{transform-style:preserve-3d;transform:translateZ(2rem);transition:opacity .3s linear;text-shadow:0 .1rem 1rem #000;opacity:0;.slideSubtitle,.slideTitle{font-size:2rem;font-weight:400;letter-spacing:.2ch;text-transform:uppercase;margin:0}.slideSubtitle:before{content:"— "}.slideDescription{margin:0;font-size:.8rem;letter-spacing:.2ch}}.slideBackground{position:fixed;top:0;left:-10%;right:-10%;bottom:0;background-size:cover;background-position:50%;z-index:-1;opacity:0;transition:opacity .3s linear,transform .3s ease-in-out;pointer-events:none;transform:translateX(calc(10% * var(--dir)))}.slide[data-active]{z-index:2;pointer-events:auto;.slideBackground{opacity:.2;transform:none}.slideContentInner{opacity:1}.slideContent{--x:calc(var(--px) - 0.5);--y:calc(var(--py) - 0.5);opacity:1;transform:perspective(1000px);&:hover{transition:none;transform:perspective(1000px) rotateY(calc(var(--x) * 45deg)) rotateX(calc(var(--y) * -45deg))}}}