/* @group Layout Of Banners
------------------------------------ */

.layout-banners {
    position: relative;
}
.layout-banners :is(.title-col, .images-col) {
    z-index: var(--z-index-lowest);
}
.layout-banners .images-col .image-box {
    width: 100%;
}
.layout-banners .images-col .image-box:not(:last-of-type) {
    margin-bottom: 6rem;
}
.layout-banners .images-col .image-box .bp-multimedia {
    height: 20rem;
} 
.layout-banners .background-image .bp-multimedia {
    width: 100%;
    height: 100%;
}
.layout-banners .background-image .bp-multimedia:not(.mobile) img {
    object-position: left bottom;
}
.layout-banners .background-image .bp-multimedia:is(.mobile) img {
    object-position: right bottom;
}

.layout-banners .background-image.full .bp-multimedia {
    max-height: 144rem;
}

@media only screen
and (min-width : 961px) {
    .layout-banners .title-col {
        text-align: center;
    }
    .layout-banners .images-col .image-box:not(:last-of-type) {
        margin-bottom: 6.6rem;
    }
    .layout-banners .images-col .image-box .bp-multimedia {
        height: 57.5rem;
    }  
    .layout-banners .background-image {
        position: absolute;
        pointer-events: none;
        inset: 0;
        z-index: 0;
    }

    .layout-banners .background-image.full {
        bottom: unset;
        height: 110rem;
        width: 100%;
    }
    .layout-banners .background-image.full .bp-multimedia {
        max-height: 110rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .layout-banners .title-col :is(.wp-block-heading, .wp-block-paragraph ) {
        text-align: start;
    }
    .layout-banners .background-image .bp-multimedia {
        position: absolute;
        pointer-events: none;
        inset: 0;
        z-index: 0;
    }

    .layout-banners .background-image.full .bp-multimedia {
        bottom: unset;
    }
    .layout-banners .background-image.full .bp-multimedia {
        max-height: 135rem;
    }

    .layout-banners.mobile-layout .image-box:first-child{
        padding-left: 6.8rem;
    }

    .layout-banners.mobile-layout .image-box:last-child{
        padding-right: 6.8rem;
    }
}

/* @end */