.hero-with-bg,
.fc-section-hero-with-bg {
  /* Cross-fade between mobile/desktop images instead of a hard swap */
  background-image: none;
  overflow: hidden;
}

.hero-with-bg::before,
.fc-section-hero-with-bg::before,
.hero-with-bg::after,
.fc-section-hero-with-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 250ms ease;
  z-index: 0;
}

/* Default to mobile on initial paint; fallback to desktop if mobile not provided */
.hero-with-bg::after,
.fc-section-hero-with-bg::after {
  background-image: var(--hero-bg-mobile, var(--hero-bg-desktop));
  opacity: 1;
}

.hero-with-bg::before,
.fc-section-hero-with-bg::before {
  background-image: var(--hero-bg-desktop);
  opacity: 0;
}

/* Overlay and content should sit above the image layers */
.hero-with-bg__overlay {
  z-index: 1;
}

.hero-with-bg .container,
.fc-section-hero-with-bg .container {
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  .hero-with-bg::after,
  .fc-section-hero-with-bg::after {
    opacity: 0;
  }

  .hero-with-bg::before,
  .fc-section-hero-with-bg::before {
    opacity: 1;
  }
}