.mySwiper{
  width:100%;
  height: clamp(280px, 38vw, 460px);
  margin-top: 4px;
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.mySwiper .swiper-slide { position: relative; }

.mySwiper .slide-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.hero-caption {
  position: absolute; 
  inset: 0;
  display: grid; 
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  z-index: 3;
  place-items: center;      
  pointer-events: none;                    
  background: linear-gradient(0deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.25) 40%);
}

.hero-title {
  color: #fff;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);

  white-space: normal;     
  word-break: keep-all;    
  overflow-wrap: break-word; 
}

@media (max-width: 992px){ .mySwiper{height:360px} .hero-title{font-size:28px} }


.slide-link{
  position:absolute; inset:0; display:block; z-index:2;
}


.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
  z-index: 2;                     
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

.mySwiper .swiper-button-prev { left: 10px; }
.mySwiper .swiper-button-next { right: 10px; }

.mySwiper .swiper-button-prev::after,
.mySwiper .swiper-button-next::after { font-size:18px; font-weight:700; }

.mySwiper .swiper-pagination { bottom: 14px !important; z-index:5; }

@media (max-width: 576px) {
  .hero-title { font-size: 22px; padding: 0 10px; }
  .hero-caption {
    padding: 0 78px;              /* учитываем ширину стрелок, чтобы текст не попадал под них */
    background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 50%);
  }
  .mySwiper .swiper-button-prev,
  .mySwiper .swiper-button-next {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.8);
  }
  .mySwiper .swiper-button-prev { left: 8px; }
  .mySwiper .swiper-button-next { right: 8px; }
}