.carousel {
  height: 100%;

  [class~="swiper-pagination-bullet"] {
    border-color: var(--black);
    opacity: 0.3;
    border-width: 7px;
  }

  [class~="swiper-pagination-bullet-active"] {
    opacity: 1;
  }

  [class~="swiper-slide"] > div {
    height: 100%;
  }

  [class~="swiper-button-prev"],
  [class~="swiper-button-next"] {
    transform: scale(0.5);

    @media screen and (min-width: 640px) {
      transform: scale(1);
    }
  }

  [class~="swiper-button-prev"] {
    left: 0;

    @media screen and (min-width: 640px) {
      left: 10px;
    }
  }

  [class~="swiper-button-next"] {
    right: 0;

    @media screen and (min-width: 640px) {
      right: 10px;
    }
  }
}