/* @group Vision & Values
------------------------------------ */

.vision-and-values :is(.first-row) {
	margin-bottom: 5rem;
}

.vision-and-values .text-col .has-stats-font-size {
	--fw: 300;
}

.vision-and-values .image-col .bp-multimedia {
	height: 35rem;
	border-radius: 1rem;
	overflow: hidden;
	margin: 0 0 2rem;
}

@media only screen
and (min-width : 961px) {
	.vision-and-values :is(.first-row) {
		margin-bottom: 6rem;
	}
	.vision-and-values :is(.first-row) .image-col .bp-multimedia {
		height: 67.5rem;
	}
	.vision-and-values :is(.second-row) .image-col .bp-multimedia {
		height: 60rem;
	}
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
	.vision-and-values .text-col .has-stats-font-size {
		--fs: 5rem;
	}
	.vision-and-values .image-col {
		margin-bottom: 4rem;
	}
	.vision-and-values :is(.second-row) .image-col {
		order: -1;
	}
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .vision-and-values :is(.first-row, .second-row) .bp-column {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .vision-and-values :is(.first-row, .second-row).animateActive .bp-column {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
@media only screen
and (min-width : 961px) {
	:where(#wrapper) .vision-and-values :is(.first-row, .second-row) .bp-column:nth-child(1) {
 		--delay: 0.3s;
	}
	:where(#wrapper) .vision-and-values :is(.first-row, .second-row) .bp-column:nth-child(2) {
 		--delay: 0.6s;
	}
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
	:where(#wrapper) .vision-and-values :is(.first-row, .second-row).animateActive .bp-column {
		--delay: .3s;
	}
}