/* @group Description With Video
------------------------------------ */ 

.description-with-video .columns-row .bp-multimedia {
	width: 100%;
	height: auto;
}
.description-with-video .columns-row .bp-multimedia:has(video)::before {
	content: '';
	width: 4.1rem;
	height: 4.1rem;
	background: no-repeat url('../../img/global/icons/play.svg') center center;
	background-size: contain;
	position: absolute;
	z-index: var(--z-index-lowest);
	pointer-events: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
	transition: all .1s ease;
}
.description-with-video .columns-row .bp-multimedia:has(video).hide-icon-play::before {
	opacity: 0;
}

@media only screen
and (min-width : 961px) {
	.description-with-video .columns-row .bp-multimedia:has(video):not(.hide-icon-play) {
		cursor: pointer;
	}
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
	.description-with-video .columns-row .bp-column:has(.bp-multimedia) {
		order: -1;
		margin-bottom: 4rem;
	}
	.description-with-video .columns-row p:is(.has-paragraph-large-font-size) {
		--fs: 1.6rem;
		--lh: 1.25em;
	}
}
/* @end */


/* ANIMATIONS */
:where(#wrapper) .description-with-video :is(.bp-column) {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .description-with-video.animateActive :is(.bp-column) {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
	--delay: 0.3s;
}
/* @end */