.carousel {
  overflow: hidden;
  position: relative;
  padding-bottom: 40px;
}
.carousel .slides {
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-left: 0;
  -webkit-transition: 0.8s cubic-bezier(0.455, 0, 0.175, 1);
  transition: 0.8s cubic-bezier(0.455, 0, 0.175, 1);
  list-style: none;
}
.carousel .pagination {
  width: auto;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
}
.carousel .pagination li {
  list-style: none;
  cursor: pointer;
  height: 12px;
  width: 12px;
  border-radius: 100px;
  background-color: var(--black);
  opacity: 0.3;
}
.carousel .pagination li.active {
  opacity: 1;
}

.carousel-btn.hide {
  opacity: 0.3;
  pointer-events: none;
}
.carousel-btn.next [class^=icon] {
  margin-left: 3px;
}
.carousel-btn.prev [class^=icon] {
  margin-right: 3px;
}