.dv-blocks-slider {
	--dv-bg-color: var(--dv-color-surface);
	--dv-blocks-slider-fallback-bg: #a9b69c;
	--dv-blocks-slider-muted-opacity: 0.48;
	--dv-blocks-slider-muted-grayscale: 45%;
	--dv-blocks-slider-offset: 0;

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

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

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

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

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

.dv-blocks-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-blocks-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-blocks-slider__sub-headline {
	color: var(--dv-color-muted);
	font-size: clamp(0.95rem, 2vw, 1.08rem);
	line-height: 1.55;
}

.dv-blocks-slider__active-title-wrap {
	margin-block-start: var(--dv-space-sm);
}

.dv-blocks-slider__active-title {
	color: var(--dv-color-text);
	font-family: var(--dv-font-heading);
	font-size: clamp(1.45rem, 3vw, 2rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.18;
}

.dv-blocks-slider__viewport {
	inline-size: 100%;
	min-inline-size: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	touch-action: pan-y;
}

.dv-blocks-slider__viewport::-webkit-scrollbar {
	display: none;
}

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

.dv-blocks-slider[data-dv-blocks-slider-ready="true"] .dv-blocks-slider__viewport {
	overflow: hidden;
}

.dv-blocks-slider.is-dragging .dv-blocks-slider__viewport {
	cursor: grabbing;
	user-select: none;
}

.dv-blocks-slider__track {
	--dv-blocks-slider-block-gap: clamp(1rem, 2vw, 1.5rem);
	--dv-blocks-slider-block-size: 86%;

	display: flex;
	gap: var(--dv-blocks-slider-block-gap);
	inline-size: 100%;
	min-inline-size: 100%;
	transform: translate3d(calc(var(--dv-blocks-slider-offset) * -1px), 0, 0);
	transition: transform 280ms ease;
	will-change: transform;
}

.dv-blocks-slider__block {
	display: grid;
	flex: 0 0 var(--dv-blocks-slider-block-size);
	gap: var(--dv-space-sm);
	min-inline-size: 0;
	transition:
		filter 200ms ease,
		opacity 200ms ease,
		transform 200ms ease;
}

.dv-blocks-slider__block.is-muted {
	filter: grayscale(var(--dv-blocks-slider-muted-grayscale));
	opacity: var(--dv-blocks-slider-muted-opacity);
	pointer-events: none;
}

.dv-blocks-slider__block.is-active {
	filter: none;
	opacity: 1;
	pointer-events: auto;
}

.dv-blocks-slider__block-title {
	color: var(--dv-color-text);
	font-family: var(--dv-font-heading);
	font-size: clamp(1.25rem, 2.4vw, 1.8rem);
	font-weight: 400;
	line-height: 1.2;
}

.dv-blocks-slider[data-dv-blocks-slider-ready="true"] .dv-blocks-slider__block-title {
	display: none;
}

.dv-blocks-slider__cards {
	display: flex;
	gap: var(--dv-space-md);
	min-inline-size: 0;
	overflow: hidden;
}

.dv-blocks-slider__card {
	--dv-blocks-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;
	flex: 0 0 100%;
	gap: var(--dv-space-sm);
	grid-template-rows: auto 1fr;
	min-block-size: 100%;
	min-inline-size: 0;
	overflow: hidden;
	padding: var(--dv-blocks-slider-card-padding);
}

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

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

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

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

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

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

.dv-blocks-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-blocks-slider__card-description {
	color: var(--dv-color-muted);
	font-size: clamp(0.94rem, 1.8vw, 1rem);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

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

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

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

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

.dv-blocks-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-blocks-slider__arrow:hover,
.dv-blocks-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-blocks-slider__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

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

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

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

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

@media (min-width: 768px) {
	.dv-blocks-slider__track {
		--dv-blocks-slider-block-size: 84%;
	}

	.dv-blocks-slider__cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}

	.dv-blocks-slider__card {
		flex-basis: auto;
	}
}

@media (min-width: 1024px) {
	.dv-blocks-slider__track {
		--dv-blocks-slider-block-size: 82%;
	}

	.dv-blocks-slider__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

	.dv-blocks-slider--no-mobile-preview .dv-blocks-slider__track {
		--dv-blocks-slider-block-size: 100%;
	}

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

@media (prefers-reduced-motion: reduce) {
	.dv-blocks-slider__track,
	.dv-blocks-slider__block,
	.dv-blocks-slider__arrow {
		transition: none;
	}
}
