/* CSS ONLY CAROUSEL */
.carousel {
	width: 100% !important;
	overflow-x: auto !important;
	margin: 3em auto !important;
	display: flex !important;
	gap: 1em !important;
	scroll-behavior: smooth !important;
	anchor-name: --carousel;
	scroll-snap-type: x mandatory;
	scroll-marker-group: after;
}
.carousel::scroll-marker-group {
	display: flex;
	justify-content: center;
	gap: .5em;
}
.carousel-card::scroll-marker {
	content: "";
	height: 1em;
	width: 1em;
	background-color: var(--neutral-300);
	border-radius: 50%;
}

.carousel-card::scroll-marker:target-current {
	background-color: var(--brand-primary);
}
.carousel::-webkit-scrollbar {
	display: none !important;
}
.carousel::scroll-button(right), .carousel::scroll-button(left) {
	content: '>' !important;
	border: none !important;
	background-color: var(--brand-primary) !important;
	font-size: 3rem !important;
	color: var(--neutral-0) !important;
	height: 60px !important;
	width: 60px !important;
	border-radius: 50% !important;
	padding-bottom: .1em !important;
	cursor: pointer !important;
	position: fixed;
	position-anchor: --carousel;
	position-area: right center;
	translate: -50%;
}
.carousel::scroll-button(left) {
	content: '<' !important;
	position-area: left center;
	translate: 50%;
}
.carousel::scroll-button(right):disabled, .carousel::scroll-button(left):disabled {
	opacity: 0.5;
	cursor: auto;
}
.carousel-card {
	scroll-snap-align: start;
	flex: 0 0 20 !important;
	height: 12em !important;
	/*aspect-ratio: 5 / 3;*/
	background-color: var(--brand-primary) !important;
	padding: 1em !important;
	border-radius: .5em !important;
	text-align: center !important;
	align-content: center !important;
}
@media (max-width: 500px) {
	.carousel-card {
		flex: 0 0 100% !important; /*on mobile devices only one card will be shown */
	}
}