.swiper-container-hero {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  position: relative;
  margin-bottom: calc(2 * var(--griditem));
}

.swiper-container-hero .swiper-slide > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: calc(-1 * var(--griditem) / 2 - 8px) !important;
}

.swiper-pagination-bullet-active {
    background: black !important;
}