.vinyl-album{--va-size:300px;--va-vinyl-size:280px;--va-radius:3px;--va-cover-tx:-10px;--va-cover-rot:-2deg;--va-vinyl-tx:70%;--va-vinyl-rot:360deg;width:var(--va-size);height:var(--va-size);position:relative}.vinyl-album__cover{border-radius:var(--va-radius);z-index:2;width:100%;height:100%;transition:transform .5s ease-in-out;position:relative;overflow:hidden;box-shadow:0 8px 16px #0000004d}.vinyl-album__cover img{object-fit:cover;width:100%;height:100%}.vinyl-album__cover:before{content:"";pointer-events:none;z-index:3;background:linear-gradient(#fff6 1%,#0000 50%);width:100%;height:10%;position:absolute;top:0;left:0}.vinyl-album__cover:after{content:"";pointer-events:none;z-index:3;background:linear-gradient(#0000 96%,#00000080),linear-gradient(225deg,#a2a2a21a 0%,#a2a2a233 4%,#fff3 6%,#fff9 7%,#fff3 7%,#dadada0a 7%,#0000 6%),linear-gradient(45deg,#0e0e0eb3,#00000080 0%,#0003 4%,#0e0e0e33 6%,#ffffff4d 7%,#dadada66 7%,#0000 8%);width:100%;height:100%;position:absolute;top:0;left:0}.vinyl-album__vinyl{margin-top:calc(var(--va-vinyl-size)/-2);margin-left:calc(var(--va-vinyl-size)/-2);width:var(--va-vinyl-size);height:var(--va-vinyl-size);z-index:1;background:conic-gradient(from 50deg,#0000 46%,#ffffff1a 48%,#ffffff26 51%,#0000 56%),conic-gradient(from 225deg,#0000 46%,#ffffff1a 48%,#ffffff26 51%,#0000 56%),repeating-radial-gradient(circle,#7878781a 0%,#c0c0c003 1px,#0000 1px 4px),#000;border-radius:50%;justify-content:center;align-items:center;transition:transform .5s ease-in-out;display:flex;position:absolute;top:50%;left:50%;transform:translate(0)rotate(270deg);box-shadow:0 0 15px #00000080}.vinyl-album__vinyl-label{width:calc(var(--va-vinyl-size)/2.8);height:calc(var(--va-vinyl-size)/2.8);background-position:50%;background-size:cover;border-radius:50%;box-shadow:0 0 0 5px #000}.vinyl-album:hover .vinyl-album__cover{transform:translateX(var(--va-cover-tx))rotate(var(--va-cover-rot))}.vinyl-album:hover .vinyl-album__vinyl{transform:translateX(var(--va-vinyl-tx))rotate(var(--va-vinyl-rot))}.vinyl-album--open .vinyl-album__cover{transform:translateX(var(--va-cover-tx))rotate(var(--va-cover-rot))}.vinyl-album--open .vinyl-album__vinyl{transform:translateX(var(--va-vinyl-tx))rotate(var(--va-vinyl-rot))}.vinyl-album--small{--va-size:150px;--va-vinyl-size:130px;--va-radius:2px;--va-cover-tx:-5px;--va-cover-rot:-1deg;--va-vinyl-tx:70%;--va-vinyl-rot:360deg}@media (max-width:768px){.vinyl-album{--va-size:220px;--va-vinyl-size:200px}}
@keyframes cd-rotate{to{transform:rotate(360deg)}}.cd-box{--cd-size:22em;--cd-height:20em;width:var(--cd-size);height:var(--cd-height);transform-style:preserve-3d;perspective:600px;font-size:10px;transition:all .3s;position:relative}.cd-box:hover{transform:rotateX(55deg)}.cd-box:hover .cd-side{color:#3d333d}.cd-box:hover .cd-disk-wrapper{box-shadow:0 0 5em #16b1f9,inset 0 0 5em -2em #00000080}.cd-box:hover .cd-cover{transform:rotateY(-40deg)}.cd-box:hover .cd-image:after{transform:skew(-10deg)translate(40em)}.cd-box--open{transform:rotateX(55deg)}.cd-box--open .cd-side{color:#3d333d}.cd-box--open .cd-disk-wrapper{box-shadow:0 0 5em #16b1f9,inset 0 0 5em -2em #00000080}.cd-box--open .cd-cover{transform:rotateY(-40deg)}.cd-box--open .cd-image:after{transform:skew(-10deg)translate(40em)}.cd-disk-wrapper{transform-style:preserve-3d;background:#291f33;transition:box-shadow .3s;position:absolute;inset:0;transform:translateZ(-1em)}.cd-disk-wrapper:after{content:"";box-sizing:border-box;transform-origin:0;background:#3d3347;border-bottom:.1em solid;width:1em;position:absolute;top:0;bottom:0;left:100%;transform:rotateY(-90deg);box-shadow:inset 0 2em 2em -2em}.cd-disk{border-radius:100%;position:absolute;inset:.3em .3em .3em 2.3em;overflow:hidden}.cd-disc{filter:blur(4px);background-position:50%;background-size:cover;width:100%;height:100%;animation:.3s linear infinite cd-rotate}.cd-center{background:#3d3347;border-radius:100%;width:3em;height:3em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5em #ffffff4d}.cd-side{color:#1f151f;background:currentColor;border:.2em solid #ffffff4d;border-left:none;border-right:none;width:2em;transition:color .3s;position:absolute;top:0;bottom:0;left:0}.cd-side:before{content:"";color:#0f0f0f;background:currentColor;width:.2em;position:absolute;top:0;bottom:0;left:.1em;box-shadow:.3em 0,.6em 0,.9em 0,1.2em 0,1.5em 0}.cd-cover{transform-origin:0;transform-style:preserve-3d;transition:transform .3s .1s;position:absolute;inset:0}.cd-cover:after{content:"";box-sizing:border-box;transform-origin:0;background:#fff9;border-bottom:.1em solid;width:1em;position:absolute;top:0;bottom:0;left:100%;transform:rotateY(90deg)}.cd-border{transform-origin:top;background:#ffffff4d;width:100%;height:1em;position:absolute;transform:rotateX(-90deg)}.cd-bottom{top:100%}.cd-dark{background:#3d3347;box-shadow:inset 0 .1em #0006}.cd-image{box-sizing:border-box;background-position:50%;background-size:cover;border:.2em solid #ffffff4d;position:absolute;inset:0 0 0 2em;overflow:hidden}.cd-image:after{content:"";background:#fff;width:2em;transition:transform .3s;position:absolute;top:0;bottom:0;left:-10em;transform:skew(-10deg);box-shadow:0 0 1em #fff}.cd-box--small{--cd-size:15em;--cd-height:14em;font-size:7px}@media (max-width:768px){.cd-box{--cd-size:18em;--cd-height:16em;font-size:8px}}