/* Hide the warning by default */
#unsupported-carousel-notice {
	display: none;
}

/* Only show it if the browser does NOT support scroll-button */
@supports not (selector(::scroll-button(*))) {
	#unsupported-carousel-notice {
		display: block;
	}
}

.carousel > ul {
	width: 100%;
	max-height: 750px;
	display: flex;
	gap: 4vw;
	scroll-behavior: smooth;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	anchor-name: var(--carousel-anchor, --my-carousel);
	scroll-marker-group: after;
	margin-bottom: 30px;
	align-items: center;
	margin-left: 0px;
}

.carousel > ul > li {
	max-height: inherit;
	display: flex;
	scroll-snap-align: center;
	flex: 0 0 100%;
	justify-content: center;
}

.carousel > ul > li > figure {
	display: flex;
	flex-direction: column;
	max-width: 100%;
}

.carousel > ul > li > figure > img {
	max-width: 100%;
	max-height: calc(100% - 30px);
	margin: auto;
	object-fit: contain;
}

.carousel > ul > li > img {
	max-width: 100%;
	max-height: 730px;
	margin: auto;
}

.carousel > ul::scroll-button(*) {
	border-color: #6e4fea3f;
	border-radius: 50%;
	font-size: 2rem;
	background-color: #6e4fea24;
	color: #6e4fea;
	opacity: 0.7;
	cursor: pointer;
	position: absolute;
	position-anchor: var(--carousel-anchor, --my-carousel);
}

.carousel > ul::scroll-button(*):hover,
.carousel > ul::scroll-button(*):focus {
	opacity: 1;
}

.carousel > ul::scroll-button(*):disabled {
	opacity: 0.2;
	cursor: unset;
}

.carousel > ul::scroll-button(left) {
	content: "◄" / "Previous";
	right: calc(anchor(left) - 70px);
	bottom: calc(anchor(50%) - 13px);
}

.carousel > ul::scroll-button(right) {
	content: "►" / "Next";
	left: calc(anchor(right) - 70px);
	bottom: calc(anchor(50%) - 13px);
}

.carousel > ul::scroll-marker-group {
	position: absolute;
	position-anchor: var(--carousel-anchor, --my-carousel);
	top: calc(anchor(bottom) - 0px);
	justify-self: anchor-center;
	display: flex;
	justify-content: center;
	gap: 20px;
}

.carousel > ul > li::scroll-marker {
	content: attr(data-accName);
	width: 16px;
	height: 16px;
	background-color: transparent;
	border: 2px solid #6e4fea;
	border-radius: 50%;
	overflow: hidden;
	text-indent: 16px;
}

@media (max-width: 768px) {
	.carousel > ul::scroll-marker-group {
		gap: 10px;
	}

	.carousel > ul > li::scroll-marker {
		width: 10px;
		height: 10px;
	}
}

.carousel > ul > li::scroll-marker:target-current {
	background-color: #6e4fea;
}

/* Remove the scroll bar for browsers that support scroll-driven animation */
@supports (selector(::scroll-button(*))) {
  .carousel > ul {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .carousel > ul::-webkit-scrollbar {
    display: none;
  }
}

/* Add some padding to prevent the scrollbar from hiding the caption */
@supports not (selector(::scroll-button(*))) {
	.carousel > ul > li > figure > figcaption {
		padding-bottom: 8px;
	}
}