*, *::before, *::after {
    box-sizing: border-box; /* Too much math below to be concerned with standard CSS Box Model element dimensions calculations.
    Let's not have to account for padding/margins/borders on anything here. */
}

.carousel_wrapper-rotario {
    position: relative;
    width: 320px;
    margin: 0 auto 0 auto;
    perspective: 1000px;
}

.carousel-rotatorio {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-360deg) translateZ(-412px); /*agregar transformación inversa de las diapositivas */
    animation: swirl 50s steps(10000, end) infinite; /* ejecutar la animación `swirl` (definida al final de CSS) infinitamente, con una animación que dura 40 segundos,
    y 10 000 pasos entre los valores DESDE y HASTA en la animación para una rotación suave*/
}

.slide-rotatorio {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 240px;
    height: 100px;
}

.slide-rotatorio img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes swirl {
    from {
        transform: rotateY(-360deg);
    }
    to {
        transform: rotateY(0deg);
    }
} 

@media (max-width:840px){
    .carousel_wrapper-rotario {
        width: 279px;
    }

    .slide-rotatorio {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 100px;
    }
}