.caroussel-container{
	width: 100%;
	position: relative;
	box-sizing: content-box;
}

.caroussel-slider{
	overflow: clip;
	border-radius: 10px;
	width: 100%;
}

.caroussel-items{
	display: flex;
	gap: 10px;
	padding-right: 10px;
	cursor: grab;
}

.caroussel-items[caroussel-scrolling]{
	cursor: grabbing;
}

.caroussel-item{
	border-radius: 10px;
	overflow: clip;
	user-select: none;
	flex: 1 1 0;
}

.caroussel-item img{
	max-width: 100%;
	display: block;
}

.caroussel-item video{
	max-width: 100%;
	display: block;
}

.caroussel-selects{
	position: absolute;
	display: flex;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	gap: 7px;
}

.caroussel-select{
	width: 10px;
	height: 10px;
	border-radius: 100%;
	border: 2px solid #fff;
	background-color: white;
	box-shadow: 0 0 10px rgb(12, 12, 12);

	cursor: pointer;

	transition:
		transform 0.1s;
}

[caroussel-selected]{
	transform: scale(1.3);
}

@media (hover: hover) {
	.caroussel-select:hover { transform: scale(1.3); }
}

.caroussel-left, .caroussel-right{
	cursor: pointer;

	border: 2px solid #fff;
	background-color: transparent;
	box-shadow: 0 0 10px rgb(12, 12, 12);
	position: absolute;
	top: 50%;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	transform: translateY(-50%);

	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 10;

	transition:
		transform 0.2s;
}

.caroussel-left{
	left: 5px;
}
.caroussel-right{
	right: 5px;
}

.caroussel-left:hover, .caroussel-right:hover{
	transform: translateY(-50%) scale(1.2);
}

.caroussel-left > .caroussel-arrow{
	display: flex;
	transform: translateX(-2px);
}

.caroussel-right > .caroussel-arrow{
	display: flex;
	transform: translateX(2px);
}

.caroussel-arrow{
	color: white;
}

scroll-caroussel{
	display: block;
}