.page-carousel-thumbnails {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.75rem;
  width: 100%;
  overflow-x: auto;
  padding: 0.25rem 0 0.5rem;
  scrollbar-width: none;
  touch-action: pan-x;
  cursor: grab;
  overscroll-behavior-inline: contain;
}

.page-carousel-thumbnails::-webkit-scrollbar {
  display: none;
}

.page-carousel-thumbnails.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.page-carousel-thumbnail {
  flex: 0 0 9rem;
  width: 9rem;
  min-width: 9rem;
  max-width: 9rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  background: transparent;
}

@media (max-width: 575.98px) {
  .page-carousel-thumbnail {
    flex-basis: 7.5rem;
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
  }
}

button.page-carousel-thumbnail {
  cursor: pointer;
}

.page-carousel-thumbnail.active,
.page-carousel-thumbnail:focus-visible {
  border-color: currentColor;
}

.page-carousel-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}