:root { --slides-per-view: 3; --gap:1rem;} 

.carousel-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 90%;    
  padding: clamp(1rem, 3vw, 3rem);
  display: flex;
  gap: var(--gap);
  align-items: center;
}

.carousel [data-slides] {
  display: flex;
  gap: var(--gap);            
  list-style: none;
  scroll-behavior: smooth; 
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.slide {
  flex: 0 0 calc((100% - (var(--gap) * (var(--slides-per-view) - 1))) / var(--slides-per-view));
}

.slide > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;  
  border-radius: var(--images-border-radius);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.carousel-button {
  background: none;
  border: none;
  color: #0c2d2d;
  cursor: pointer;
}

.carousel-button img {
  width: 3rem;
  height: 3rem;
}

@media (max-width: 900px) { :root { --slides-per-view: 2; } }
@media (max-width: 600px) { :root { --slides-per-view: 1; } }