.carousel {
	position: relative;
	display: flex;
}

.carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;

	display: flex;
	align-items: stretch;
	gap: 1rem;
	cursor: grab;
	user-select: none;
}

.carousel__viewport.is-dragging {
	scroll-behavior: auto;
}

.carousel__viewport:active {
	cursor: grabbing;
}

.carousel__viewport::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	scroll-snap-align: start;
	flex-shrink: 0;
}