.gift-container{perspective:2000px;transform-style:preserve-3d;transform-origin:50%;position:relative}.gift-box-sm{width:60px;height:60px}.gift-box-md{width:80px;height:80px}.gift-box-lg{width:100px;height:100px}.gift-box-sm .gift-face{--size:30px}.gift-box-md .gift-face{--size:40px}.gift-box-lg .gift-face{--size:50px}.gift-box-sm .gift-lid .gift-face{--lid-size:33px;--lid-height:10px}.gift-box-md .gift-lid .gift-face{--lid-size:44px;--lid-height:12px}.gift-box-lg .gift-lid .gift-face{--lid-size:55px;--lid-height:15px}.gift-box{transform-style:preserve-3d;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(-20deg)rotateY(-30deg)}.gift-lid{transform-style:preserve-3d;animation:3s ease-in-out infinite lid-float;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translate(-2px)rotateX(-20deg)rotateY(-30deg)}@keyframes lid-float{0%,to{transform:translate(-50%,-50%)translate(-2px,-2px)rotateX(-20deg)rotateY(-30deg)}50%{transform:translate(-50%,-50%)translate(-2px,2px)rotateX(-20deg)rotateY(-30deg)}}.gift-face{width:var(--size);height:var(--size);box-sizing:border-box;background:#f0b429;position:absolute}.gift-lid .gift-face{width:var(--lid-size);height:var(--lid-height);background:#f5c842}.gift-lid .gift-face.top{height:var(--lid-size)}.gift-face.front{transform:rotateY(0deg)translateZ(calc(var(--size)/2))}.gift-face.back{transform:rotateX(180deg)translateZ(calc(var(--size)/2))}.gift-face.left{transform:rotateY(-90deg)translateZ(calc(var(--size)/2))}.gift-face.right{transform:rotateY(90deg)translateZ(calc(var(--size)/2))}.gift-face.top{transform:rotateX(90deg)translateZ(calc(var(--size)/2))}.gift-face.bottom{transform:rotateX(-90deg)translateZ(calc(var(--size)/2))}.gift-lid .gift-face.front{transform:rotateY(0deg)translateZ(calc(var(--lid-size)/2));box-shadow:0 3px 2px #0000001a}.gift-lid .gift-face.back{transform:rotateX(180deg)translateZ(calc(var(--lid-size)/2));box-shadow:0 -3px 2px #0000001a}.gift-lid .gift-face.left{transform:rotateY(-90deg)translateZ(calc(var(--lid-size)/2));box-shadow:0 3px 2px #0000001a}.gift-lid .gift-face.right{transform:rotateY(90deg)translateZ(calc(var(--lid-size)/2));box-shadow:0 3px 2px #0000001a}.gift-lid .gift-face.top{transform:rotateX(90deg)translateZ(calc(var(--lid-size)/2))}.gift-ribbon{background:#e53935;border-left:1px solid #ff6464f2;border-right:1px solid #ff6464f2;width:20%;height:100%;margin:0 40%;position:absolute}.gift-ribbon:nth-of-type(2){width:100%;height:20%;margin:40% 0}