@media screen and (min-width:980px) {
    .img-v-1 {
        height: 100vh;
        animation: slide-animation-1 15s;
    }

    .img-v-2 {
        height: 100vh;
        animation: slide-animation-1 15s;
    }

    .img-v-3 {
        height: 100vh;
        width: 100vw;
        animation: slide-animation-1 15s;
    }
}

@media screen and (max-width: 979px) {
    .img-v-1 {
        height: 60vh;
        animation: slide-animation-1 15s;
    }

    .img-v-2 {
        height: 60vh;
        animation: slide-animation-1 15s;
    }

    .img-v-3 {
        height: 60vh;
        width: 100vw;
        animation: slide-animation-1 15s;
    }
}

@media screen and (max-width: 767px) {
    .img-v-1 {
        height: 50vh;
        animation: slide-animation-1 15s;
    }

    .img-v-2 {
        height: 50vh;
        animation: slide-animation-1 15s;
    }

    .img-v-3 {
        height: 50vh;
        width: 100vw;
        animation: slide-animation-1 15s;
    }
}

@media screen and (max-width: 479px) {
    .img-v-1 {
        height: 40vh;
        animation: slide-animation-1 15s;
    }

    .img-v-2 {
        height: 40vh;
        animation: slide-animation-1 15s;
    }

    .img-v-3 {
        height: 40vh;
        width: 100vw;
        animation: slide-animation-1 15s;
    }
}



@keyframes slide-animation-1 {
    0% {

        transform: scale(1.0) translateX(0);
    }

    30% {}

    40% {}

    90% {}

    100% {
        transform: scale(1.15) translateX(4%);
    }
}

@keyframes slide-animation-2 {
    0% {

        transform: scale(1.15) translateX(-4%) translateY(4%);
    }

    30% {}

    40% {}

    90% {}

    100% {
        transform: scale(1.0) translateX(0) translateY(0);
    }
}

@keyframes slide-animation-3 {
    0% {

        transform: scale(1.0) translateX(0) translateY(0);
    }

    30% {}

    40% {}

    90% {}

    100% {
        transform: scale(1.15) translateX(4%) translateY(-4%);
    }
}