.scrollable-images-wrapper {
    padding-left: 20px
}

.scrollable-images-wrapper .scrollable-images-title .h3 {
    margin: 0 20px 80px 0
}

@media (min-width: 990px) {
    .scrollable-images-wrapper .scrollable-images-title .h3 {
        width:50%
    }
}

.scrollable-images-wrapper .scrollable-images__inner {
    display: block;
    position: relative;
    overflow: hidden
}

.scrollable-images-wrapper .scrollable-images__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem
}

.scrollable-images-wrapper .scrollable-images__card {
    -ms-flex-preferred-size: calc(100vw / 1.2);
    flex-basis: calc(100vw / 1.2);
    -ms-flex-negative: 0;
    flex-shrink: 0
}

@media (min-width: 990px) {
    .scrollable-images-wrapper .scrollable-images__card {
        -ms-flex-preferred-size:calc((100vw - 3rem)/ 2.2);
        flex-basis: calc((100vw - 3rem)/ 2.2)
    }
}

@media (min-width: 1200px) {
    .scrollable-images-wrapper .scrollable-images__card {
        -ms-flex-preferred-size:calc((100vw - 3rem)/ 3.2);
        flex-basis: calc((100vw - 3rem)/ 3.2)
    }
}

.scrollable-images-wrapper .scrollable-images .card__brand-overlay {
    width: 100%;
    /* padding-top:4.4rem; */
    position: absolute;
    top: 0;
    left: 0;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.7)),to(rgba(0,0,0,0)));
    background-image: linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 100%)
}

@media (min-width: 990px) {
    .scrollable-images-wrapper .scrollable-images .card__brand-overlay {
        /* padding-top:7rem; */
    }
}

.scrollable-images-wrapper .scrollable-images .card__cta-wrapper {
    width: 100%;
    padding-bottom: 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translateY(110%);
    transform: translateY(110%);
    -webkit-transition: opacity var(--duration-medium) linear,-webkit-transform var(--duration-medium) linear;
    transition: opacity var(--duration-medium) linear,-webkit-transform var(--duration-medium) linear;
    transition: transform var(--duration-medium) linear,opacity var(--duration-medium) linear;
    transition: transform var(--duration-medium) linear,opacity var(--duration-medium) linear,-webkit-transform var(--duration-medium) linear
}

.scrollable-images-wrapper .scrollable-images .card__cta-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.5) 100%)
}

.scrollable-images-wrapper .scrollable-images .animate--zoom-in:hover .card__cta-wrapper {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

@media (max-width: 989.98px) {
    .scrollable-images-wrapper .scrollable-images .icon {
        -webkit-transform:scale(.7);
        transform: scale(.7)
    }
}
