.k20-slider {
	position: relative;
	padding-block: var(--k20-ritm-compact);
	background: var(--k20-fundal);
}

.k20-slider__track {
	display: flex;
	gap: var(--k20-s-4);
	margin: 0;
	padding: var(--k20-s-2) max(var(--k20-gutter), calc((100% - var(--k20-container)) / 2)) var(--k20-s-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(var(--k20-gutter), calc((100% - var(--k20-container)) / 2));
	scrollbar-width: thin;
	scrollbar-color: var(--k20-turcoaz-text) var(--k20-fundal-alt);
}

.k20-slider__track::-webkit-scrollbar {
	height: 0.5rem;
}

.k20-slider__track::-webkit-scrollbar-track {
	background: var(--k20-fundal-alt);
	border-radius: var(--k20-radius-full);
}

.k20-slider__track::-webkit-scrollbar-thumb {
	background: var(--k20-turcoaz-text);
	border-radius: var(--k20-radius-full);
}

@media (prefers-reduced-motion: no-preference) {
	.k20-slider__track {
		scroll-behavior: smooth;
	}
}

.k20-slider__track:focus-visible {
	outline: var(--k20-focus-width) solid var(--k20-focus);
	outline-offset: -3px;
}

.k20-slider .k20-slide {
	position: relative;
	display: flex;
	margin: 0;
	flex-direction: column;
	flex: 0 0 82%;
	min-width: 0;
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--k20-fundal-alt);
	border: 1px solid var(--k20-linie);
	border-radius: var(--k20-radius-lg);
	transition: box-shadow var(--k20-ease), border-color var(--k20-ease);
}

.k20-slider .k20-slide:hover {
	border-color: var(--k20-turcoaz-text);
	box-shadow: var(--k20-shadow);
}

.k20-slider .k20-slide:focus-within {
	outline: var(--k20-focus-width) solid var(--k20-focus);
	outline-offset: 2px;
}

.k20-slider .k20-slide .k20-ilustratie {
	border-radius: 0;
}

.k20-slider .k20-slide__title {
	margin: 0;
	padding: var(--k20-s-4) var(--k20-s-5);
	font-size: var(--k20-fs-h3);
	line-height: var(--k20-lh-tight);
	color: var(--k20-titlu);
}

.k20-slider .k20-slide__title a {
	color: inherit;
	text-decoration: none;
}

.k20-slider .k20-slide__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.k20-slider .k20-slide__title a:focus-visible {
	outline: none;
}

.k20-slider .k20-slide__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.k20-slider__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--k20-s-3);
	max-width: calc(var(--k20-container) + 2 * var(--k20-gutter));
	margin: var(--k20-s-4) auto 0;
	padding-inline: var(--k20-gutter);
}

.k20-slider__nav[hidden] {
	display: none;
}

.k20-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--k20-touch);
	min-height: var(--k20-touch);
	padding: 0;
	cursor: pointer;
	color: var(--k20-on-albastru);
	background: var(--k20-albastru);
	border: 2px solid var(--k20-albastru);
	border-radius: var(--k20-radius-full);
	transition: background-color var(--k20-ease), opacity var(--k20-ease);
}

.k20-slider__btn:hover {
	background: var(--k20-intunecat);
	border-color: var(--k20-intunecat);
}

.k20-slider__btn:focus-visible {
	outline: var(--k20-focus-width) solid var(--k20-focus);
	outline-offset: 3px;
}

.k20-slider__btn[aria-disabled="true"] {
	cursor: default;
	opacity: 0.4;
	background: var(--k20-albastru);
	border-color: var(--k20-albastru);
}

.k20-slider__btn svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 48em) {
	.k20-slider .k20-slide {
		flex-basis: calc((100% - var(--k20-s-4)) / 2);
	}
}

@media (min-width: 64em) {
	.k20-slider .k20-slide {
		flex-basis: calc((100% - 2 * var(--k20-s-4)) / 3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.k20-slider .k20-slide,
	.k20-slider__btn {
		transition: none;
	}
}

@media (scripting: enabled) {
	.k20-slider {
		padding-bottom: calc(var(--k20-ritm-compact) + var(--k20-touch) + var(--k20-s-4));
	}

	.k20-slider .k20-slider__nav {
		position: absolute;
		right: 0;
		bottom: var(--k20-ritm-compact);
		left: 0;
		margin: 0 auto;
	}
}
