.pg-carousel {
  --pg-carousel-end-gap: 5.5rem;
  position: relative;
}

.pg-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-right: clamp(-7.5rem, -8vw, -1.5rem);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pg-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.pg-carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--pg-gap-6);
}

.pg-carousel__track::after {
  content: "";
  flex: 0 0 var(--pg-carousel-end-gap);
}

.pg-carousel__slide {
  display: flex;
  flex: 0 0 calc((100% - 3rem) / 3 - 2.5rem);
  min-width: 16rem;
  scroll-snap-align: start;
}

.pg-carousel__slide > * {
  flex: 1 1 auto;
  width: 100%;
}

.pg-carousel__arrow[hidden] {
  display: none;
}

.pg-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0.25rem solid var(--pg-arrow-ring, var(--pg-gabetti-gray-light));
  border-radius: 50%;
  background: var(--pg-gabetti-gray);
  background-clip: padding-box;
  color: var(--pg-white);
  cursor: pointer;
}

.pg-carousel__chevron {
  display: block;
  width: 1.1rem;
  height: auto;
}

.pg-carousel__arrow--next .pg-carousel__chevron {
  transform: scaleX(-1);
}

.pg-carousel__arrow--next {
  right: 0;
  transform: translate(50%, -50%);
}

@media (max-width: 60rem) {
  .pg-carousel__slide {
    flex-basis: calc((100% - 1.5rem) / 2 - 2rem);
  }
}

@media (max-width: 40rem) {
  .pg-carousel {
    --pg-carousel-end-gap: 3.5rem;
  }
  .pg-carousel__viewport {
    margin-right: -1.5rem;
  }
  .pg-carousel__slide {
    flex-basis: 78%;
    min-width: 15rem;
  }
  .pg-carousel__arrow--next {
    right: 0.5rem;
    transform: translateY(-50%);
  }
}