*{box-sizing:border-box}body{align-items:center;background:linear-gradient(45deg,#db0a5b,#87d37c);display:flex;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;font-weight:300;justify-content:center;margin:0;min-height:100vh;overflow-x:hidden;padding:0;width:100vw}.card-track{height:300px;position:relative;width:200px}.card-container{border-radius:6px;height:100%;left:0;overflow:hidden;position:absolute;top:0;filter:grayscale(1) drop-shadow(0px 5px 10px rgba(0,0,0,.15));transform:scale(0) translate(0);transition:transform .5s,filter .5s,z-index .5s;width:100%;z-index:-1}.card-container[data-pos="0"]{filter:grayscale(0) drop-shadow(10px 10px 10px black);transform:scale(1) translate(0);z-index:4}.card-container[data-pos="1"],.card-container[data-pos="-1"]{z-index:3}.card-container[data-pos="1"]{transform:scale(.8) translate(75%)}.card-container[data-pos="-1"]{transform:scale(.8) translate(-75%)}.card-container[data-pos="2"],.card-container[data-pos="-2"]{z-index:2}.card-container[data-pos="2"]{transform:scale(.6) translate(175%)}.card-container[data-pos="-2"]{transform:scale(.6) translate(-175%)}.card-container[data-pos="3"],.card-container[data-pos="-3"]{z-index:1}.card-container[data-pos="3"]{transform:scale(.5) translate(275%)}.card-container[data-pos="-3"]{transform:scale(.5) translate(-275%)}.card-container[data-gone=true] .content-mark{clip-path:polygon(100% 70%,0% 30%,0% 100%,100% 100%)}.card-container[data-coming=true] .content-mark{clip-path:polygon(100% 30%,0% 70%,0% 100%,100% 100%)}.card-avatar{background:#87d37c;border-radius:100%;height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.card-hero{background:#db0a5b;height:70%;-o-object-fit:cover;object-fit:cover;width:100%}.content-mark{background-color:#999;bottom:0;clip-path:polygon(100% 50%,0% 50%,0% 100%,100% 100%);height:100%;left:-1px;position:absolute;right:-1px;transition:clip-path .5s,background .5s}.card-content{bottom:0;height:50%;left:0;padding:30px 10px 10px;position:absolute;right:0}.card-title{align-items:center;color:#111;display:flex;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;font-size:1.25rem;height:5rem;justify-content:center;margin:10px 0 0;padding:0;text-align:center}.card-author-name{bottom:10px;color:#777;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;font-size:.75rem;font-weight:300;left:0;margin:0;padding:0;position:absolute;text-align:center;text-transform:uppercase;transition:color .5s;width:100%}.card-icon{height:30px;width:30px}.card-button{align-items:center;background:0;border:4px solid #fff;border-radius:100%;cursor:pointer;display:inline-flex;justify-content:center;height:44px;left:50%;margin:30px 20px 0;top:50%;transition:background .5s;width:44px}.card-button:hover{background:#ffffff40}.card-actions{display:flex;justify-content:center}