/* Generic Wix-style slideshow: stacked slides and side arrows. Slides move horizontally.
   Sizes and colours come from the page (see 04-pages). */
.slideshow {
  --arrow-width: 14px;
  --arrow-offset: -17px;
  --arrow-color: rgb(0, 0, 0);
  --transition-duration: 500ms;
  position: relative;
}

.slideshow__slides {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  overflow: clip;
  transform: translateX(100%);
  transition: transform var(--transition-duration) ease;
  visibility: hidden;
}

.slideshow__slide.is-active { transform: translateX(0); visibility: visible; }
.slideshow__slide.is-entering,
.slideshow__slide.is-leaving { visibility: visible; }
.slideshow__slide.is-instant { transition: none; }

.slideshow__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: var(--arrow-width);
  margin: 0 var(--arrow-offset);
  translate: 0 -50%;
}

.slideshow__arrow svg {
  display: block;
  width: 100%;
  fill: var(--arrow-color);
  stroke: var(--arrow-color);
  stroke-width: 1px;
}

.slideshow__arrow--previous { left: 0; }
.slideshow__arrow--next { right: 0; transform: scaleX(-1); }
/* with a single slide there is nothing to browse: hide only the arrows */
.slideshow--single .slideshow__arrow { display: none; }