/*********************************************
 * Image with Content
**********************************************/
.bb-image-content__col.image {width:46%;}
.bb-image-content__col.content {width:54%;}

.bb-image-content__image {border-radius:var(--bb-radius); aspect-ratio:432/471;}

/*********************************************
 * Layout: Default
**********************************************/
/* content */
.layout-default .bb-image-content__content {
    max-width:475px;
}


/* horizontal section */
.layout-default.is-horizontal .bb-image-content__image {aspect-ratio:510/407;}

@media only screen and (min-width:769px) {
    .layout-default.is-vertical .bb-image-content__col.image {width:41%;}
    .layout-default.is-vertical .bb-image-content__col.content {width:59%;}


}

/*********************************************
 * Layout: Blue background
**********************************************/
.layout-has-blue-bg {
    background:var(--bb-color-blue);
    border-radius:var(--bb-radius);
}
.layout-has-blue-bg .bb-image-content__image {aspect-ratio:510/552;}
.layout-has-blue-bg .bb-image-content__content {max-width:434px;}

.layout-has-blue-bg .bb-image-content__col.content {
    padding-top:calc(var(--bb-gap-container) + 5px);
    padding-bottom:calc(var(--bb-gap-container) + 5px);
}

/*********************************************
 * Image position
**********************************************/
@media only screen and (min-width:769px) {
    /* Image position left */
    .image-position-left .bb-image-content__col.content {padding-left:var(--bb-gap-container);}
    .image-position-left .bb-image-content__content {margin-left:auto;}

    /* Image position right */
    /* vertical section */
    .layout-default.is-vertical {padding-right:var(--bb-gap-container);}

    .image-position-right .bb-image-content__col.content {padding-right:var(--bb-gap-container);}
    .image-position-right .bb-image-content__content {margin-right:auto;}
    .image-position-right .bb-image-content__inner {flex-direction:row-reverse;}

    /* blue background section (desktop only) */
    .layout-has-blue-bg.image-position-right .bb-image-content__col.content {
        padding-left:clamp(var(--bb-gap-container), 5vw, 70px);
    }
    .layout-has-blue-bg.image-position-left .bb-image-content__col.content {
        padding-right:clamp(var(--bb-gap-container), 5vw, 70px);
    }
}

@media only screen and (max-width:1023px) {
    .layout-has-blue-bg.image-position-right .bb-image-content__col.content {
        padding-left:var(--bb-gap-container);
    }
    .layout-has-blue-bg.image-position-left .bb-image-content__col.content {
        padding-right:var(--bb-gap-container);
    }
}

/*********************************************
 * Responsive
**********************************************/
@media only screen and (max-width:768px) {
    .bb-image-content .bb-image-content__col.image,
    .bb-image-content .bb-image-content__col.content {width:100%;}

    .bb-image-content__col.content {text-align:center;}

    .bb-image-content .bb-image-content__inner {
        gap:calc(var(--bb-spacing-heading) + 8px);
        flex-direction:column;
    }


    .mobile-order-reverse .bb-image-content__col.content {order:-1;}

    /* center block with max-width */
    .bb-image-content__image,
    .bb-image-content__content {margin-left:auto;margin-right:auto;}

    /* blue background section (mobile only) */
    .bb-image-content {
        max-width:520px;
        margin-left:auto; margin-right:auto;
    }


    .bb-image-content.layout-has-blue-bg .bb-image-content__col.content {
        padding:0 var(--bb-gap-container);
    }
    .layout-has-blue-bg .bb-image-content__inner:before {content:""; order:-99;}
    .layout-has-blue-bg.mobile-order-default .bb-image-content__inner:before {order:99;}


}