/* ============================================================
   BLOCK: Banner — широкое фото на побережье
   Mobile: вертикальный кроп 4 : 5 с фокусом на девушке.
   Tablet: 16 : 9.
   Desktop: 1883 : 765, как в макете.
   Фото медленно «проявляется» при прокрутке.
   ============================================================ */

.banner {
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 0.94vw, 2.5rem);
}

.banner__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-surface);
}

.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

/* ---------- Появление фото при прокрутке ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .banner__media img {
      animation: banner-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@keyframes banner-reveal {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .banner__media {
    aspect-ratio: 16 / 9;
  }

  .banner__media img {
    object-position: 55% center;
  }
}

/* ---------- Desktop: точная раскладка макета ---------- */
@media (min-width: 1024px) {
  .banner {
    padding: 0 0.94vw;
  }

  .banner__media {
    aspect-ratio: 1883 / 765;
  }

  .banner__media img {
    object-position: 50% 45%;
  }
}