.animated__gradient {
    height: 510px;
    position: relative;
    z-index: -1;
}
.animated__gradient div {
    width: 100%;
    height: 46px;
    background: url(../../img/bg-animated__gradient-small-v2.png) no-repeat center bottom;
    background-size: cover;
    transition: height 0.8s cubic-bezier(0.4,0,0.2,1), background 1s cubic-bezier(0.4,0,0.2,1);
}
.animated__gradient.active div {
    height: 100%;
    background: url(../../img/bg-animated__gradient-v2.png) no-repeat center 36%;
    background-size: cover;
}

.animated__gradient:not(.up) {
    margin-bottom: -255px;
}
.animated__gradient.up {
    transform: rotate(180deg);
    margin-top: -255px;
}

@media only screen and (max-width: 1920px) {
    .animated__gradient {
        height: 444px;
    }
    .animated__gradient:not(.up) {
        margin-bottom: -222px;
    }
    .animated__gradient.up {
        margin-top: -222px;
    }
}

@media only screen and (max-width: 991px) {
    .animated__gradient {
        height: 380px;
    }
    .animated__gradient:not(.up) {
        margin-bottom: -190px;
    }
    .animated__gradient.up {
        margin-top: -190px;
    }
}

@media only screen and (max-width: 768px) {
    .animated__gradient {
        height: 160px;
    }
    .animated__gradient div {
        height: 27px;
    }

    .animated__gradient:not(.up) {
        margin-bottom: -60px;
    }
    .animated__gradient.up {
        margin-top: -60px;
    }
}

@media only screen and (max-width: 480px) {
    .animated__gradient {
        height: 122px;
    }

    .animated__gradient:not(.up) {
        margin-bottom: -30px;
    }
    .animated__gradient.up {
        margin-top: -30px;
    }
}