/* @group 2 Column Images & Content
------------------------------------ */

/* Only Image Col
-------------------- */
.two-columns-images-content .image-col .bp-multimedia {
    height: 45.3rem;
}
/* Image & Text Col
-------------------- */
.two-columns-images-content .image-text-col .bp-multimedia {
    height: 26.6rem;
}

@media only screen
and (min-width : 961px) {
    /* Only Image Col
    -------------------- */
    .two-columns-images-content .image-col .bp-multimedia {
        height: 100%;
    }
    /* Image & Text Col
    -------------------- */
    .two-columns-images-content .image-text-col .bp-multimedia {
        height: 33.1rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    /* Only Image Col
    -------------------- */
    .two-columns-images-content .image-col {
        margin-bottom: 1.5rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .two-columns-images-content :is(.image-col, .image-text-col) {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .two-columns-images-content.animateActive :is(.image-col, .image-text-col) {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .two-columns-images-content.animateActive :is(.image-col) {
    --delay: 0.3s;
}
:where(#wrapper) .two-columns-images-content.animateActive :is(.image-text-col) {
    --delay: 0.6s;
}