.header {
    margin-bottom: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* number of images*/
.gallery {
    --d: 10s;
    /* duration */
    display: grid;
    overflow: hidden;
    width: 380px;
    -webkit-mask: linear-gradient(90deg, #0000, #000000 10% 90%, #0000);
    mask: linear-gradient(90deg, #0000, #000000 10% 90%, #0000);
}

.gallery>img {
    grid-area: 1/1;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    animation: r var(--d) linear infinite;
}

.gallery>img:nth-child(2) {
    animation-delay: calc(-0.2*var(--d));
}

.gallery>img:nth-child(3) {
    animation-delay: calc(-0.4*var(--d));
}

.gallery>img:nth-child(4) {
    animation-delay: calc(-0.6*var(--d));
}

.gallery>img:nth-child(5) {
    animation-delay: calc(-0.8*var(--d));
}

@keyframes r {
    80% {
        transform: translate(-400%);
    }

    80.01% {
        transform: translate(100%);
    }
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #ECD078;
}