.swiper-slider {
  position: relative;

  .swiper-button-next,
  .swiper-button-prev {
    width: var(--spread-size-2, 16px);
    height: var(--spread-size-2, 16px);
    transition: opacity ease 0.2s;
    opacity: 0.5;
    background-color: var(--spread-button-primary-bg, #000);
    clip-path: polygon(100% 50%, 0 100%, 5% 50%, 0 0);
  }

  .swiper-button-prev {
    transform: rotate(-180deg) translateX(var(--spread-size-8, 64px));
  }

  .swiper-button-next {
    transform: translateX(var(--spread-size-8, 64px));
  }

  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    opacity: 1;
  }

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

  .swiper-pagination {
    bottom: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--spread-size-5);
    gap: var(--spread-size-1);
  }

  .swiper-pagination-bullet {
    position: relative;
    width: var(--spread-size-1-5);
    height: var(--spread-size-1-5);
    border: 1px solid var(--spread-button-primary-bg, #000);
    background-color: var(--spread-button-primary-bg, #000);
  }

  .swiper-pagination-bullet:hover {
    opacity: 1;
    border: 1px solid var(--spread-button-primary-border, #000);
    background-color: var(--spread-button-primary-bg, #000);
  }

  .swiper-pagination-bullet-active {
    background-color: var(--spread-button-primary-bg, #000);
  }

  .swiper-slide {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}