/** @format */
.acf_section_references {
	--scroll-padding-calculation: calc((100vw + (2 * var(--wrapper-padding)) - min(100vw, 1800px)) / 2);
}
.slider__container {
	width: 100%;
	overflow: auto;
	-ms-overflow-style: none;
	/* scrollbar-width: none; */
	scroll-snap-type: x mandatory;
	scroll-padding: var(--scroll-padding-calculation);
}

.slider__container.single {
	padding: calc(var(--universal-gap) * 2) 0;
}

.slider__container.multi {
	padding: calc(var(--universal-gap) * 2) var(--scroll-padding-calculation);
}

.slider__container::-webkit-scrollbar {
	display: block;
	height: 40px;
}

.slider__container::-webkit-scrollbar-track {
	background: var(--color-grey);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 45%, var(--color-grey) 45%, var(--color-grey) 55%, rgba(0, 0, 0, 0) 55%);
	width: 50%;
	margin-right: calc((100vw + (12 * var(--wrapper-padding)) - min(100vw, 1800px)) / 2);
	margin-left: var(--scroll-padding-calculation);
}

.slider__container::-webkit-scrollbar-thumb {
	background: var(--color-black-blue);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 45%, var(--color-black-blue) 45%, var(--color-black-blue) 55%, rgba(0, 0, 0, 0) 55%);
}

.slides {
	display: flex;
	width: auto;
	gap: var(--universal-gap);
	width: max-content;
}

.slide {
	width: 100%;
	max-width: clamp(250px, 22vw, 400px);
	height: auto;
	scroll-snap-align: start;
	overflow: hidden;
	position: relative;
}

.slide__contents {
	background-color: var(--color-black);
	display: grid;
	align-items: center;
	gap: var(--universal-gap);
}

.slide__image {
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1.15;
	overflow: hidden;
	grid-area: 1 / 1 / 1 / 1;
}

.slide__text {
	grid-area: 1 / 1 / 1 / 1;
	align-self: end;
}

.slider_arrows__container {
	position: absolute;
	right: var(--scroll-padding-calculation);
	transform: translateY(calc(-50% - 20px));
}

.slider_arrows__container.inactive {
	display: none;
}

.slider__arrows {
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: end;
	gap: 1em;
}

.slider__arrow {
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--universal-gap) / 4);
	pointer-events: none;
	cursor: pointer;
	transition: all 300ms ease;
	border-radius: 50%;
	color: var(--color-grey);
	font-size: 1.5em;
}

.slider__arrow--left .icon--left::after {
	content: var(--arrow-left);
}
.slider__arrow--right .icon--right::after {
	content: var(--arrow-right);
}

.reference_wrapper {
	padding: 0 var(--wrapper-padding);
}

.slider__arrow.active {
	pointer-events: all;
	color: var(--color-black-blue);
	visibility: visible;
}

@media screen and (max-width: 400px) {
	.slider__container::-webkit-scrollbar-track {
		margin-right: var(--scroll-padding-calculation);
	}

	.slider_arrows__container {
		display: none;
	}
}
@media screen and (max-width: 800px) {
	.slide__contents {
		flex-direction: column;
		text-align: center;
	}

	.slider__arrow {
		border: none;
	}
}
@supports (-moz-appearance: none) {
	.slider__container {
		scrollbar-width: none;
		scrollbar-color: var(--color-black-blue) var(--color-grey);
	}
	.slider_arrows__container {
		position: absolute;
		right: var(--scroll-padding-calculation);
		transform: none;
	}
}