.galery {
    width: 1540px;
    height: 500px;
    overflow: hidden;
    background-color: whitesmoke;
    margin: 0 auto;
}

.galery .fotos {
    width: 7700px; /* 1540 x 5 */
    display: flex;
    padding: 0;
    margin: 0;
    animation-name: animacao1540;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

.galery .fotos img {
    width: 1540px;
    height: 500px;
    display: block;
}

/* =========================
   BREAKPOINT 1540 -> 1340
========================= */
@media (max-width: 1540px) {
    .galery {
        width: 1340px;
        height: 480px;
    }

    .galery .fotos {
        width: 6700px; /* 1340 x 5 */
        animation-name: animacao1340;
    }

    .galery .fotos img {
        width: 1340px;
        height: 480px;
    }
}

/* =========================
   BREAKPOINT 1340 -> 1240
========================= */
@media (max-width: 1340px) {
    .galery {
        width: 1240px;
        height: 440px;
    }

    .galery .fotos {
        width: 6200px; /* 1240 x 5 */
        animation-name: animacao1240;
    }

    .galery .fotos img {
        width: 1240px;
        height: 440px;
    }
}

/* =========================
   BREAKPOINT 1240 -> 1040
========================= */
@media (max-width: 1240px) {
    .galery {
        width: 1040px;
        height: 340px;
    }

    .galery .fotos {
        width: 5200px; /* 1040 x 5 */
        animation-name: animacao1040;
    }

    .galery .fotos img {
        width: 1040px;
        height: 340px;
    }
}

/* =========================
   BREAKPOINT 1040 -> 950
========================= */
@media (max-width: 1040px) {
    .galery {
        width: 950px;
        height: 340px;
    }

    .galery .fotos {
        width: 4750px; /* 950 x 5 */
        animation-name: animacao950;
    }

    .galery .fotos img {
        width: 950px;
        height: 340px;
    }
}

/* =========================
   BREAKPOINT 950 -> 840
========================= */
@media (max-width: 950px) {
    .galery {
        width: 840px;
        height: 340px;
    }

    .galery .fotos {
        width: 4200px; /* 840 x 5 */
        animation-name: animacao840;
    }

    .galery .fotos img {
        width: 840px;
        height: 340px;
    }
}

/* =========================
   ESCONDE ABAIXO DE 840
========================= */
@media (max-width: 840px) {
    .galery {
        display: none;
    }
}

/* =========================
   ANIMAÇÃO 1540
========================= */
@keyframes animacao1540 {
    0%, 18% {
        transform: translateX(0);
    }
    20%, 38% {
        transform: translateX(-1540px);
    }
    40%, 58% {
        transform: translateX(-3080px);
    }
    60%, 78% {
        transform: translateX(-4620px);
    }
    80%, 98% {
        transform: translateX(-6160px);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================
   ANIMAÇÃO 1340
========================= */
@keyframes animacao1340 {
    0%, 18% {
        transform: translateX(0);
    }
    20%, 38% {
        transform: translateX(-1340px);
    }
    40%, 58% {
        transform: translateX(-2680px);
    }
    60%, 78% {
        transform: translateX(-4020px);
    }
    80%, 98% {
        transform: translateX(-5360px);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================
   ANIMAÇÃO 1240
========================= */
@keyframes animacao1240 {
    0%, 18% {
        transform: translateX(0);
    }
    20%, 38% {
        transform: translateX(-1240px);
    }
    40%, 58% {
        transform: translateX(-2480px);
    }
    60%, 78% {
        transform: translateX(-3720px);
    }
    80%, 98% {
        transform: translateX(-4960px);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================
   ANIMAÇÃO 1040
========================= */
@keyframes animacao1040 {
    0%, 18% {
        transform: translateX(0);
    }
    20%, 38% {
        transform: translateX(-1040px);
    }
    40%, 58% {
        transform: translateX(-2080px);
    }
    60%, 78% {
        transform: translateX(-3120px);
    }
    80%, 98% {
        transform: translateX(-4160px);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================
   ANIMAÇÃO 950
========================= */
@keyframes animacao950 {
    0%, 18% {
        transform: translateX(0);
    }
    20%, 38% {
        transform: translateX(-950px);
    }
    40%, 58% {
        transform: translateX(-1900px);
    }
    60%, 78% {
        transform: translateX(-2850px);
    }
    80%, 98% {
        transform: translateX(-3800px);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================
   ANIMAÇÃO 840
========================= */
@keyframes animacao840 {
    0%, 18% {
        transform: translateX(0);
    }
    20%, 38% {
        transform: translateX(-840px);
    }
    40%, 58% {
        transform: translateX(-1680px);
    }
    60%, 78% {
        transform: translateX(-2520px);
    }
    80%, 98% {
        transform: translateX(-3360px);
    }
    100% {
        transform: translateX(0);
    }
}