.testimonial-carousel {
   position: relative;
   margin: 0px auto 0;
   outline-offset: 4px;
}

.testimonial-carousel-stage {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / .41;
   overflow: hidden;
   isolation: isolate;
   touch-action: pan-y;
}

.testimonial-carousel-slide {
   position: absolute;
   top: 40%;
   left: 50%;
   width: 80%;
   margin: 0;
   transform: translate(-50%, -50%) scale(.86);
   opacity: .48;
   transition: transform .6s ease, opacity .6s ease;
   z-index: 1;
}

.testimonial-carousel-slide img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 20px;
}

.testimonial-carousel-slide.is-active {
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
   z-index: 3;
}

.testimonial-carousel-slide.is-previous {
   transform: translate(-104%, -50%) scale(.86);
}

.testimonial-carousel-slide.is-next {
   transform: translate(4%, -50%) scale(.86);
}

.testimonial-carousel-arrow {
   position: absolute;
   top: 40%;
   transform: translateY(-50%);
   z-index: 4;
   display: grid;
   place-items: center;
   width: 50px;
   height: 50px;
   padding: 0 0 4px;
   border: 1px solid #ecdbfa;
   border-radius: 50%;
   background: #fff;
   color: #9c21e8;
   font: 32px/1 Arial, sans-serif;
   box-shadow: 0 4px 18px #17062030;
   cursor: pointer;
}

.testimonial-carousel-prev {
   left: 4%;
}

.testimonial-carousel-next {
   right: 4%;
}

.testimonial-carousel-arrow:hover {
   background: #f8eafa;
}

.testimonial-carousel button:focus-visible {
   outline: 3px solid #fa4c9c;
   outline-offset: 3px;
}

@media (max-width: 575px) {
   .testimonial-carousel-stage {
      aspect-ratio: 1 / .49;
   }

   .testimonial-carousel-slide {
      width: 88%;
   }

   .testimonial-carousel-slide img {
      border-radius: 12px;
   }

   .testimonial-carousel-arrow {
      width: 32px;
      height: 32px;
      font-size: 27px;
   }

   .testimonial-carousel-prev {
      left: 0;
   }

   .testimonial-carousel-next {
      right: 0;
   }
}

@media (prefers-reduced-motion: reduce) {
   .testimonial-carousel-slide {
      transition: none;
   }
}

.testimonial-carousel::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 25px;
 height: 80%;
   z-index: 5;
   pointer-events: none;
   background: linear-gradient(90deg, rgba(255, 255, 255, .9), transparent);
}


.testimonial-carousel::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 25px;
  height: 80%;
   z-index: 5;
   pointer-events: none;
   background: linear-gradient(270deg, rgba(255, 255, 255, .9), transparent);

}