.pbly .product-carousel {
  position: relative;
  container-type: inline-size;
}

.pbly .product-carousel__track {
  display: grid;
  grid-auto-columns: 25%;
  grid-auto-flow: column;
  padding-bottom: var(--pbly-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pbly .product-carousel__track::-webkit-scrollbar { display: none; }
.pbly .product-carousel__slide { scroll-snap-align: start; }

.pbly .product-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  background: var(--pbly-color-palette-ink);
  transform: translateY(-50%);
}

.pbly .product-carousel__arrow--prev { left: 0; }
.pbly .product-carousel__arrow--next { right: 0; }
.pbly .product-carousel__arrow--next img { transform: scaleX(-1); }

@media (max-width: 64rem) {
  .pbly .product-carousel__track { grid-auto-columns: calc(100% / 3); }

  /* With narrower cards the middle of the row falls on the titles: centre the arrows on the photos. */
  .pbly .product-carousel__arrow { top: calc(100cqi / 6); }
}

@media (max-width: 47.9375rem) {
  .pbly .product-carousel__track { grid-auto-columns: 50%; }
  .pbly .product-carousel__arrow { top: 25cqi; }
}