.n-carousel {
  position: relative;
  touch-action: pan-y;
}
.n-carousel .n-carousel__slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition-timing-function: var(--n-bezier);
  transition-property: transform;
}
.n-carousel .n-carousel__slides .n-carousel__slide {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
  overflow: hidden;
}
.n-carousel .n-carousel__slides .n-carousel__slide > img {
  display: block;
}
.n-carousel .n-carousel__dots {
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
}
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot {
  height: var(--n-dot-size);
  width: var(--n-dot-size);
  background-color: var(--n-dot-color);
  border-radius: 50%;
  cursor: pointer;
  transition:
    box-shadow 0.3s var(--n-bezier),
    background-color 0.3s var(--n-bezier);
  outline: none;
}
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot:focus {
  background-color: var(--n-dot-color-focus);
}
.n-carousel
  .n-carousel__dots.n-carousel__dots--dot
  .n-carousel__dot.n-carousel__dot--active {
  background-color: var(--n-dot-color-active);
}
.n-carousel.n-carousel--bottom .n-carousel__dots {
  transform: translateX(-50%);
  bottom: 12px;
  left: 50%;
}
.n-carousel.n-carousel--bottom .n-carousel__dot {
  margin: 0 4px;
}