@layer components {
.carousel {
	anchor-name: --carousel;
	display: flex;
	gap: 1rem;
	justify-self: center;
	margin: 1rem;
	overflow-x: auto;
	/* position: relative; */
	scroll-snap-type: x mandatory;
	scroll-marker-group: after;
	width: 80%;
}

@media (prefers-reduced-motion: no-preference) {
	.carousel {
		scroll-behavior: smooth;
	}
}
.carousel li::scroll-marker {
	aspect-ratio: 1;
	border: 2px solid black;
	border-radius: 100%;
	content: "";
	width: 20px;
}

.carousel::scroll-button(left) {
	content: "<" / "Anterior";
	left: anchor(left);
}

.carousel::scroll-button(right) {
	content: ">" / "Próximo";
	right: anchor(right);
}

.carousel::scroll-button(*) {
	background-color: #fff;
	border: 2px solid #424242;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	height: 30px;
	position: absolute;
	position-anchor: --carousel;
	top: anchor(top + 160px);
	transition: var(--transition-fast) all ease-in-out;
	width: 30px;
}

.carousel::scroll-button(*):disabled {
	color: var(--black);
	opacity: 0.2;
}

.slide {
	animation-fill-mode: both;
	animation-name: fadeIn;
	animation-timeline: view(x 90% 0);
	background-color: var(--black);
	color: var(--white);
	font-size: var(--font-size-huge);
	height: 250px;
	min-width: 250px;
	padding: 20px 40px;
	scroll-snap-align: center;
}

}