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

  button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .carousel__prev {
    left: 10px;
  }

  .carousel__next {
    right: 10px;
  }
}

.carousel__content {
  column-gap: var(--size-4);
  display: flex;
  inline-size: var(--size-full);
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

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

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