/* ABOUTME: Base styles for horizontal slider sections with snap scrolling. */
/* ABOUTME: Handles the scrollable container, item sizing, and responsive breakpoints. */
.content_wrapper--slider {
	--half-outer-margin: max(
		calc((100% - (var(--max-content-width))) / 2),
		var(--outer-margin)
	);

	width: auto;
	position: relative;
	display: flex;
	gap: var(--column-gap);
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-left: var(--half-outer-margin);
	padding-right: var(--half-outer-margin);
	scroll-padding-inline-start: var(--half-outer-margin);
	scroll-padding-inline-end: var(--half-outer-margin);
	padding-bottom: 3px; /* only for the font, so it does not get cut off at the bottom */
}

.content_wrapper--slider::-webkit-scrollbar {
	scrollbar-width: none;
	display: none;
}

.content_wrapper--slider.no-scroll-snap {
	scroll-snap-type: none;
}

.content_wrapper--slider .item {
	flex: none;
	scroll-snap-align: start;
	width: 85%;

	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media screen and (max-width: 767px) {
	.content_wrapper--slider {
		gap: calc(var(--column-gap) * 6);
	}
	.content_wrapper--slider.items-count-2 .item {
		width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.content_wrapper--slider .item {
		width: 45%;
	}
}

@media screen and (min-width: 1024px) {
	.content_wrapper--slider .item {
		width: 30%;
	}
}
@media screen and (min-width: 1280px) {
	.content_wrapper--slider .item {
		width: 23%;
	}
	.content_wrapper--slider.items-count-4 .item {
		flex: 1;
	}
}

@media screen and (min-width: 1024px) {
	.content_wrapper--slider.items-count-3 .item {
		flex-basis: 100%;
		flex: 1;
	}
}

.content_wrapper--slider.items-count-2 {
	flex-direction: column;
}

.content_wrapper--slider.items-count-2 .item {
	flex-basis: 100%;
	flex: 1;
}

@media screen and (min-width: 1024px) {
	.content_wrapper--slider.items-count-2 {
		flex-direction: row;
	}
	.content_wrapper--slider.items-count-2 .item {
		flex-direction: column;
	}
	.content_wrapper--slider.items-count-2 .item:last-child {
		flex-direction: column;
	}
}