/* @group Image & Dropdowns
------------------------------------ */

/* Image Col
-------------- */
.image-with-dropdowns .image-col .bp-multimedia {
	width: 21.3rem;
	height: 29.3rem;
	margin: 0 auto;
}

@media only screen
and (min-width : 961px) {
	/* Image Col
	-------------- */
	.image-with-dropdowns .image-col .bp-multimedia {
		width: calc(100% - 4.4rem);
		height: 54rem;
		margin: 0;
	}
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
	/* Image Col
	-------------- */
	.image-with-dropdowns .image-col {
		margin-bottom: 3.4rem;
	}
	/* Text Col
	-------------- */
	.image-with-dropdowns .text-col .title-box {
		text-align: center;
		padding-inline: 2rem;
	}
}

/* @end */


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