.main-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1200 / 700;
  margin: 0 auto;
  overflow: hidden;
}
.main-slider::before { content:""; display:block; padding-top:58.333%; }
.main-slider .swiper-wrapper { position:absolute; top:0; left:0; width:100%; height:100%; }
.main-slider .swiper-slide { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.main-slider .main-slide-inner { width:100%; height:100%; }
.main-slider picture, .main-slider img { width:100%; height:100%; display:block; }
.main-slider img { object-fit:cover; }

.main-slider-caption {
  position:absolute; bottom:0; left:0; width:100%;
  background: rgba(0,0,0,0.7); color:#fff;
  padding:14px 18px; box-sizing:border-box;
  z-index:10; display:flex; justify-content:center; align-items:center;
}

#main-slider-text {
  margin:0; font-size:14px; line-height:1.5;
  opacity:1; transition: opacity 0.3s ease;
}
#main-slider-text.fade-out { opacity:0; }

.main-slider-counter {
  position:absolute; bottom:70px; right:18px; width:50px; height:50px;
  background: rgba(0,0,0,0.7); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:bold; z-index:15; box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

@media (max-width:768px){
  .main-slider { aspect-ratio:2/3; }
  .main-slider-caption { padding:10px 12px; }
  #main-slider-text { font-size:13px; }
  .main-slider-counter { width:40px; height:40px; font-size:12px; bottom:60px; right:12px; }
}