@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
.twirlContainer {
    position: absolute;
    left: 70%;
    mix-blend-mode: overlay;
    width: 30%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 201;
}

.tray {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding-bottom: 10px;
    position: relative;
}

.cube-container {
    width: 400px;
    height: 55px;
    perspective: 999px;
    
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    background: #028f812f;
    margin-bottom: 50px;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: white;
    /* background: rgba(255, 255, 255, 0.1); */
    backface-visibility: hidden;
    transform-origin: 50% 50% -201px;
    font-family: "Montserrat" ;
    letter-spacing: -1px;
    overflow: hidden;
}

.front  { transform: translateZ(200px); }
.back   { transform: translateZ(-200px) rotateY(180deg); }
.right  { transform: translateX(200px) rotateY(90deg); }
.left   { transform: translateX(-200px) rotateY(-90deg); }


@media (max-width: 768px) {
    .twirlContainer {
        display: none;
    }
    
    
}