<style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        .banner-container {
            width: 100%;
            height: 850px;
            overflow: hidden;
            position: relative;
            background-color: #f0f0f0;
        }

        .banner-wrapper {
            display: flex;
            /* 10 imágenes x 100% cada una = 1000% */
            width: 1000%; 
            height: 100%;
            animation: slide-10 40s infinite ease-in-out;
        }

        .banner-wrapper img {
            /* Cada imagen ocupa el 10% del total (que es el 100% de la pantalla) */
            width: 10%; 
            height: 100%;
            object-fit: cover;
        }

        /* 
           ANIMACIÓN PARA 10 IMÁGENES
           Cada bloque de 10% representa una imagen.
           Calculamos para que se quede quieta y luego se mueva.
        */
        @keyframes slide-10 {
            0%, 8% { transform: translateX(0); }            /* Foto 1 */
            10%, 18% { transform: translateX(-10%); }      /* Foto 2 */
            20%, 28% { transform: translateX(-20%); }      /* Foto 3 */
            30%, 38% { transform: translateX(-30%); }      /* Foto 4 */
            40%, 48% { transform: translateX(-40%); }      /* Foto 5 */
            50%, 58% { transform: translateX(-50%); }      /* Foto 6 */
            60%, 68% { transform: translateX(-60%); }      /* Foto 7 */
            70%, 78% { transform: translateX(-70%); }      /* Foto 8 */
            80%, 88% { transform: translateX(-80%); }      /* Foto 9 */
            90%, 98% { transform: translateX(-90%); }      /* Foto 10 */
            100% { transform: translateX(0); }             /* Regreso al inicio */
        }

        @media (max-width: 768px) {
            .banner-container { height: 250px; }
        }
    </style>