.fff-image-rotator {
  position: relative;
  width: 100%;
  overflow: visible;
  --fff-ir-arrow-size: 44px;
  --fff-ir-arrow-gap: 18px;
  --fff-ir-arrow-bg: rgba(255, 255, 255, 0.9);
  --fff-ir-arrow-color: #311dab;
}

.fff-image-rotator__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fff-ir-ratio, 16 / 9);
  overflow: hidden;
}

.fff-image-rotator__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform var(--fff-ir-duration, 800ms) ease;
  will-change: transform;
}

.fff-image-rotator__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.fff-image-rotator__image {
  display: block;
  width: 100%;
  height: 100%;
}

.fff-image-rotator__nav {
  position: absolute;
  top: 50%;
  width: var(--fff-ir-arrow-size);
  height: var(--fff-ir-arrow-size);
  border: 1px solid var(--fff-ir-arrow-color);
  border-radius: 999px;
  background: var(--fff-ir-arrow-bg);
  color: var(--fff-ir-arrow-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 3;
  line-height: 1;
  padding: 0;
}

.fff-image-rotator__nav span {
  font-size: 34px;
  line-height: 1;
  margin-top: -2px;
}

.fff-image-rotator__nav--prev {
  left: calc(-1 * (var(--fff-ir-arrow-size) + var(--fff-ir-arrow-gap)));
}

.fff-image-rotator__nav--next {
  right: calc(-1 * (var(--fff-ir-arrow-size) + var(--fff-ir-arrow-gap)));
}

.fff-image-rotator[data-arrows="false"] .fff-image-rotator__nav {
  display: none;
}

@media (max-width: 980px) {
  .fff-image-rotator {
    --fff-ir-arrow-size: 38px;
    --fff-ir-arrow-gap: 8px;
  }

  .fff-image-rotator__nav--prev {
    left: 8px;
  }

  .fff-image-rotator__nav--next {
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fff-image-rotator__track {
    transition: none;
  }
}