@import url("../../styles/styles.css");

/* The wrapper should auto-height to its content */
.carousel-wrapper {
  --fade-size: 8.333%;

  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Side fades mirror wrapper height */
.carousel-wrapper::before,
.carousel-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fade-size);
  pointer-events: none;
  z-index: 2;
}

.carousel-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 100%),
    rgb(255 255 255 / 0%)
  );
}

.carousel-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgb(255 255 255 / 100%),
    rgb(255 255 255 / 0%)
  );
}

.carousel {
  --peek: 80px;
  --gap: 40px;

  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

.carousel-track {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.carousel .carousel-item {
  flex: 0 0 auto;
  width: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel .carousel-item img {
  width: auto;
  max-height: 100%;
  display: block;
  object-position: center;
}

.carousel .carousel-item.centered {
  opacity: 1;
  transform: scale(1);
}

@media (width <= 767px) {
  .carousel {
    --gap: 20px;
    --peek: 40px;
  }

  .carousel .carousel-item {
    width: calc(100% - (2 * var(--peek)));
  }
}