.zoetrope {
  --zoetrope-button-height: 5rem;
  --zoetrope-button-width: 1.875rem;
  --zoetrope-dot-size: 0.75rem;
  position: relative;
}

.zoetrope .zoetrope-track-wrapper {
  overflow: hidden;
  position: relative;
  transition: height 0.1s;
}

.zoetrope.zoetrope-draggable .zoetrope-track-wrapper {
  cursor: grab;
  touch-action: pan-y;
}

.zoetrope.isDragging .zoetrope-track-wrapper {
  cursor: grabbing;
  user-select: none;
}

.zoetrope:not(.isDragging) .zoetrope-track a {
  cursor: pointer;
  pointer-events: all;
}

.zoetrope .zoetrope-track {
  align-items: flex-start;
  display: flex;
  left: 0;
  position: absolute;
  right: auto;
  top: 0;
  width: auto;
  will-change: transform;
}

.zoetrope .zoetrope-track > * {
  flex: 0 0 calc((var(--slide-width) / var(--slides-to-show)) * 1px);
  overflow: hidden;
  width: calc((var(--slide-width) / var(--slides-to-show)) * 1px);
}

.zoetrope.step-mode-slide .zoetrope-track > * {
  flex-basis: auto;
  width: auto;
}

.zoetrope.isDragging .zoetrope-track {
  pointer-events: none;
}

.zoetrope[infinite] [slide-index]:first-child {
  margin-left: calc((((var(--slides-to-show) * 2) - 1) / var(--slides-to-show)) * var(--slide-width) * -1px);
}

.zoetrope.alignment-managed[infinite] [slide-index]:first-child {
  margin-left: 0;
}

.zoetrope.isDragging [slide-index] {
  cursor: grabbing;
}

.zoetrope.fade [slide-index] {
  left: 100%;
  opacity: 0;
  position: absolute;
}

.zoetrope.lazy-load [slide-index] {
  padding: 0;
}

.zoetrope.lazy-load [slide-index]::after {
  content: none;
}

.zoetrope.lazy-load [slide-index] img {
  max-width: unset;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

.zoetrope .zoetrope-dots {
  bottom: 1rem;
  display: flex;
  font-size: 0;
  gap: .5rem;
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.zoetrope .zoetrope-dots button {
  appearance: none;
  background: #666;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: var(--zoetrope-dot-size);
  padding: 0;
  width: var(--zoetrope-dot-size);
}

.zoetrope .zoetrope-dots button.active {
  background: #222;
}

.zoetrope .zoetrope-button {
  appearance: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  font-size: 0;
  height: var(--zoetrope-button-height);
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
  width: var(--zoetrope-button-width);
}

.zoetrope .zoetrope-button[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.zoetrope .zoetrope-button-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23222' d='M4.2 247.5L151 99.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L69.3 256l118.5 119.7c4.7 4.7 4.7 12.3 0 17L168 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z'%3E%3C/path%3E%3C/svg%3E");
  left: 1rem;
}

.zoetrope .zoetrope-button-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23222' d='M187.8 264.5L41 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 392.7c-4.7-4.7-4.7-12.3 0-17L122.7 256 4.2 136.3c-4.7-4.7-4.7-12.3 0-17L24 99.5c4.7-4.7 12.3-4.7 17 0l146.8 148c4.7 4.7 4.7 12.3 0 17z'%3E%3C/path%3E%3C/svg%3E");
  right: 1rem;
}

.zoetrope .zoetrope-button:focus-visible,
.zoetrope .zoetrope-dots button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}