[data-carousel] {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;

	> * {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	&:hover {
		scrollbar-color: var(--col-accent) transparent;
	}
}

[data-carousel="left"] > * {
	scroll-snap-align: left;
}

[data-carousel="right"] > * {
	scroll-snap-align: right;
}