/* === About photos slider: fade version (no scrollbar) === */
.about-slider{
  position: relative;
  border-radius: 16px;
  overflow: hidden;            /* скрываем всё лишнее */
  background: #0b1220;
  min-height: 360px;           /* можно менять под макет */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* слой затемнения/градиента (если используешь) */
.about-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 40%, rgba(0,0,0,.0), rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%);
  z-index: 2;
}
/* Кадр */
.about-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease; /* плавное появление/исчезновение */
  will-change: opacity;
}
.about-slide.active{ opacity: 1; }
/* Изображение внутри кадра */
.about-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Кнопки навигации */
.about-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: 20px; color: #fff;
  transition: background .2s ease, transform .2s ease;
  z-index: 3;
}
.about-prev{ left: 12px; } .about-next{ right: 12px; }
.about-nav:hover{ background: rgba(255,255,255,.28); }
@media (max-width: 767px){ .about-nav{ display:none; } }