.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  bottom: var(--spacing);
}

.swiper-slide:after {
  content: "";
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 75%;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.swiper-scrollbar,
.swiper-scrollbar-drag {
  --opacity: 1;
  background-color: rgba(0, 0, 0, var(--opacity));
  border-radius: 0;
}

.swiper-scrollbar-drag {
  transition-duration: 1s !important;
}

.swiper-scrollbar {
  --opacity: 0;
}

.swiper-buttons {
  position: absolute;
  top: 5rem;
  left: var(--spacing);
  display: none;
  gap: 1em;
}

.swiper-button-next,
.swiper-button-prev {
  position: relative;
  top: unset;
  left: unset;
  right: unset;
  color: #000;
  width: 2rem;
  height: 2rem;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
}

@supports (mix-blend-mode: difference) {
  .swiper-scrollbar,
  .swiper-scrollbar-drag {
    mix-blend-mode: difference;
    background-color: rgba(255, 255, 255, var(--opacity));
  }

  .swiper-button-next,
  .swiper-button-prev {
    mix-blend-mode: difference;
    color: #fff;
  }
}