.WONDERMAN_CONTAINER.show
                {
                        opacity: 1; 
                        visibility: visible;
                        transition: opacity 4.0s;
                        margin:0 auto;
                        /* outline:3px solid red;  */
                        position:fixed;
                        left:5%;
                        top:12%;
                }
                 .WONDERMAN_CONTAINER.hide
                {
                        opacity: 0; 
                        visibility: hidden;  
                        transition: opacity 4.0s;
                }
                
                img { width:100px; height:auto;}
                

                
                .WONDERMAN_CONTAINER
                {                         
                        --CUBE_WIDTH:320; 
                        --CUBE_HEIGHT:500;
                        --CUBE_DEPTH:50;

                        /* left:40%;
                        top:5%; */
                        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                        transform-style:preserve-3d;  

                        width:calc(var(--CUBE_WIDTH) * 1px);
                        height:calc(var(--CUBE_HEIGHT) * 1px);

                        /* display:grid;
                        grid-template-columns:1fr;
                        grid-template-rows:1fr; */
                        opacity: 0; 
                        visibility: hidden;  
                        /* position:absolute;
                        left:35%;
                        top:32%;
                        z-index:99; */
                        /* grid-template-areas: 'CUBE'; */
                                             
                }
                
                .multi_cube:hover { transform: rotateX(13deg) rotateY(-55deg) translateX(225px) translateY(-100px) scale(4) }
                .multi_cube:hover { transform: rotateX(18deg) rotateY(-55deg) translateX(125px) translateY(-100px) scale(4) }

                .WONDERMAN_CUBE
                { 

                        /* transform:rotateX(-5deg) rotateY(6deg) rotateZ(0deg); */
                        transform-style:preserve-3d;

                        width:calc(var(--CUBE_WIDTH) * 1px);
                        height:calc(var(--CUBE_HEIGHT) * 1px);  
                                                              
                        background-color:#77777733;
                        background:transparent;
                        display:grid;
                        grid-template-areas:'CUBE';
                }
                
                .FACE                         
                {                         
                        width:100%;
                        height:100%;
                        position:absolute; 
                        /* background-color:#77777733; */
                }
                .FACE::before                  
                {                         
                        background-image: url("https://www.captaincastiron.com/wp-content/uploads/2026/01/WOMAN_02-scaled.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 30% 50%;

    content: '';
    /* background-image: url('your-image.jpg'); */
    opacity: 0.23; /* Adjust opacity here */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Places it behind the content */

                }


                /* .FACE.LEFT, .FACE.RIGHT { background-color:#22ff2299;} */
                
                .FACE.FRONT              {                                                              transform: rotateY(0deg)        translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.RIGHT              { height:calc(var(--CUBE_HEIGHT) * 1px);                       transform: rotateY(90deg)       translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.BACK               { background-color:black;                                                             transform: rotateY(180deg)      translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.LEFT               { height:calc(var(--CUBE_HEIGHT) * 1px);                       transform: rotateY(-90deg)      translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.TOP                { height:calc(var(--CUBE_DEPTH) * 1px);                        transform: rotateX(90deg)       translateZ(calc((var(--CUBE_HEIGHT) / 2) * 1px)); }
                .FACE.BOTTOM             { height:calc(var(--CUBE_DEPTH) * 1px);                        transform: rotateX(-90deg)      translateZ(calc((var(--CUBE_HEIGHT) / 2) * 1px)); }
                .FACE.CARGO              {                                                              transform: rotateX(0deg)        translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }