/* @group cards-slider
------------------------------------ */

.cards-slider {
	--_transition: 0.5s;
	max-width: 144rem;
	margin: auto;
}

.cards-slider :is(h2, h3) {
	text-transform: uppercase;
}

.cards-slider h2 {
	color: var(--marron);
}

.cards-slider h2 :is(span, #important) {
	color: inherit;
	font: inherit;
}

.cards-slider .splide__slide {
	padding: 0;
}

.cards-slider .splide__slide,
.cards-slider aside {
	position: relative;
	width: 100%;
	height: 100%;
	transition: var(--_transition);
}

.cards-slider video {
	position: absolute;
	inset: 0;
}

.cards-slider :is(.splide__slide, #important)::before {
	display: none;
}

.cards-slider .splide__slide article {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: var(--_transition);
}

.cards-slider :is(.wp-block-button, .wp-element-button) {
	width: 100%;
}

.cards-slider .hover {
	opacity: 0;
	transition: var(--_transition);
}
.cards-slider .splide__slide:is(.active, #important) .wp-block-button {
	opacity: 0;
	pointer-events: none;
}

@media only screen and (min-width: 961px) {
	.cards-slider :is(.splide__list, #important) {
		flex-wrap: nowrap;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.cards-slider :where(.hover) {
		pointer-events: none;
	}

	.cards-slider header {
		padding-bottom: 3.4rem;
	}

	.cards-slider .splide__slide:is(:hover, .active) .hover {
		opacity: 1;
		pointer-events: all;
	}
}

@media only screen and (min-width: 0) and (max-width: 960px) {
	.cards-slider {
		padding-bottom: 3rem;
	}
	.cards-slider .splide {
		padding: 0;
		margin: 0;
	}

	.cards-slider :is(h3, #important) {
		font-size: 2.8rem;
		line-height: 1.21em;
		letter-spacing: 0.05em;
	}

	.cards-slider .splide__list {
		display: flex;
	}

	.cards-slider .splide__track {
		padding-right: 25% !important;
	}

	.cards-slider .splide__slide {
		padding: 0;
	}

	.cards-slider .splide__slide .wp-block-button.hover {
		opacity: 1;
	}

	.cards-slider .splide__pagination {
		--_bttn-size: 0.8rem;
		bottom: calc(-4.5rem + var(--_bttn-size));
		gap: 1.2rem;
	}

	.cards-slider .splide__pagination__page {
		opacity: 1;
		background: var(--marron);
		width: var(--_bttn-size);
		height: var(--_bttn-size);
		padding: 0;
		margin: 0;
	}

	.cards-slider .splide__pagination__page.is-active {
		opacity: 1;
		background-color: var(--dorado);
	}
}

/* @end */