.center-grid{display:flex;align-items:center;justify-content:center}.container{place-items:center;height:100vh;max-width:960px}@media screen and (max-width: 640px){.container{place-content:center}}a{-webkit-tap-highlight-color:transparent}.card-wrap{transform:perspective(800px);transform-style:preserve-3d;cursor:pointer}.card-wrap:hover .card-info{transform:translateY(0)}.card-wrap:hover .card-info p{opacity:1}.card-wrap:hover .card-info,.card-wrap:hover .card-info p{transition:.6s var(--ease-out-quint)}.card-wrap:hover .card-info:after{transition:2s var(--ease-out-quint);opacity:1;transform:translateY(0)}.card-wrap:hover .card-bg{transition:.6s var(--ease-out-quint),opacity 2s var(--ease-out-quint);opacity:.8}.card-wrap:hover .card{transition:.6s var(--ease-out-quint),box-shadow 2s var(--ease-out-quint);box-shadow:#fff3 0 0 40px 5px,#fff 0 0 0 1px,#000000a8 0 30px 60px,inset #333 0 0 0 5px}.card{position:relative;flex:0 0 275px;width:275px;height:500px;max-height:70vh;background-color:#333;overflow:hidden;border-radius:10px;box-shadow:#000000a8 0 30px 60px,inset #333 0 0 0 5px;transition:1s var(--ease-in-out-quad)}@media screen and (max-width: 1024px){.card{flex:0 0 220px;width:220px;height:400px}}@media screen and (max-width: 768px){.card{flex:0 0 184px;width:184px;height:334px}}@media screen and (max-width: 640px){.card{flex:0 0 220px;width:220px;height:400px}}@media (max-width: 500px){.card{flex:0 0 158px;width:158px;height:310px}}.card-bg{opacity:.5;position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transition:1s var(--ease-in-out-quad),opacity 2s 1s var(--ease-in-out-quad);pointer-events:none}.card-info{padding:20px;position:absolute;bottom:30px;transform:translateY(40%);transition:.6s 1.6s cubic-bezier(.215,.61,.355,1)}@media screen and (max-width: 768px){.card-info{bottom:26px}}@media (max-width: 500px){.card-info{bottom:26px}}.card-info h1{font-family:var(--font-primary),sans-serif;font-size:2.25rem;font-weight:700;color:#fff;text-shadow:rgba(0,0,0,.5) 0 10px 10px;transition:1s var(--ease-in-out-quad)}@media screen and (max-width: 1024px){.card-info h1{font-size:1.8rem}}@media screen and (max-width: 768px){.card-info h1{font-size:1.5rem}}@media screen and (max-width: 640px){.card-info h1{font-size:1.8rem}}@media (max-width: 500px){.card-info h1{font-size:1.375rem}}.shimmer{background:linear-gradient(90deg,#ededed 30%,#dcdcdc,#ededed 70%);background-size:400%;animation:shimmer 1.5s infinite linear}.loaded{filter:blur(0)}@keyframes shimmer{0%{background-position:100% 100%}to{background-position:0 0}}@keyframes blurFade{0%{filter:blur(2px)}to{filter:blur(0)}}.card-bg.loaded{animation:blurFade .8s var(--ease-in-out-quad) forwards}