.algarbia-carousel {
	--algarbia-green: #70a875;
	--algarbia-cream: #fbf7ef;
	margin: clamp(2rem, 6vw, 5rem) auto;
	max-width: 1440px;
}

.algarbia-carousel-track {
	display: flex;
	gap: clamp(.8rem, 2vw, 1.5rem);
	overflow-x: auto;
	padding: .3rem max(1rem, calc((100vw - 1320px) / 2)) 1.25rem;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--algarbia-green) transparent;
}

.algarbia-carousel-track:focus-visible {
	outline: 2px solid var(--algarbia-green);
	outline-offset: 4px;
}

.algarbia-carousel-track.is-dragging { cursor: grabbing; user-select: none; }

.algarbia-slide {
	flex: 0 0 86vw;
	margin: 0;
	overflow: hidden;
	border-radius: 1rem;
	background: #e8eee4;
	scroll-snap-align: start;
	box-shadow: 0 .45rem 1.4rem rgba(42, 75, 47, .12);
}

.algarbia-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.algarbia-carousel-performance,
.algarbia-carousel-empty {
	max-width: 1320px;
	margin: 1rem auto 0;
	padding: .8rem 1rem;
	border-left: 3px solid var(--algarbia-green);
	background: var(--algarbia-cream);
	font-size: .9rem;
}

@media (min-width: 701px) {
	.algarbia-slide { flex-basis: 62vw; }
}

@media (min-width: 1101px) {
	.algarbia-slide { flex-basis: 42vw; }
}

@media (prefers-reduced-motion: reduce) {
	.algarbia-carousel-track { scroll-behavior: auto; }
}