/* Whole photographs on the surrounding ground, with native touch scrolling. */
.piece-carousel { min-width: 0; width: 100%; }
.piece-carousel__track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.piece-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4 / 3; }
.piece-carousel__slide > a, .piece-carousel__slide picture { display: block; width: 100%; height: 100%; }
.piece-carousel .piece-carousel__slide img { display: block; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; }
.piece-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; font: 400 14px/1.4 var(--sans); }
.piece-carousel__controls[hidden] { display: none; }
.piece-carousel__controls button { width: 48px; height: 48px; padding: 0; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; font: inherit; font-size: 22px; cursor: pointer; }
.piece-carousel__controls button:disabled { opacity: .35; cursor: default; }
.piece-carousel :focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.pairing > .piece-carousel { padding-inline: var(--gutter); }
@media (min-width: 900px) {
  .pairing > .piece-carousel { grid-column: 5 / span 8; grid-row: 1; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-carousel__track { scroll-behavior: auto; }
}