body{background-color:#fff8dc;margin:0}.container{max-width:1100px;margin:1rem 2rem;text-align:center}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.card,.card-grid{-webkit-align-items:center;align-items:center}.card{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;position:relative;border-radius:.35rem;box-shadow:0 0 3px 3px rgba(0,0,0,.5);background-color:#d3d3d3;height:170px;width:200px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(1000px) rotateY(0) translateY(0);transform:perspective(1000px) rotateY(0) translateY(0);-webkit-transform:perspective(1000px) rotateY(var(--rotate-y,0)) translateY(var(--translate-y,0));transform:perspective(1000px) rotateY(var(--rotate-y,0)) translateY(var(--translate-y,0));transition:.5s;cursor:pointer;margin:1rem}.card:hover{--translate-y:-2px;box-shadow:0 0 3px 3px rgba(0,0,0,.7)}.card.flip{--rotate-y:180deg}.card .front{left:0}.card .back,.card .front{position:absolute;padding:1rem;-webkit-backface-visibility:hidden;backface-visibility:hidden}.card .back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
/*# sourceMappingURL=main.9a3e9c08.chunk.css.map */