:root {
  --swiper-theme-color: white;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-img-aspect-ratio-small: 16/9;
  --swiper-img-aspect-ratio-large: 21/9;
  --swiper-btn-prev-next-size-small: 40px;
  --swiper-btn-prev-next-size-large: 48px;
}

.swiper-pagination {
  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-height: 12px;
}

.swiper-slide-image {
  aspect-ratio: var(--swiper-img-aspect-ratio-small);
}

@media screen and (min-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: flex;
  }
}

.swiper-button-next,
.swiper-button-prev {
  width: var(--swiper-btn-prev-next-size-small, 40px);
  height: var(--swiper-btn-prev-next-size-small, 40px);
  background-color: #00000069;
  border-radius: 50%;
  transition: background-color 200ms ease-in;
  display: none;
  &:hover {
    background-color: #000;
  }
  &:after {
    font-size: 20px;
  }
}

/* Slide */

.swiper-slide {
  container-name: slide;
  container-type: inline-size;
}

.slide-title {
  font-size: 32px;
}

.swiper-slide.swiper-template2 .slide-title {
  font-size: 16px;
}
.swiper-slide.swiper-template1 .slide-title {
  font-size: 24px;
}
.swiper-slide.swiper-template3 .slide-title {
  font-size: 24px;
}  

.swiper-slide.swiper-template3 .swiper-content {
  width: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  padding: 16px;
}

@container slide (width > 600px) {
  .slide-title {
    font-size: 40px;
  }
  .swiper-slide.swiper-template2 .slide-title {
    font-size: 24px;
  }  
  .swiper-slide.swiper-template1 .slide-title {
    font-size: 32px;
  }
  .swiper-slide.swiper-template3 .slide-title {
    font-size: 32px;
  }  
  .swiper-slide.swiper-template3 .swiper-content {
    padding: 0;
    width: 60%;
    left: 64px;
    right: initial;
    top: initial;
    bottom: 48px;
  }
  
  .swiper .slide-metas {
    font-size: 14px;
  }
}

@container slide (width > 900px) {
  .slide-title {
    font-size: 48px;
  }
  .swiper-slide.swiper-template1 .slide-title {
    font-size: 40px;
  }  
  
  .swiper .slide-metas {
    font-size: 16px;
  }
  .swiper-slide-image {
    aspect-ratio: var(--swiper-img-aspect-ratio-large);
  }
}

/* Slide wrapper and controls */
.swiper {
  container-name: slider;
  container-type: inline-size;
}

@container slider (width > 900px) {

  .swiper-button-prev,
  .swiper-button-next {
    width: var(--swiper-btn-prev-next-size-large, 48px);
    height: var(--swiper-btn-prev-next-size-large, 48px);
    &:after {
      font-size: 24px;
    }
  }
}