.academy-banner-courses { --inner-hero:url("/assets/academy-banner-courses.webp"); }
.academy-banner-blog { --inner-hero:url("/assets/academy-banner-blog.webp"); }
.academy-banner-batches { --inner-hero:url("/assets/academy-banner-batches.webp"); }
.academy-banner-about { --inner-hero:url("/assets/academy-banner-about.webp"); }
.academy-banner-contact { --inner-hero:url("/assets/academy-banner-contact.webp"); }

body[class^="academy-banner-"] .intro {
  background: #082a5e;
}
body[class^="academy-banner-"] .intro::before {
  mask-image: none;
  background: linear-gradient(90deg,#082a5e40 0%,#082a5e30 52%,transparent 76%), var(--inner-hero) right center / cover no-repeat;
}
body[class^="academy-banner-"] .intro h1,
body[class^="academy-banner-"] .intro p { max-inline-size: min(56%, 650px); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  body[class^="academy-banner-"] .intro::before {
    background: linear-gradient(90deg,#082a5ef0,#082a5e99), var(--inner-hero) right center / cover no-repeat;
  }
  body[class^="academy-banner-"] .intro h1,
  body[class^="academy-banner-"] .intro p { max-inline-size: 100%; }
}