.image-slider {
  position: relative;
  padding-inline: 96px;
}
.image-slider .swiper {
  position: relative;
}
.image-slider.is-preview .swiper .swiper-wrapper {
  display: flex;
  height: 100%;
}

.image-slider .swiper .swiper-wrapper .swiper-slide {
  position: relative;
}
.image-slider.is-preview .swiper .swiper-wrapper .swiper-slide {
  height: 212px;
  width: 100%;
}

.image-slider .swiper .swiper-wrapper .swiper-slide .svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.image-slider .swiper .swiper-wrapper .swiper-slide .clipped {
  -webkit-clip-path: var(--clip, url(#slider-clip));
  clip-path: var(--clip, url(#slider-clip));
  background-color: #6d8d63;
  aspect-ratio: var(--aspect-ratio, 1/1);
}
.image-slider .swiper .swiper-wrapper .swiper-slide .clipped img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-slider .swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  z-index: 10;
  width: 56px;
  height: 56px;
  border-radius: 80px;
  background-color: #6d8d63;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-slider .swiper-button::after {
  display: none;
}
.image-slider .swiper-button svg {
  height: 20px;
  color: white;
}
.image-slider .swiper-button-prev {
  left: 0;
}
.image-slider .swiper-button-next {
  right: 0;
}