.lowerCard,.upperCard{display:flex;position:relative;justify-content:center;width:100%;height:50%;overflow:hidden}.upperCard{background-color:var(--flip-top,#de9f16)}.lowerCard{background-color:var(--flip-bottom,#f2ae1c)}.lowerCard span,.upperCard span{font-size:var(--flip-font,2em);font-weight:var(--flip-weight,bolder);color:#fff}@media(max-width:768px){.lowerCard span,.upperCard span{font-size:var(--flip-font,1.5em)}}.upperCard{align-items:flex-end;border-bottom:.5px solid var(--flip-seam,#d48e00);border-top-left-radius:var(--flip-radius,3px);border-top-right-radius:var(--flip-radius,3px)}.upperCard span{transform:translateY(50%)}.lowerCard{align-items:flex-start;border-bottom-left-radius:var(--flip-radius,3px);border-bottom-right-radius:var(--flip-radius,3px)}.lowerCard span{transform:translateY(-50%)}.flipCard{display:flex;justify-content:center;position:absolute;left:0;width:100%;height:50%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--flip-bottom,#f2ae1c)}.flipCard span{font-size:var(--flip-font,2em);font-weight:var(--flip-weight,bolder);color:#fff}@media(max-width:768px){.flipCard span{font-size:var(--flip-font,1.5em)}}.flipCard.unfold{top:50%;align-items:flex-start;transform-origin:50% 0;transform:rotateX(180deg);background-color:var(--flip-bottom,#f2ae1c);border-bottom-left-radius:var(--flip-radius,3px);border-bottom-right-radius:var(--flip-radius,3px)}.flipCard.unfold,.flipCard.unfold span{transform:translateY(-50%)}.flipCard.fold{top:0;align-items:flex-end;transform-origin:50% 100%;transform:rotateX(0deg);background-color:var(--flip-top,#de9f16);border-top-left-radius:var(--flip-radius,3px);border-top-right-radius:var(--flip-radius,3px)}.flipCard.fold span{transform:translateY(50%)}.fold{-webkit-animation:fold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards;animation:fold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}.fold,.unfold{transform-style:preserve-3d}.unfold{-webkit-animation:unfold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards;animation:unfold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}@-webkit-keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(180deg)}}@keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(180deg)}}@-webkit-keyframes unfold{0%{transform:rotateX(-180deg)}to{transform:rotateX(0deg)}}@keyframes unfold{0%{transform:rotateX(-180deg)}to{transform:rotateX(0deg)}}.flipTileNotched{--notch:var(--flip-notch,0px);-webkit-mask:radial-gradient(circle var(--notch) at 0 50%,transparent calc(var(--notch) - .5px),#000 var(--notch)),radial-gradient(circle var(--notch) at 100% 50%,transparent calc(var(--notch) - .5px),#000 var(--notch));-webkit-mask-composite:source-in;mask:radial-gradient(circle var(--notch) at 0 50%,transparent calc(var(--notch) - .5px),#000 var(--notch)),radial-gradient(circle var(--notch) at 100% 50%,transparent calc(var(--notch) - .5px),#000 var(--notch));mask-composite:intersect}