@media screen and (min-width: 768px) {
    .f-banner-with-slider .container-full {
        padding-left: 0;
        padding-right: 0
    }
}

.f-banner-with-slider .f-slide__wrapper {
    padding: var(--f-padding-mobile-y, 40px) var(--f-padding-mobile-x, 16px)
}

@media screen and (min-width: 1280px) {
    .f-banner-with-slider .f-slide__wrapper {
        padding: var(--f-padding-y, 50px) var(--f-padding-x, 50px)
    }
}

@media screen and (min-width: 768px) {
    .f-banner-with-slider--layout-1 .f-banner-with-slider__slider {
        grid-column-start: 1;
        grid-column-end: 5
    }
}

@media screen and (min-width: 1024px) {
    .f-banner-with-slider--layout-1 .f-banner-with-slider__slider {
        grid-column-end: 4;
        grid-column-start: 2;
        order: 0
    }
}

@media screen and (min-width: 768px) {
    .f-banner-with-slider--layout-1 .f-banner-with-slider__banner--medium {
        grid-column-end: 3;
        grid-column-start: 1
    }
}

@media screen and (min-width: 1024px) {
    .f-banner-with-slider--layout-1 .f-banner-with-slider__banner--medium {
        grid-column-end: 1;
        grid-column-start: 1
    }
}

@media screen and (min-width: 768px) {
    .f-banner-with-slider--layout-1 .f-banner-with-slider__banner-group {
        grid-column-end: 5;
        grid-column-start: 3
    }
}

@media screen and (min-width: 1024px) {
    .f-banner-with-slider--layout-1 .f-banner-with-slider__banner-group {
        grid-column-end: 5;
        grid-column-start: 4
    }
}

@media screen and (min-width: 768px) {
    .f-banner-with-slider--layout-2 .f-mixed-layout__inner {
        display: grid;
        grid-template-rows:repeat(2, 1fr);
        grid-template-columns:repeat(2, 1fr)
    }
}

@media screen and (max-width: 767px) {
    .f-banner-with-slider--layout-2 .f-mixed-layout .f-button, .f-banner-with-slider--layout-2 .f-mixed-layout .f-button:hover {
        padding: 0;
        color: var(--color-foreground);
        background-color: rgba(0, 0, 0, 0);
        box-shadow: none
    }
}

.f-banner-with-slider__slider {
    overflow: hidden;
    width: 100%;
    height: 100%;
    order: -9999
}

@media screen and (max-width: 767px) {
    .f-banner-with-slider__slider .f-slider-controls {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9
    }

    .f-banner-with-slider__slider .f-slider-controls--bottom-left {
        transform: none;
        left: var(--fpadding-mobile-x, 16px)
    }
}

.f-banner-with-slider__banner {
    position: relative;
    overflow: hidden
}

.f-banner-with-slider__banner-content {
    position: absolute;
    bottom: 24px;
    z-index: 10;
    width: 100%;
    padding: 0 15px;
    text-align: center
}

@media screen and (max-width: 767px) {
    .f-mixed-layout .f-banner-with-slider__banner-content {
        position: static;
        margin-top: 16px;
        padding: 0;
        text-align: left
    }
}

.f-banner-with-slider__card {
    position: relative
}

.f-banner-with-slider .f-mixed-layout {
    --column-gap-mobile: 16px
}

@media screen and (max-width: 767px) {
    .f-banner-with-slider .f-mixed-layout {
        margin-top: 16px
    }

    .f-banner-with-slider .f-mixed-layout .f-banner-with-slider__card {
        width: auto
    }

    .f-banner-with-slider .f-mixed-layout .f-banner-with-slider__card-img .f-image {
        width: 100%
    }
}

.f-banner-with-slider .f-slider-controls--bottom-left .swiper-pagination {
    transform: none !important;
    --pagination-offset-left: var(--f-padding-x, 50px)
}

@media screen and (max-width: 767px) {
    .f-banner-with-slider .f-slider-controls--bottom-left .swiper-pagination {
        --pagination-offset-left: var(--f-padding-mobile-x, 16px)
    }
}

@media screen and (min-width: 768px) {
    f-banner-with-slide {
        border-radius: var(--blocks-radius);
        overflow: hidden;
        -webkit-mask-image: -webkit-radial-gradient(white, black)
    }
}

@media screen and (max-width: 767px) {
    f-banner-with-slide .f-hover-box, f-banner-with-slide .f-slider {
        border-radius: var(--blocks-radius);
        overflow: hidden;
        -webkit-mask-image: -webkit-radial-gradient(white, black)
    }
}