@charset "UTF-8";

.slider {
  --slider-navigation-color: #9a9a9a;
  --slider-navigation-width: 4rem;
  --slider-navigation-height: 8rem;
  --slider-navigation-angle-size: 3.8rem;
  --slider-navigation-angle-width: 0.2rem;
  --slider-navigation-position: 1.2rem;
  --swiper-pagination-color: #bababa;
  --swiper-pagination-bullet-inactive-color: #535151;
  --swiper-pagination-position: 2.6rem;
  --swiper-pagination-size: 2.4rem;
  --swiper-pagination-bullet-size: 1.2rem;
  --swiper-pagination-bullet-horizontal-gap: 0.4rem;
  --swiper-pagination-bullet-inactive-opacity: 1;
}

.slider-ratio-img {
  --ratio-img-width: var(--slider-img-width);
  --ratio-img-height: var(--slider-img-height);
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--ratio-img-height) / var(--ratio-img-width) * 100%);
}

.slider-ratio-img .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.slider-button-prev,
.slider-button-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: var(--slider-navigation-width);
  height: var(--slider-navigation-height);
  cursor: pointer;
  transform: translateY(-50%);
  transition: 0.15s ease-in-out;
}

.slider-button-prev::after,
.slider-button-next::after {
  position: absolute;
  top: 50%;
  width: calc(var(--slider-navigation-angle-size) * 0.7071);
  height: calc(var(--slider-navigation-angle-size) * 0.7071);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.slider-button-prev:hover,
.slider-button-next:hover {
  opacity: 0.7;
}

.slider-button-prev.swiper-button-disabled,
.slider-button-next.swiper-button-disabled {
  opacity: var(--swiper-pagination-bullet-inactive-opacity);
  cursor: auto;
  pointer-events: none;
}

.slider-button-prev {
  left: var(--slider-navigation-position);
}

.slider-button-prev::after {
  left: calc((var(--slider-navigation-angle-size) - var(--slider-navigation-angle-size) * 0.7071) / 2);
  border-bottom: var(--slider-navigation-angle-width) solid var(--slider-navigation-color);
  border-left: var(--slider-navigation-angle-width) solid var(--slider-navigation-color);
}

.slider-button-next {
  right: var(--slider-navigation-position);
}

.slider-button-next::after {
  right: calc((var(--slider-navigation-angle-size) - var(--slider-navigation-angle-size) * 0.7071) / 2);
  border-top: var(--slider-navigation-angle-width) solid var(--slider-navigation-color);
  border-right: var(--slider-navigation-angle-width) solid var(--slider-navigation-color);
}

.slider .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: var(--swiper-pagination-position);
  left: 0;
  z-index: 1;
}

.slider .swiper-pagination-bullet {
  position: relative;
  width: var(--swiper-pagination-size);
  height: var(--swiper-pagination-size);
  margin: 0 var(--swiper-pagination-bullet-gutter);
  background-color: transparent;
  line-height: 1;
  transition: 0.15s ease-in-out;
}

.slider .swiper-pagination-bullet:focus {
  outline: none;
}

.slider .swiper-pagination-bullet:hover {
  opacity: 0.7;
}

.slider .swiper-pagination-bullet::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--swiper-pagination-bullet-size);
  height: var(--swiper-pagination-bullet-size);
  border-radius: 100%;
  background-color: var(--swiper-pagination-color);
  content: "";
  transform: translate(-50%, -50%);
}

.slider .swiper-pagination-bullet-active::before {
  background-color: var(--swiper-pagination-bullet-inactive-color);
}

@media (min-width: 768px) {
  .slider {
    --slider-navigation-position: 2rem;
    --swiper-pagination-position: 0.6rem;
  }
}