/* Basic 3D cube styles */
.kfw-cube-container {
    perspective: 1000px;
    width: 300px;
    height: 300px;
    margin: 40px auto;
}
.kfw-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 15s infinite linear;
}
.kfw-cube .face {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #fff;
    border: 2px solid #ccc;
}
.kfw-cube .face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kfw-cube .front  { transform: rotateY(  0deg) translateZ(150px); }
.kfw-cube .back   { transform: rotateY(180deg) translateZ(150px); }
.kfw-cube .right  { transform: rotateY( 90deg) translateZ(150px); }
.kfw-cube .left   { transform: rotateY(-90deg) translateZ(150px); }
.kfw-cube .top    { transform: rotateX( 90deg) translateZ(150px); }
.kfw-cube .bottom { transform: rotateX(-90deg) translateZ(150px); }

@keyframes rotateCube {
    from { transform: rotateX(0) rotateY(0); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}