/* The existing layout still controls each image's visible area. */
.hero-image[data-content-background],
.top-hero-image[data-content-background] {
  background-image: var(--ati-content-image);
  background-position: var(--ati-content-position, center);
  background-size: cover;
}

@media (max-width: 860px) {
  .hero-image[data-content-background] {
    background-image: var(--ati-content-mobile, var(--ati-content-image));
    background-position: var(--ati-content-mobile-position, 60% center);
  }
}

@media (max-width: 640px) {
  .top-hero-image[data-content-background] {
    background-image: var(--ati-content-mobile, var(--ati-content-image));
    background-position: var(--ati-content-mobile-position, 60% center);
  }
}