.ttt-carousel {
  --ttt-speed: 500ms;
  --ttt-content-width: max-content;
  --ttt-carousel-row: 1;
  --ttt-arrow-height: 97px;
  --ttt-arrow-stroke: 8px;
  --ttt-arrow-gap: 80px;
  --ttt-arrow-align: center;
  --ttt-arrow-offset: 0px;
  --ttt-arrow-color: currentColor;
  --ttt-arrow-hover-opacity: .7;
  display: grid;
  grid-template-columns: auto minmax(0, var(--ttt-content-width)) auto;
  justify-content: center;
  column-gap: var(--ttt-arrow-gap);
}
.ttt-carousel--no-arrows {
  column-gap: 0;
}

.ttt-carousel__viewport {
  grid-column: 2;
  grid-row: var(--ttt-carousel-row);
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.ttt-carousel__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ttt-carousel__slide {
  grid-area: 1/1;
  min-width: 0;
  visibility: hidden;
  transition: transform var(--ttt-speed) ease, opacity var(--ttt-speed) ease, visibility 0s linear var(--ttt-speed);
}
.ttt-carousel__slide.is-active {
  visibility: visible;
  transition-delay: 0s;
}
.ttt-carousel__slide.is-instant {
  transition: none;
}

.ttt-carousel--slide .ttt-carousel__slide {
  transform: translateX(100%);
}
.ttt-carousel--slide .ttt-carousel__slide.is-active {
  transform: none;
}

.ttt-carousel--fade .ttt-carousel__slide {
  opacity: 0;
}
.ttt-carousel--fade .ttt-carousel__slide.is-active {
  opacity: 1;
}

.ttt-carousel .ttt-carousel__arrow {
  grid-row: var(--ttt-carousel-row);
  align-self: var(--ttt-arrow-align);
  position: relative;
  display: block;
  margin: 0;
  padding: calc(var(--ttt-arrow-stroke) / 2);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ttt-arrow-color);
  line-height: 0;
  cursor: pointer;
  transform: translateY(var(--ttt-arrow-offset));
  transition: opacity 0.2s ease;
}
.ttt-carousel .ttt-carousel__arrow::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.ttt-carousel .ttt-carousel__arrow:hover, .ttt-carousel .ttt-carousel__arrow:focus {
  background: none;
  box-shadow: none;
  color: var(--ttt-arrow-color);
}
.ttt-carousel .ttt-carousel__arrow:hover {
  opacity: var(--ttt-arrow-hover-opacity);
}
.ttt-carousel .ttt-carousel__arrow:focus {
  outline: none;
}
.ttt-carousel .ttt-carousel__arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.ttt-carousel .ttt-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.ttt-carousel .ttt-carousel__arrow svg {
  display: block;
  width: auto;
  height: calc(var(--ttt-arrow-height) - var(--ttt-arrow-stroke));
  aspect-ratio: 44.5/89;
  overflow: visible;
}
.ttt-carousel .ttt-carousel__arrow path {
  fill: none;
  stroke-width: var(--ttt-arrow-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ttt-carousel .ttt-carousel__arrow--prev {
  grid-column: 1;
}

.ttt-carousel .ttt-carousel__arrow--next {
  grid-column: 3;
}
.ttt-carousel .ttt-carousel__arrow--next svg {
  transform: rotate(180deg);
}

.ttt-carousel__stop--1 {
  stop-color: var(--ttt-arrow-color-1);
}

.ttt-carousel__stop--2 {
  stop-color: var(--ttt-arrow-color-2);
}

.ttt-carousel__stop--3 {
  stop-color: var(--ttt-arrow-color-3);
}

.ttt-carousel__stop--4 {
  stop-color: var(--ttt-arrow-color-4);
}

@media (prefers-reduced-motion: reduce) {
  .ttt-carousel__slide,
  .ttt-carousel .ttt-carousel__arrow {
    transition: none;
  }
}

/*# sourceMappingURL=carousel.css.map */