.flip-clock{display:flex;align-items:flex-start;gap:12px}@media (min-width:640px){.flip-clock{gap:18px}}.flip-unit{display:flex;flex-direction:column;align-items:center}.flip-label{margin-top:8px;font-family:var(--font-montserrat),system-ui,sans-serif;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:hsla(0,0%,100%,.4)}@media (min-width:640px){.flip-label{font-size:10px}}.flip-card{position:relative;width:56px;height:70px;perspective:300px}@media (min-width:640px){.flip-card{width:68px;height:84px}}.flip-card span{font-family:var(--font-playfair),Georgia,serif;font-size:32px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;user-select:none;line-height:1}@media (min-width:640px){.flip-card span{font-size:40px}}.flip-back{position:absolute;inset:0;border-radius:8px;overflow:hidden}.flip-bottom-half,.flip-top-half{position:absolute;left:0;right:0;height:50%;overflow:hidden}.flip-top-half{top:0;background:hsla(0,0%,100%,.12)}.flip-bottom-half{bottom:0;background:hsla(0,0%,100%,.07)}.flip-bottom-half .flip-inner,.flip-top-half .flip-inner{display:flex;align-items:center;justify-content:center;width:100%;height:70px;padding-bottom:4px}@media (min-width:640px){.flip-bottom-half .flip-inner,.flip-top-half .flip-inner{height:84px}}.flip-top-half .flip-inner{position:absolute;top:0}.flip-bottom-half .flip-inner{position:absolute;bottom:0}.flip-bottom-flap,.flip-top-flap{position:absolute;left:0;right:0;height:50%;overflow:hidden;z-index:2}.flip-top-flap{top:0;background:hsla(0,0%,100%,.12);border-radius:8px 8px 0 0;transform-origin:bottom center;animation:fold-down .35s ease-in forwards}.flip-bottom-flap{bottom:0;background:hsla(0,0%,100%,.09);border-radius:0 0 8px 8px;transform-origin:top center;transform:rotateX(90deg);animation:unfold-down .35s ease-out .17s forwards}.flip-top-flap .flip-inner{top:0}.flip-bottom-flap .flip-inner,.flip-top-flap .flip-inner{display:flex;align-items:center;justify-content:center;width:100%;height:70px;padding-bottom:4px;position:absolute}.flip-bottom-flap .flip-inner{bottom:0}@media (min-width:640px){.flip-bottom-flap .flip-inner,.flip-top-flap .flip-inner{height:84px}}@media (max-width:639px){.flip-bottom-flap .flip-inner,.flip-top-flap .flip-inner{height:70px}}.flip-line{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(0,0,0,.3);z-index:10;pointer-events:none}@keyframes fold-down{0%{transform:rotateX(0deg)}to{transform:rotateX(-90deg)}}@keyframes unfold-down{0%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}