body{background-color:#000;margin:0;padding:0}.container{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:30px}.button{margin-top:10px;width:100px}.card-grid{grid-gap:20px;display:grid;grid-template-columns:repeat(6,1fr);margin-bottom:16px;margin-top:16px;@media only screen and (max-width:600px){grid-template-columns:repeat(4,1fr)}}.card{width:100px}p{color:#fff;margin:10px;text-align:center}.title{font-size:24px}.card{height:150px;position:relative;width:120px;@media only screen and (max-width:1024px){height:120px;width:90px};@media only screen and (max-width:600px){height:75px;width:60px}}.card img{border-radius:6px;display:block;width:100%}.card .front{background-color:#fff;height:100%;object-fit:cover;position:absolute;transform:rotateY(90deg);transition:all .2s ease-in}.flipped .front{transform:rotateY(0deg);transition-delay:.2s}.card .back{background-color:#102913;border-radius:6px;height:150px;transition:all .2s ease-in;transition-delay:.2s;width:120px;@media only screen and (max-width:1024px){height:120px;width:90px};@media only screen and (max-width:600px){height:75px;width:60px}}.flipped .back{transform:rotateY(90deg);transition-delay:0s}
/*# sourceMappingURL=main.ae1d2b09.css.map*/