/* Keep the navy/photo join gradual, including when a banner is rendered again. */
@media (min-width:801px) {
  html body :is(main,#main) :is(.about-banner,.performance-banner,.leadership-photo-banner,.campuses-approved-banner,.why-fade-banner,.academics-photo-banner,.elementary-reference-banner,.middle-reference-banner,.high-reference-banner,.dual-photo-banner,.career-reference-banner,.ec-hero,.resource-center-banner,.student-life-hero,.ath-hero,.hs-hero,.sd-hero,.family-hero,.hybrid-resource-hero,.hybrid-reference-banner,.how-hybrid-banner,.hero)>:is(img,video),
  html body .apply-hero-photo>img {
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.45) 20%,rgba(0,0,0,.8) 34%,#000 50%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.45) 20%,rgba(0,0,0,.8) 34%,#000 50%);
  }
  html body #main .portrait-banner::after {
    left:0;right:0;width:100%;
    background:linear-gradient(90deg,#102e49 0%,#102e49 32%,rgba(16,46,73,.96) 40%,rgba(16,46,73,.75) 48%,rgba(16,46,73,.2) 63%,transparent 76%);
  }
}

/* Athletics media stays behind a full-width fade, above the solid hero background. */
html body main.hs-page .hs-hero{isolation:isolate}
html body main.hs-page .hs-hero>.hs-banner-video{z-index:0}
html body main.hs-page .hs-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
html body main.hs-page .hs-hero>div{position:relative;z-index:2}
@media(min-width:801px){
html body main.hs-page .hs-hero>.hs-banner-video{inset:0;width:100%;height:100%;object-fit:cover}
html body main.hs-page .hs-hero::after{background:linear-gradient(90deg,#102e49 0%,#102e49 23%,rgba(16,46,73,.98) 31%,rgba(16,46,73,.9) 40%,rgba(16,46,73,.72) 49%,rgba(16,46,73,.43) 60%,rgba(16,46,73,.16) 73%,rgba(16,46,73,.04) 86%,transparent 100%)}
}