.flip-unit{display:flex;flex-direction:column;align-items:center}.flip-card{position:relative;width:110px;height:130px;perspective:1000px}.upper-card,.lower-card{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffc727;color:#fff;font-weight:800;font-size:3rem;display:flex;justify-content:center;align-items:center;border-radius:12px;box-shadow:0 5px 15px #0003;backface-visibility:hidden}.lower-card{transform:rotateX(180deg)}.flip-top,.flip-bottom{position:absolute;left:0;width:100%;height:100%;background-color:#ffc727;color:#fff;font-weight:800;font-size:3rem;display:flex;justify-content:center;align-items:center;border-radius:12px;backface-visibility:hidden;transform-origin:center center;z-index:2}.flip-top{top:0;transform:rotateX(0)}.flip-bottom{bottom:0;transform:rotateX(90deg);background-image:linear-gradient(to top,#d69c00,#ffc727)}.flipping .flip-top{animation:flipTop .6s forwards}.flipping .flip-bottom{animation:flipBottom .6s forwards}@keyframes flipTop{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flipBottom{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.label{margin-top:.75rem;color:#1254c2;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}