.dv-cards-slider {
	--dv-bg-color: var(--dv-color-surface);
	--dv-card-fallback-bg: #a9b69c;

	color: var(--dv-color-text);
	inline-size: 100%;
	overflow-x: clip;
	padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem);
}

.dv-cards-slider__inner {
	display: grid;
	gap: var(--dv-space-lg);
	margin-inline: auto;
	max-inline-size: var(--dv-container-wide);
	min-inline-size: 0;
}

.dv-cards-slider__intro {
	display: grid;
	gap: var(--dv-space-xs);
	max-inline-size: 760px;
	min-inline-size: 0;
}

.dv-cards-slider--intro-center .dv-cards-slider__intro {
	justify-self: center;
	text-align: center;
}

.dv-cards-slider__pre-headline,
.dv-cards-slider__headline,
.dv-cards-slider__sub-headline,
.dv-cards-slider__card-title,
.dv-cards-slider__card-description {
	margin: 0;
}

.dv-cards-slider__pre-headline {
	color: var(--dv-color-forest);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dv-cards-slider__headline {
	color: var(--dv-color-text);
	font-family: var(--dv-font-heading);
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.08;
}

.dv-cards-slider__sub-headline {
	color: var(--dv-color-muted);
	font-size: clamp(0.95rem, 2vw, 1.08rem);
	line-height: 1.55;
}

.dv-cards-slider__viewport {
	inline-size: 100%;
	min-inline-size: 0;
	overflow: hidden;
}

.dv-cards-slider__track {
	--dv-cards-slider-gap: var(--dv-space-md);
	--dv-cards-slider-card-size: min(86%, 22rem);

	align-items: stretch;
	display: flex;
	gap: var(--dv-cards-slider-gap);
	inline-size: 100%;
	min-inline-size: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding-block-end: 0.25rem;
	scroll-behavior: smooth;
	scroll-padding-inline: 1px;
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.dv-cards-slider__track::-webkit-scrollbar {
	display: none;
}

.dv-cards-slider[data-dv-drag-enabled="true"] .dv-cards-slider__track {
	cursor: grab;
}

.dv-cards-slider.is-dragging .dv-cards-slider__track {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.dv-cards-slider__card {
	--dv-cards-slider-card-padding: clamp(0.55rem, 1.4vw, 0.8rem);

	background-color: var(--dv-color-ivory);
	border: 1px solid var(--dv-color-border);
	border-radius: var(--dv-radius-md);
	color: inherit;
	display: grid;
	gap: var(--dv-space-sm);
	flex: 0 0 var(--dv-cards-slider-card-size);
	grid-template-rows: auto 1fr;
	min-block-size: 100%;
	min-inline-size: 0;
	overflow: hidden;
	padding: var(--dv-cards-slider-card-padding);
	scroll-snap-align: start;
}

.dv-cards-slider__media {
	aspect-ratio: 3 / 4;
	border-radius: calc(var(--dv-radius-md) - 2px);
	inline-size: 100%;
	overflow: hidden;
	position: relative;
}

.dv-cards-slider__media--video {
	aspect-ratio: 9 / 16;
}

.dv-cards-slider__media--image,
.dv-cards-slider__media--none {
	aspect-ratio: 3 / 4;
}

.dv-cards-slider__media-inner {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
		var(--dv-card-fallback-bg);
	block-size: 100%;
	inline-size: 100%;
}

.dv-cards-slider__media img,
.dv-cards-slider__media video,
.dv-cards-slider__media-fallback {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.dv-cards-slider__body {
	align-content: start;
	display: grid;
	gap: var(--dv-space-xs);
	min-inline-size: 0;
	padding: 0;
}

.dv-cards-slider__card-title {
	color: var(--dv-color-text);
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.dv-cards-slider__card-description {
	color: var(--dv-color-muted);
	font-size: clamp(0.94rem, 1.8vw, 1rem);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.dv-cards-slider__nav {
	align-items: center;
	display: flex;
	gap: var(--dv-space-xs);
}

.dv-cards-slider--arrows-left .dv-cards-slider__nav {
	justify-content: flex-start;
}

.dv-cards-slider--arrows-center .dv-cards-slider__nav {
	justify-content: center;
}

.dv-cards-slider--arrows-right .dv-cards-slider__nav {
	justify-content: flex-end;
}

.dv-cards-slider__arrow {
	align-items: center;
	appearance: none;
	background-color: var(--dv-color-ivory);
	border: 1px solid var(--dv-color-border);
	border-radius: 50%;
	color: var(--dv-color-text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	inline-size: 44px;
	block-size: 44px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}

.dv-cards-slider__arrow:hover,
.dv-cards-slider__arrow:focus-visible {
	background-color: var(--dv-color-forest);
	border-color: var(--dv-color-forest);
	color: var(--dv-color-ivory);
	transform: translateY(-1px);
}

.dv-cards-slider__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dv-cards-slider__arrow[disabled] {
	cursor: default;
	opacity: 0.42;
	pointer-events: none;
	transform: none;
}

.dv-cards-slider__arrow-icon {
	align-items: center;
	display: inline-flex;
	font-size: 0.95rem;
	justify-content: center;
	line-height: 1;
}

.dv-cards-slider__arrow-icon svg {
	block-size: 1em;
	display: block;
	fill: currentColor;
	inline-size: 1em;
}

.dv-cards-slider__arrow--prev .dv-cards-slider__arrow-icon {
	transform: rotate(180deg);
}

@media (min-width: 768px) {
	.dv-cards-slider__track {
		--dv-cards-slider-card-size: calc((100% - (var(--dv-cards-slider-gap) * 1.35)) / 2.35);
	}
}

@media (min-width: 1024px) {
	.dv-cards-slider__track {
		--dv-cards-slider-card-size: calc((100% - (var(--dv-cards-slider-gap) * 2.35)) / 3.35);
	}
}

@media (max-width: 767px) {
	.dv-cards-slider {
		padding-inline: clamp(1rem, 5vw, 1.5rem);
	}

	.dv-cards-slider--no-mobile-preview .dv-cards-slider__track {
		--dv-cards-slider-card-size: 100%;
	}

	.dv-cards-slider__nav {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dv-cards-slider__track {
		scroll-behavior: auto;
	}

	.dv-cards-slider__arrow {
		transition: none;
	}
}