// set ne style in the global style sheet
.swiper-button-prev,
.swiper-button-next {
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  padding: 25px;
  //background-color: rgba($black, 0.5);
  border: none;
  border-radius: 50px;
  top: unset !important;
  bottom: -80px;
  outline: none;
  cursor: pointer;
}

.swiper-button-next {
  right: unset !important;
  margin-left: calc(60px + $half-gap);
  background-image: url("../public/arrows-16px-1-tail-right.svg");
  background-repeat: no-repeat;
  background-position: center;

  &::after {
    display: none;
  }

  &.white {
    background-color: rgba($white, 0.5);
  }

  &.black {
    background-color: rgba($black, 0.5);
  }
}

.swiper-button-prev {
  left: 0 !important;
  background-image: url("../public/arrows-16px-1-tail-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);

  &::after {
    display: none;
  }

  &.white {
    background-color: rgba($white, 0.5);
  }

  &.black {
    background-color: rgba($black, 0.5);
  }
}