.splide__main{ transition: all .2s;}
.splide__track, .splide__list , .splide__slide {height:inherit;}
.splide__arrows{ position: absolute;  left: 0; width: 100%; pointer-events: none;}
.splide__arrows, .splide__arrow { top:0; height:100%;}
.splide__arrows > .splide__arrow, .splide__arrows > .splide__arrow:focus{ pointer-events: all; background: linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 48%, rgba(255,255,255,1) 52%, rgba(255,255,255,0) 80%); width:4vw !important; border:none; border-radius: 0; font-size:clamp(1rem, 3vw, 2rem); transition:all .6s; transform:none;  opacity:.3}

.splide__arrow:hover{ opacity:.5}
.splide__arrow--prev{left:0;}
.splide__arrow--next{right:0;}

.splide--nav .splide__slide{ transition:all .3s; list-style: none;}

.splide__slide img{float: left; position: relative; width: 100%; }
.splide__slide:focus {
  outline: none !important;
}
.my-slider-progress{background-color: var(--gray_light); height: 2px; margin-top: .5rem;}
.my-slider-progress-bar{background-color: var(--color); height: inherit; width: 0;  transition: all .2s;}