@import "@/styles/variables";
@import "@/styles/mixins.scss";

.homeBanner {
  height: 45rem;
  position: relative;

  :global(.swiper-container) {
    height: 100%;
  }

  :global(.swiper-pagination) {
    bottom: 8.75rem;
    width: 100%;
    display: flex;
    justify-content: center;

    :global(.swiper-pagination-bullet) {
      float: left;
      background: $white;
      width: 2rem;
      height: 0.75rem;
      margin: 0.3125rem;
      opacity: 0.5;
      border-radius: 0.25rem;

      &:global(.swiper-pagination-bullet-active) {
        opacity: 1;
      }
    }
  }
}

.bannerBackground {
  height: 100%;
  background-size: cover !important;
}

@media screen and (max-width: $full) {
  .homeBanner {
    height: 38.1875rem;
  }
}

@media screen and (max-width: $wide) {
  .homeBanner {
    height: 31.375rem;
  }
}

@media screen and (max-width: $desktop) {
  .homeBanner {
    height: unset;
  }
}