.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 40px;
}
.carousel .slides {
  max-width: none;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  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: #000;
  -webkit-transition: opacity var(--bezier);
  transition: opacity var(--bezier);
  opacity: 0.2;
}
.carousel .pagination li.active {
  opacity: 1;
}

.carousel-btn {
  height: 44px;
  width: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100%;
  z-index: 5;
  border: 1px solid var(--primary);
  cursor: pointer;
  -webkit-transition: opacity var(--bezier);
  transition: opacity var(--bezier);
}
.carousel-btn:after {
  content: "";
  -webkit-mask-image: var(--icon-arrowright);
          mask-image: var(--icon-arrowright);
  background-color: var(--primary);
  display: block;
  width: 15px;
  height: 15px;
  position: relative;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.carousel-btn.hide {
  opacity: 0.4;
  pointer-events: none;
}
.carousel-btn.next {
  right: 0px;
}
.carousel-btn.prev {
  left: 0px;
}
.carousel-btn.prev:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.navigation-holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  gap: 1.25rem;
}
.navigation-holder::before {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 1px;
  background-color: var(--primary);
}