.ee-content-carousel.ee-content-carousel {
	position: relative;
	margin: 0;
	max-width: 1920px;
	margin-inline: auto;
}

.ee-content-carousel picture {
	display: contents;
}

.ee-content-carousel img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 781px) {
	.ee-content-carousel .desktop {
		display: none;
	}
}
@media only screen and (min-width: 782px) {
	.ee-content-carousel .mobile {
		display: none;
	}
}

.ee-content-carousel a {
	position: absolute;
	inset: 0;
}

.ee-content-carousel .screen-reader-text {
	position: absolute;
	left: -9999px;
}

.ee-content-carousel .controls {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.ee-content-carousel .controls button {
	pointer-events: all;
	touch-action: manipulation;
}

.ee-content-carousel .controls .arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	cursor: pointer;
	background: none;
	border: none;
	color: var(--carousel-color, white);
	filter: drop-shadow(0 0 4px black);
}

.ee-content-carousel .controls .right {
	right: 0;
}

.ee-content-carousel .controls .left {
	left: 0;
}

.ee-content-carousel a:focus {
	border: 2px solid currentColor;
	box-shadow: inset 0 0 10px 5px black;
}

.ee-content-carousel .play-pause {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: hsla(0, 0%, 75%, 0.85);
	color: black;
	border: none;
	padding: 0.5em 1em;
	cursor: pointer;
	display: none;
	z-index: 1;
	border-radius: 0.25em;
	border: 2px solid white;
	font-weight: bold;
}

.ee-content-carousel:hover .play-pause,
.ee-content-carousel:focus-within .play-pause {
	display: block;
}

.ee-content-carousel .slides {
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	scroll-snap-type: x mandatory;
	font-size: 0;
	/* hide scroll bars */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
}

.ee-content-carousel .slides::webkit-scrollbar {
	/* hide scrollbar for WebKit */
	width: 0;
	height: 0;
}

.ee-content-carousel .slide {
	position: relative;
	display: inline-block;
	width: 100%;
	scroll-snap-align: start;
	font-size: 1rem;
}

.ee-content-carousel .dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 1ch;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 1;
}

.ee-content-carousel:hover .dots,
.ee-content-carousel:focus-within .dots {
	opacity: 1;
}

.ee-content-carousel .dot {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: hsl(0, 0%, 65%);
	border: 0.25em solid white;
	cursor: pointer;
}

.ee-content-carousel .dot[aria-current] {
	background: var(--carousel-dot-color, white);
}

@media only screen and (max-width: 600px) {
	.ee-content-carousel .play-pause.play-pause {
		display: none;
	}
}