.slider-center {
  width: 100%;
  display: flex;
  position: relative;
  perspective: 1400px;
  justify-content: center;
  transform-style: preserve-3d;
}

.slider-center .slider-center__item {
  width: 20%;
  display: none;
  color: white;
  cursor: pointer;
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

.slider-center .slider--item__active {
  z-index: 999;
  display: block;
  transform: translate3d(0%, 0, 0px);
}

.slider-center .slider--item__next__first {
  z-index: 888;
  display: block;
  filter: grayscale(60%);
  background-color: rgb(0,0,0,0.2);
  transform: translate3d(80%, 0, -140px);
}

.slider-center .slider--item__next__second {
  z-index: 777;
  display: block;
  filter: grayscale(60%);
  background-color: rgb(0,0,0,0.2);
  transform: translate3d(170%, 0, -320px);
}

.slider-center .slider--item__previous__second {
  z-index: 777;
  display: block;
  filter: grayscale(60%);
  background-color: rgb(0,0,0,0.2);
  transform: translate3d(-80%, 0, -140px);
}

.slider-center .slider--item__previous__first {
  z-index: 888;
  display: block;
  filter: grayscale(60%);
  background-color: rgb(0,0,0,0.2);
  transform: translate3d(-170%, 0, -320px);
}

.slider-center .slider-center__dots {
  bottom: 0;
  margin: 0;
  display: flex;
  padding: 10px;
  list-style: none;
  position: absolute;
  transform: translate(0, 100%);
}

.slider-center .slider-center__dots .dot__item,
.dot__item--active {
  height: 10px;
  width: 10px;
  cursor: pointer;
  margin-right: 8px;
  border-radius: 10px;
  background-color: #e1c569;
  transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.slider-center .slider-center__dots .dot__item--active {
  width: 40px;
}

.slider-center__btn--previous {
  left: 8%;
  top: 50%;
  width: 2%;
  cursor: pointer;
  position: absolute;
  transform: translate(0, -50%);
}

.slider-center__btn--next {
  right: 8%;
  top: 50%;
  width: 2%;
  cursor: pointer;
  position: absolute;
  transform: translate(0, -50%);
}

@media screen and (max-width: 1025px) {
  .slider-center .slider--item__previous__second,
  .slider-center .slider--item__next__second {
    display: none;
  }
  .slider-center .slider-center__item {
    width: 80%;
  }
  .slider-center .slider--item__next__first {
    transform: translate3d(12%, 0, -150px);
  }
  .slider-center .slider--item__previous__first {
    transform: translate3d(-12%, 0, -150px);
  }

}