.carousel {
  position: relative;
  display: block;
  width: 100%;
  cursor: grab;
  box-sizing: border-box;
}

.carousel__body {
  position: relative;
  width: 100%;
  padding: 50px 0 100px 0;
  overflow: hidden;
}

.carousel__body .carousel__slider {
  position: relative;
  transition: transform 1s ease-in-out;
}

.carousel__body .carousel__slider__item {
  position: relative;
  display: block;
  float: left;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
}

.carousel__body .carousel__slider__item .item__3d-frame {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.carousel__body .carousel__slider__item .item__3d-frame__box {
  display: flex;
  align-items: center;
  vertical-align: middle;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-color: var(--color-blue-1-light);
  background: var(--color-blue-1-light);
  border-width: 3px;
  border-style: solid;
}

.carousel__body .carousel__slider__item .item__3d-frame__box--right,
.carousel__body .carousel__slider__item .item__3d-frame__box--left {
  top: 0;
  width: 20px;
  backface-visibility: hidden;
}

.carousel__body .carousel__slider__item .item__3d-frame__box--left {
  left: 0;
  border-left-width: 5px;
  transform: translate3d(1px, 0, -20px) rotateY(-90deg);
  transform-origin: 0%;
}

.carousel__body .carousel__slider__item .item__3d-frame__box--right {
  right: 0;
  border-right-width: 5px;
  transform: translate3d(-1px, 0, -20px) rotateY(90deg);
  transform-origin: 100%;
}

.carousel__prev,
.carousel__next {
  position: absolute;
  bottom: 0;
  transition: transform 0.25s ease;
  transform: none;
  width: 40px;
  height: 40px;
  font-size: 0;
}

.carousel__prev::before,
.carousel__next::before,
.carousel__prev::after,
.carousel__next::after {
  content: '';
  display: block;
  position: absolute;
}

.carousel__prev::before,
.carousel__next::before{
  inset: 0;
  border-radius: 50%;
  border: solid 1px #a67737;
  transition: background-color 0.4s;
}

.carousel__prev::after,
.carousel__next::after {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url('/themes/custom/beethovenb5/assets/sprite-mask/view/sprite-mask.svg#pictos--arrow-2');
    mask-image: url('/themes/custom/beethovenb5/assets/sprite-mask/view/sprite-mask.svg#pictos--arrow-2');
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: auto 150%;
    mask-size: auto 150%;
  mask-size: auto 130%;
  background-color: #a67737;
  inset: 0 auto auto 15px;
  transition: inset 0.4s, background-color 0.4s;
  transform: rotateZ(180deg);
}

.carousel__prev:hover::after,
.carousel__next:hover::after {
    inset: 0 auto auto 5px;
}

.carousel__prev {
  left: 50%;
  transform: translateX(-80px) ;
}

.carousel__next {
  right: 50%;
  transform: translateX(80px) rotateZ(-180deg);
}