.swiper-area {
  position: relative;

  .swiper-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    background: black;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 1;

    &::before, &::after {
      content: '';
      display: none;
    }

    @media screen and (max-width: 768px) {
      display: none;
    }
  }

  .swiper-button.swiper-button-next {
    right: 0;
    transform: translate(50%, -50%);
  }

  .swiper-button.swiper-button-prev {
    left: 0;
    transform: translate(-50%, -50%);
  }
}

.swiper-pagination-wrapper {
  padding-top: 60px;

  @media screen and (max-width: 768px) {
    display: none;
  }

  .swiper-pagination {
    position: relative;
    z-index: 1;
    max-width: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-inline: auto;
    border-radius: 2px;
    overflow: hidden;

    @media screen and (max-width: 768px) {
      display: none;
    }

    .pagination-element {
      width: 100%;
      height: 4px;
      border-radius: 0;
      background-color: black;
      margin-inline: 0 !important;
    }
  }
}