.flip-clock{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;width:100%;margin:10px 0}.flip-container{display:block;position:relative;width:140px;height:120px;perspective-origin:50% 50%;perspective:300px;background-color:#fff;border-radius:8px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.lower-card,.upper-card{display:flex;position:relative;justify-content:center;width:100%;height:50%;overflow:hidden}.lower-card span,.upper-card span{font-size:4.9em;font-family:var(--font-numbers),monospace;font-weight:lighter}.upper-card{align-items:flex-end;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:.5px solid hsla(0,0%,96%,.8)}.upper-card span{transform:translateY(50%)}.lower-card{align-items:flex-start;border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-top:.5px solid hsla(0,0%,96%,.8)}.lower-card span{transform:translateY(-50%)}.flip-card{display:flex;justify-content:center;position:absolute;width:100%;height:50%;overflow:hidden;backface-visibility:hidden}.flip-card span{font-family:var(--font-numbers),monospace;font-size:4.9em;font-weight:lighter}.flip-card.unfold{top:50%;align-items:flex-start;transform-origin:50% 0;transform:rotateX(180deg);background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.flip-card.unfold span{transform:translateY(-50%)}.flip-card.fold{top:0;align-items:flex-end;transform-origin:50% 100%;transform:rotateX(0deg);background-color:#fff;border-top-left-radius:8px;border-top-right-radius:8px}.flip-card.fold span{transform:translateY(50%)}.fold{animation:fold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}.fold,.unfold{transform-style:preserve-3d}.unfold{animation:unfold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}@keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(-180deg)}}@keyframes unfold{0%{transform:rotateX(180deg)}to{transform:rotateX(0deg)}}