.banner-with-description {
	position: relative;
}
.banner-with-description .wp-block-bp-core-bp-row {
	position: relative;
	height: 62.3rem;
	overflow: hidden;
}
/* CONTENT */
.banner-with-description .col-content {
	padding-top: 7.4rem;
}
/* IMAGE */
.banner-with-description .col-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.banner-with-description .col-image .bp-multimedia {
	border-radius: 2.5rem;
	overflow: hidden;
	height: 100%;
}
.banner-with-description .col-image .bp-multimedia .img-box {
	display: block;
}
.banner-with-description .col-image .bp-multimedia img {
	width: 100%;
	height: 100%;
	object-position: left center!important;
}
@media only screen
and (min-width : 961px) {
	.banner-with-description .wp-block-bp-core-bp-row {
		height: 54.6rem;
	}
	/* CONTENT */
	.banner-with-description .col-content {
		padding-top: 0;
	}
	.banner-with-description h2.wp-block-heading {
		--fs: 4rem;
		--lh: 1em;
		--ls: .005em;
	}
	.banner-with-description .col-content p {
		--fs: 2rem;
	}
	/* IMAGE */
	.banner-with-description .col-image .bp-multimedia {
		width: 100%;
		height: 100%;
	}
	.banner-with-description .col-image .bp-multimedia img {
		object-position: left center!important;
	}
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
	.banner-with-description .col-image {
		width: calc(100% - 2.8rem);
		left: 1.4rem;
	}

	.banner-with-description + .engagement-and-call-to-action {
		padding-top: 10rem;
	}
}

/* @end */

:where(.editor-styles-wrapper) .banner-with-description .wp-block-bp-core-bp-row {
	height: 584px;
}
:where(.editor-styles-wrapper) .banner-with-description .wp-block-bp-core-bp-row > .block-editor-inner-blocks,
:where(.editor-styles-wrapper) .banner-with-description .wp-block-bp-core-bp-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
	height: 100%;
}


/* Animations
------------------------------------ */
:where(#wrapper) .banner-with-description :is(.col-image, .col-content) {
	opacity: 0;
	--duration: .5s;
}
:where(#wrapper) .banner-with-description.animateActive :is(.col-image, .col-content) {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .banner-with-description.animateActive :is(.col-image) {
	--delay: .5s;
}
:where(#wrapper) .banner-with-description.animateActive :is(.col-content) {
	--delay: .8s;
}