.CUBEY_ROW 
        { 
                margin-top:10px;
                outline:1px solid red; 
                grid-area:CUBEY_ROW; 
                display:grid;
                grid-template-areas:
                        'KATE_CUBEY' 'PIZZA_CUBEY';
                grid-template-columns:1fr 1fr;
                grid-template-rows:1fr;
                justify-content:stretch;
                width:100%;
                justify-items:center;
        }
        
        /* .TEST 
        { 
                transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
                transform-style:preserve-3d;
                outline:3px solid red;
                height:100px;
                width:100%;
                grid-area:TEST 
        }
        .TEST_PIZZA 
        {
                grid-area:TEST_PIZZA;
        } */

        @scope (.CUBEY)
        {                
                :scope 
                {                         
                        --CUBEY_WIDTH:50; 
                        --CUBEY_HEIGHT:50;
                        --CUBEY_DEPTH:50;

                        transform-style:preserve-3d;  

                        width:calc(var(--CUBEY_WIDTH) * 1px);
                        height:calc(var(--CUBEY_HEIGHT) * 1px);

                        display:grid;
                        
                        --ANIMATION_DURATION:5s;
                        --TRANSITION_DURATION:2.5s;
                        transition:var(--TRANSITION_DURATION);
                }                



&.ROTATE_NEW
  {
          animation-name: cube_animation_rotate_new;
          animation-duration: 4s;
  }

       @keyframes cube_animation_rotate_new
     {
             from    { rotate:.125 .125 .1 0deg; color:blue;}
             to      { rotate:.125 .125 .1 360deg; color:blue;}
     }




&.A
{
        border:10px solid red; 
        border-radius:40px;
        animation-name: rotate_up_fire_rotate_down;
        animation-duration:1.75s;
        animation-iteration-count: infinite;

 }

 @keyframes rotate_up_fire_rotate_down
 {
        from { transform: rotateZ(0deg) rotateY(0deg) translateZ(100px); border-radius:0px;}
        to  { transform: rotateZ(30deg) rotateY(124deg) translateZ(-20000px); border-radius:30px;}

 }



                
                &:hover { transform: rotateX(23deg) rotateY(-25deg) scale(6); translate: 25px 200px; }

                .FACEY           
                {       
                        width:calc(var(--CUBEY_WIDTH) * 1px);
                        height:calc(var(--CUBEY_HEIGHT) * 1px);
                        
                        position:absolute; 

                       background-size: contain;
                        border-radius:30px; 
                }
                
                .FACEY.FRONT              {   transform: rotateY(0deg)        translateZ(calc((var(--CUBEY_WIDTH) / 2) * 1px)); }
                .FACEY.FRONT::after              
                {   
                        content: 'front-after ME'; 
                        transform: rotateY(30deg)        translateZ(140px); 
                        display:grid;
                        width:100%; 
                        height:100%; 
                        font-size:.9rem; 
                        color:blue;

                        background: repeating-linear-gradient(
                                 90deg,transparent,                                
                                #606dbc 13px
                        );
                }
                
                .FACEY.RIGHT              {  transform: rotateY(90deg)       translateZ(calc((var(--CUBEY_WIDTH) / 2) * 1px)); }
                .FACEY.BACK               {   transform: rotateY(180deg)      translateZ(calc((var(--CUBEY_WIDTH) / 2) * 1px)); }
                .FACEY.LEFT               {  transform: rotateY(-90deg)      translateZ(calc((var(--CUBEY_WIDTH) / 2) * 1px)); }
                .FACEY.TOP                {  transform: rotateX(90deg)       translateZ(calc((var(--CUBEY_HEIGHT) / 2) * 1px)); }
                .FACEY.BOTTOM             {  transform: rotateX(-90deg)      translateZ(calc((var(--CUBEY_HEIGHT) / 2) * 1px)); }
               
                .FACEY.CARGO              {   transform: rotateX(0deg)        translateZ(calc((var(--CUBEY_WIDTH) / 2) * 1px)); }
                              
        }

        @scope(.KATE_CUBEY)
        {
                :scope 
                {
                        /* outline:2px solid silver;  */
                        transform:rotateX(7deg) rotateY(7deg) rotateZ(0deg);
                }
                .FACEY {  background-image:url("/wp-content/plugins/WONDERMAN/assets/images/KATE.png");
                         }
        }

        @scope(.PIZZA_CUBEY)
        {
                :scope 
                {
                        /* outline:2px solid silver;  */
                        transform:rotateX(7deg) rotateY(7deg) rotateZ(0deg);
                }
                .FACEY 
                {
                        background-image:url("/wp-content/plugins/WONDERMAN/assets/images/0_0.JPG");
                }
        }