.hero {
  position: relative;

  [class~="hero__carousel"] {
    height: 100%;

    [class~="swiper-pagination"] {
      text-align: start;
      left: var(--container-padding);
      bottom: 2rem !important;

      [dir="rtl"] & {
        right: var(--container-padding);
      }
    }

    [class~="swiper-pagination-bullet"] {
      border-color: white;
    }
  }
}