.carousel {
  align-items: center;
  display: flex;
  gap: var(--size-4);
}

.carousel__content {
  display: flex;
  gap: var(--carousel-items-gap, 1rem);
  inline-size: var(--size-full);
  overflow: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__item {
  --space: var(--carousel-items-gap, 1rem);
  --items: var(--carousel-items, 1);
  --items-gap: calc(100% - var(--space) * (var(--items) - 1));

  flex: 0 0 calc(var(--items-gap) / var(--items));
  padding: var(--size-1);
  scroll-snap-align: start;
}