@keyframes flip-top{to{transform:rotateX(90deg)}}@keyframes flip-bottom{to{transform:rotateX(0deg)}}.cards{display:flex;gap:.75rem}@media (min-width:768px){.cards{gap:1rem}}.cards .card{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:25px}.cards .card p{color:#2b2929;font-size:11px;letter-spacing:3px;text-transform:uppercase}@media(max-width:768px){.cards .card p{font-size:9px}}.cards .card .flip-card{display:flex;flex-direction:column;position:relative;margin:12px auto}@media(max-width:768px){.cards .card .flip-card{margin:8px auto}}.cards .card .bottom-flip,.cards .card .bottom-half,.cards .card .top-flip,.cards .card .top-half{color:hsl(345,95%,68%);box-shadow:inset 0 3px rgba(71,83,115,.2);overflow:hidden;text-align:center;will-change:transform;font-size:26px;height:28px;width:60px;padding:8px 5px}@media(max-width:768px){.cards .card .bottom-flip,.cards .card .bottom-half,.cards .card .top-flip,.cards .card .top-half{font-size:20px;height:15px;width:50px;padding:0}}.cards .card .top-flip,.cards .card .top-half{color:hsl(345,62%,57%);border-radius:5px 5px 0 0;background-color:#2c2c44;font-weight:700}.cards .card .top-flip:before,.cards .card .top-half:before{content:"";background-color:#d5eeff;height:10px;width:10px;border-radius:100%;position:absolute;bottom:-5px;left:-5px}.cards .card .top-flip:after,.cards .card .top-half:after{content:"";background-color:#d5eeff;height:10px;width:10px;border-radius:100%;position:absolute;bottom:-5px;right:-5px}.cards .card .bottom-flip,.cards .card .bottom-half{display:flex;justify-content:center;align-items:flex-end;border-radius:0 0 5px 5px;background-color:hsl(236,21%,26%);box-shadow:inset 0 -2px 5px 0 rgba(71,83,115,.7);font-weight:700}.cards .card .bottom-flip:before,.cards .card .bottom-half:before{content:"";background-color:#d5eeff;height:10px;width:10px;border-radius:100%;position:absolute;top:-5px;left:-5px}.cards .card .bottom-flip:after,.cards .card .bottom-half:after{content:"";background-color:#d5eeff;height:10px;width:10px;border-radius:100%;position:absolute;top:-5px;right:-5px}.cards .card .top-flip{position:absolute;transform-origin:bottom;transform:rotateX(0deg);animation:flip-top .25s ease-in forwards}.cards .card .bottom-flip{position:absolute;bottom:0;transform-origin:top;transform:rotateX(90deg);animation:flip-bottom .25s ease-out .25s}