/* @group Small Banner
------------------------------------ */ 

.small-banner__container {
    display: flex;
}

.small-banner__ico {
    flex: 0 1 10rem;
}

.small-banner__info {
    flex: 1;
}

.small-banner__container h3 {
    text-transform: uppercase;
    color: var(--main-white);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: 0.04em;
    margin-bottom: 0.7rem;
}

.small-banner__container p {
    color: var(--main-white);
    font-size: 2.2em;
    line-height: 1.2em;
    font-weight: 400;
    max-width: 92.7rem;
}

.small-banner__container .ico {
    width: 10rem;
    height: 10rem;
    margin-right: 4.7rem;
}

@media only screen
and (min-width : 961px) {
    .small-banner__container {
        background: url('../../img/layout/small-banner/background.svg'), var(--main-blue);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top right;
        padding: 3.75rem 4.29rem;
        margin-top: 5.9rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .small-banner .col-12-12{
        padding: 0;
    }
    .small-banner__container {
        background: url('../../img/layout/small-banner/background-mobile.svg'), var(--main-blue);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top right;
        flex-direction: column;
        row-gap: 1.4rem;
        align-items: flex-start;
        padding: 4.3rem 2rem;   
    }
    .small-banner__ico {
        flex: 0 1 7rem;
    }
    .small-banner__container .ico {
        width: 7rem;
        height: 7rem;
    }
    .small-banner__container p {
        max-width: 29.4rem;
    }
}


/* @end */


.small-banner h3,
.small-banner p,
.small-banner .small-banner__ico {opacity: 0;}

.small-banner.animateActive h3,
.small-banner.animateActive p,
.small-banner.animateActive .small-banner__ico {animation: fadeDown 1.2s forwards;}

.small-banner.animateActive h3 {animation-delay:.3s;}
.small-banner.animateActive p {animation-delay:.5s;}
.small-banner.animateActive .small-banner__ico {animation-delay:.1s;}