.mySwiper {
    position: relative; 
    overflow: hidden; 
  }
  
  .mySwiper .swiper-wrapper {
    position: relative;
  }
  
  .mySwiper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20vw; 
    height: 100%;
    background: linear-gradient(
      90deg,
      var(--wp--preset--color--accent-2) 10%,
      var(--wp--preset--color--accent-6) 100%
    );
    z-index: 10; 
    pointer-events: none;
  }
  
  .mySwiper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20vw; 
    height: 100%;
    background: linear-gradient(
      270deg,
      var(--wp--preset--color--accent-2) 10%,
      var(--wp--preset--color--accent-6)100%
    );
    z-index: 10;
    pointer-events: none;
  }

.swiper-button-next{
  position: absolute;
  top: 50%;
  right: 25%;
}

.swiper-button-prev{
  position: absolute;
  top: 50%;
  left: 25%;
}

@media only screen and (max-width: 769px){
  .swiper-button-next{
    position: absolute;
    top: 50%;
    right: 20%;
  }
  
  .swiper-button-prev{
    position: absolute;
    top: 50%;
    left: 20%;
  }
  
}
.swiper-button-prev::after, .swiper-button-next::after{
  display: none;

}