.wild-banners {
    position: relative;
    z-index: 1;

    &.use_bg {
        padding: 25px 0px;

        & .banner-control {bottom: 43px;}

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            height: 100%;
            background-color: #fff;
            z-index: -1;
        }
    }

    & .banner {
        position: relative;
        display: block;
        width: 100%;
        border-radius: 20px;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #00000030;
            z-index: 0;
        }

        &.mobile {display: none;}

        & img {
            height: 100%;
            width: 100%;
            max-width: 100%;
            max-height: 600px;
        }

        & .banner-title {
            position: absolute;
            left: 170px;
            bottom: 70px;
            z-index: 1;
            width: auto;
            height: auto;
            color: #fff;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 50px;
            line-height: 1.2;
            max-width: 50%;
        }
    }

    & .banner-control {
        position: absolute;
        right: 36px;
        bottom: 18px;
        z-index: 2;

        & ._arrows__el {background: #fff;}
    }
}



@media screen and (max-width: 1600px) {
    .wild-banners {
        & .banner {
            & .banner-title {
                left: 70px;
                bottom: 70px;
                max-width: 70%;
            }
        }
    }
}

@media screen and (max-width: 900px) {
    .wild-banners {
        & .banner {
            & .banner-title {
                left: 50px;
                bottom: 50px;
                font-size: 25px;
                max-width: 70%;
            }
        }
    }
}

@media screen and (max-width: 600px) {
    .wild-banners {
        & .banner {
            height: 150px;

            &.desktop {display: none;}
            &.mobile {display: block; height: auto;}

            & .banner-title {
                left: 20px;
                bottom: 20px;
                font-size: 15px;
                max-width: 60%;
            }
        }

        & .banner-control {
            right: 15px;
            bottom: 15px;

            & ._arrows__el {width: 40px; height: 40px;}
        }
    }
}