.ab-rail {
  position: relative;
  padding: 0 2.2rem 1.4rem;
}

.ab-rail__viewport {
  overflow: hidden;
}

.ab-rail__track {
  display: flex;
  transition: transform 0.45s ease;
}

.ab-rail__slide {
  flex: 0 0 calc(100% / var(--ab-per, 4));
  min-width: 0;
  padding: 0 0.45rem;
}

.ab-rail__prev,
.ab-rail__next {
  position: absolute;
  top: 28%;
  z-index: 2;
  width: 34px;
  height: 42px;
  border: 0;
  background: #f6c3c6;
  color: #fff;
}

.ab-rail__prev { left: 0; }
.ab-rail__next { right: 0; }

.ab-rail__prev::before,
.ab-rail__next::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.ab-rail__prev::before { transform: rotate(-135deg); }
.ab-rail__next::before { transform: rotate(45deg); }

.ab-rail__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.ab-rail__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d0d0d0;
}

.ab-rail__dot.is-active {
  background: #333;
}

.ab-creations .ab-rail__slide img {
  width: 100%;
  height: auto;
  display: block;
}