.cards-slider-boundary {
  overflow: hidden;
  background-color: $ma-white;
  padding: 24px 0 32px;

  &--secondary {
    background-color: transparent;
  }

  @include media-breakpoint-up(md) {
    padding: 40px 0;
  }
}

.cards-slider {
  width: 100%;

  &__header {
    display: flex;
    justify-content: space-between;
  }

  &__controls {
    display: none;
    justify-content: space-between;
    align-items: flex-start;
    user-select: none;

    @include media-breakpoint-up(lg) {
      display: flex;
    }
  }

  &__btn {
    font-size: 1.625rem;
    margin-top: 2px;
    color: $blue;
    cursor: pointer;

    &.swiper-button-disabled {
      cursor: auto;
      display: block !important;
      color: $gray;
    }
  }

  &__prev-btn {
    margin-right: 20px;
  }

  &__title {
    text-align: left;
  }

  .swiper-container {
    user-select: none;
    overflow: visible;
  }

  .swiper-wrapper {
    align-items: stretch;
  }

  .swiper-pagination-bullet {
    border-radius: 5px;
    background-color: $gray;
    height: 6px;
    width: 6px;
    transition: width .3s ease-in, background-color .3s ease-in;

    &-active {
      background-color: $blue;
      width: 24px;
    }
  }

  .swiper-pagination {
    position: static;
    margin-top: 24px;
  }

  &--fits {
    .swiper-pagination,
    .cards-slider__controls {
      display: none;
    }
  }
}

@include media-breakpoint-up(xl) {
  .cards-slider {
    .swiper-container {
      overflow: hidden;
    }
  }
}