/* @group Example
------------------------------------ */

.three-cards-with-title .slide-overlap a.bp-group {
    text-decoration: none;
    width: 100%;
    height: 100%;
} 
.three-cards-with-title :is(.splide__slide, #important) {
	height: 60rem;
}
.three-cards-with-title .splide__slide :is(.img-box, .bp-multimedia) {
	height: 100%;
}
.three-cards-with-title .splide__slide .bp-multimedia {
	position: relative;
}
.three-cards-with-title .splide__slide .bp-multimedia::before {
	content: "";
	position: absolute;
	z-index: var(--z-index-lowest);
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(36, 36, 44, 0.65) 0%, rgba(36, 36, 44, 0.65) 100%);
	background-blend-mode: multiply, normal;
}
.three-cards-with-title .splide__slide .slide-overlap {
	color: var(--linen);
	height: 100%;
	inset: 0;
	z-index: calc(var(--z-index-lowest) + 1);
	align-items: center;
	justify-content: center;
	text-align: center;
}
.three-cards-with-title .splide__slide .slide-overlap .has-paragraph-subheader-font-size {
	text-transform: uppercase;
}
.three-cards-with-title .splide__pagination {
	position: static;
	justify-content: flex-start;
	padding: 0;
	margin-top: 1.5rem;
}
.three-cards-with-title .splide__pagination .splide__pagination__page {
	background: transparent;
	border: 1px solid var(--midnight-musings);
	width: 1.5rem;
	height: 1.5rem;
}
@media only screen and (min-width: 961px) {
	.three-cards-with-title .splide__list {
		display: flex !important;
		gap: 2rem;
		flex-wrap: wrap;
	}
	.three-cards-with-title :is(.splide__slide, #important) {
		flex: 0 1 calc(33% - 2rem);
		height: 65rem;
	}
	.three-cards-with-title .splide__slide .slide-overlap .bp-group {
		padding-inline: 6rem;
	}
	.three-cards-with-title .splide__slide .slide-overlap .has-paragraph-subheader-font-size {
		--fs: 2.8rem;
		--ls: 0.142em;
	}
	.three-cards-with-title .splide__slide .slide-overlap .has-paragraph-body-copy-font-size {
		--fs: 1.6rem;
		--ls: 0.0625em;
	}
}
@media only screen and (min-width: 961px) and (max-width: 1440px) {
}
@media only screen and (min-width: 0) and (max-width: 960px) {
	.three-cards-with-title :is(.row, #important) {
		--row-mobile-padding: 0;
	}
	.three-cards-with-title :is(.text-col, #important),
	.three-cards-with-title :is(.title-col, #important) {
		padding-inline: var(--wp--custom--row--padding-mobile) !important;
	}
	.three-cards-with-title :is(.cards-col, #important) {
		padding-left: var(--wp--custom--row--padding-mobile) !important;
	}
	.three-cards-with-title .splide__track {
		padding-right: var(--wp--custom--row--padding-mobile) !important;
	}

	.three-cards-with-title .cards-col {
		order: -1;
	}
    .three-cards-with-title p {
        max-width: 30.7rem;
    }
}

/* @end */

.editor-styles-wrapper .three-cards-with-title .splide__slide .slide-overlap * {
	color: var(--linen);
}

/* ANIMATION */
:where(#wrapper)
	.three-cards-with-title
	:is(
		h2,
		.wp-block-bp-core-bp-slide,
		.wp-block-bp-core-bp-column > .has-paragraph-body-copy-font-size,
		.wp-block-bp-core-bp-column > .wp-block-bp-core-bp-button
	) {
	opacity: 0;
}
:where(#wrapper)
	.three-cards-with-title.animateActive
	:is(
		h2,
		.wp-block-bp-core-bp-slide,
		.wp-block-bp-core-bp-column > .has-paragraph-body-copy-font-size,
		.wp-block-bp-core-bp-column > .wp-block-bp-core-bp-button
	) {
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .three-cards-with-title.animateActive h2 {
	animation: fadeLeft var(--anim-duration) ease forwards;
	--delay: 0.3s;
}
:where(#wrapper) .three-cards-with-title.animateActive .wp-block-bp-core-bp-slide {
	animation: fade var(--anim-duration) ease forwards;
	--delay: 0.6s;
}

:where(#wrapper)
	.three-cards-with-title.animateActive
	.wp-block-bp-core-bp-column
	> .has-paragraph-body-copy-font-size {
	animation: fadeLeft var(--anim-duration) ease forwards;
	--delay: 0.9s;
}
:where(#wrapper) .three-cards-with-title.animateActive .wp-block-bp-core-bp-column > .wp-block-bp-core-bp-button {
	animation: fadeLeft var(--anim-duration) ease forwards;
	--delay: 1.2s;
}
