/* ==========================================================================
   30 Banner (live "Banner Separator", unnamed wrapper between Content 1 and Content 2)
   Full-bleed photo of Antoine on the sofa. Static: no reveal, no parallax (sampled on live).
   Desktop: 100% wide, aspect 2.65055 (543.3 tall at 1440), image cover, centred.
   Tablet: fixed 810 x 401 box centred in the page column (as live), image cover, centred.
   Phone: 100% wide, aspect 1.66667 (234 at 390), phone crop, object-fit contain.
   ========================================================================== */

/* ---------- desktop (>= 1440px) ---------- */
.nf-an-banner {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 2.65055 / 1; min-height: 0; /* min-height 0: Safari 27 otherwise grows this flex item to the loaded image's natural height (2896px) */
  overflow: visible;
}

.nf-an-banner__frame {
  position: absolute;
  inset: 0;
}

.nf-an-banner__pic {
  display: block;
  width: 100%;
  height: 100%;
}

.nf-an-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- tablet (810px to 1439.98px) ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-page > .nf-an-banner,
  .nf-an-banner { aspect-ratio: auto; width: 810px; height: 401px; }
}

/* ---------- phone (<= 809.98px) ---------- */
@media (max-width: 809.98px) {
  .nf-an-banner { aspect-ratio: 1.66667 / 1; }
  .nf-an-banner__img { object-fit: contain; }
}