.swiper {
  &-container {
    padding-bottom: 4rem;
    @include media-breakpoint-down(sm) {
      padding-bottom: 2rem;
    }
  }
  &-pagination {
    &-bullet {
      background: $white;
      border: 1px solid $black;
      height: 1.25rem;
      opacity: .7;
      transition: border .2s, background .2s;
      width: 1.25rem;
      @include media-breakpoint-down(sm) {
        height: .625rem;
        width: .625rem;
      }
      &-active,
      &:hover {
        background: $brand-primary;
        border-color: $brand-primary;
      }
      &#{&}-active {
        opacity: 1;
      }
    }
  }
}


.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 0;
}