.ls-curved-carousel {
	--viewport-height: 70rem;
	--viewport-height-m: 35rem;
	--perspective: 600px;
	--perspective-m: 400px;
	--block-offset: -18rem;
	--block-offset-m: -6rem;
	/*You can add a fadeout effect by adding a class named "fadeout" to ls-curved-carousel*/
}

.ls-curved-carousel.fadeout {
	--fadeout: linear-gradient(90deg, transparent, white 20%, white 80%, transparent 100%);
}

.ls-curved-carousel {
	--fadeout: none;
}

body.bricks-is-frontend .ls-curved-carousel {
	position: relative;
	width: 100%;
	height: var(--viewport-height);
	transform-style: preserve-3d;
	user-select: none;
	overflow: visible;
	z-index: 1;
	margin-block: var(--block-offset);
}

body.bricks-is-frontend .ls-curved-carousel__stage {
	perspective: var(--perspective);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.ls-curved-carousel {
	-webkit-mask-image: var(--fadeout);
	mask-image: var(--fadeout);
}

@media (max-width:767px) {
	body.bricks-is-frontend .ls-curved-carousel {
		height: var(--viewport-height-m);
		margin-block: var(--block-offset-m);
	}
	body.bricks-is-frontend .ls-curved-carousel__stage {
		perspective: var(--perspective-m);
	}
}

body.bricks-is-frontend .ls-curved-carousel__ring {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	gap: 0;
}

body:not(.bricks-is-frontend) .ls-curved-carousel__ring {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

body.bricks-is-frontend .ls-curved-carousel__slide {
	position: absolute;
	/* Width and height will be set by JavaScript */
	transform-style: preserve-3d;
	overflow: hidden;
}

.ls-curved-carousel__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
	position: relative;
	z-index: -1;
}