/* Background imagery only: retain the existing hero dimensions and content hierarchy. */
body .about-hero.section-dark {
  background-image: linear-gradient(90deg, rgba(7, 28, 47, .94), rgba(7, 28, 47, .79) 48%, rgba(7, 28, 47, .38)), url("assets/images/about-campus-learning.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body .news-events-hero {
  background-image: linear-gradient(90deg, rgba(7, 28, 47, .94), rgba(7, 28, 47, .82) 44%, rgba(7, 28, 47, .3)), url("assets/images/news-events-workshop.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.campus-banner-note {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(7, 28, 47, .72);
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  body .about-hero.section-dark,
  body .news-events-hero {
    background-position: 65% center;
    background-image: linear-gradient(180deg, rgba(7, 28, 47, .86), rgba(7, 28, 47, .78)), var(--campus-banner-image);
  }
  body .about-hero.section-dark { --campus-banner-image: url("assets/images/about-campus-learning.webp"); }
  body .news-events-hero { --campus-banner-image: url("assets/images/news-events-workshop.webp"); }
}