:root{--clr-gold:#ffde71}*{box-sizing:border-box}body{font-family:Lato,sans-serif;line-height:2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#352b4d}.container{max-width:1280px;margin:auto}.cards-list{display:flex;flex-wrap:wrap;justify-content:center}@media screen and (min-width:1280px){.cards-list{justify-content:space-between}}.card{position:relative;max-width:100%;height:auto;margin:20px;background:#ccc;transform:rotateX(0) rotateY(0);transform-style:preserve-3d;transition-duration:.1s;transition-timing-function:ease!important;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:tranform;background-color:#424242;box-sizing:border-box}@media screen and (min-width:400px){.card{width:400px;height:400px}}@media screen and (min-width:1280px){.card{margin-right:0;margin-left:0}}.card:hover .card__overlay{opacity:1}.card:hover .card__image img{mix-blend-mode:normal}.card:hover .card__status{padding:5px;font-size:.8rem}.card:hover .card__heading{bottom:50px}.card__overlay{position:absolute;left:0;top:0;width:100%;height:100%;background-image:radial-gradient(transparent 0,#000 100%);opacity:0;transition:opacity .5s}.card__image img{display:block;width:100%;mix-blend-mode:lighten}.card__heading{position:absolute;bottom:20px;left:20px;right:20px;color:#fff;transition:bottom .3s}.card__heading .small{display:inline-block;margin-bottom:5px;text-transform:uppercase;font-size:10px;transform:translateZ(15px)}.card__heading h3{margin:0;line-height:1.5;font-size:1.5rem;transform:translateZ(30px)}.card__status{display:block;position:absolute;bottom:0;left:0;width:100%;color:#fff;text-transform:uppercase;text-align:center;box-sizing:border-box;padding:1px;font-size:0;transition:font-size .2s,padding .2s;background-color:var(--clr-gold)}.card__status--done{background-color:#71ff89}.card.is-out{transform:rotateX(0) rotateY(0)!important;transition-duration:1s}