.flip-unit{margin-left:.5rem;margin-right:.5rem}.flip-unit-container{--flip-unit-background-color:var(--color-yellow);--flip-unit-font-color:var(--color-black);font-weight:700;perspective:1000px}.flip-card.first,.flip-card.second,.lower-card,.upper-card{background:var(--flip-unit-background-color);color:var(--flip-unit-font-color)}.upper-card{border-top-left-radius:.1em;border-top-right-radius:.1em;height:auto}.lower-card{border-bottom-left-radius:.1em;border-bottom-right-radius:.1em}.flip-card{backface-visibility:hidden;position:absolute}.flip-card.first{border-top-left-radius:10px;border-top-right-radius:15px;top:0;transform-origin:bottom}.flip-card.second{border-bottom-left-radius:10px;border-bottom-right-radius:10px;bottom:0;transform:rotateX(180deg);transform-origin:top}.flip-card.animate.first{animation:flipTop .6s forwards}.flip-card.animate.second{animation:flipBottom .6s forwards}.flip-card.first,.upper-card{border-bottom:.1rem solid #fff;line-height:0;overflow:hidden;padding:.8em .25em 0}.flip-card.second,.lower-card{border-top:.1rem solid #fff;line-height:0;overflow:hidden;padding:0 .25em .8em}.label{color:#777;text-align:center}@keyframes flipTop{0%{transform:rotateX(0)}to{transform:rotateX(-180deg)}}@keyframes flipBottom{0%{transform:rotateX(180deg)}to{transform:rotateX(0)}}.countdown{display:flex;justify-content:center}
