.cloud {
    width: 100%;
    height: 0;
    z-index: 2;
}

.cloud img{
    z-index: 2;
    animation: cld calc(15s * var(--i)) linear infinite;
    width: 40%;
    position: absolute;
    top: 0px;
    padding: 0;
}
@keyframes cld{
    0%{
        transform: translateX(-200%);    
    }
    100%{
        transform: translateX(50%);
    }
}

@media only screen and (max-width: 450px) {
    .cloud img {
        width: 100%;
        animation: cld calc(12s * var(--i)) linear infinite;
    }   
}