/* The image layer can fade independently without fading the banner text. */
:is(.site-main,.madep-gallery,.portfolio-page) :is(.project-page-hero,.profile-hero,.madep-gallery__hero,.portfolio-hero) {
 position:relative; isolation:isolate; overflow:hidden;
 width:min(100% - 64px,1280px); margin:20px auto 0; border-radius:24px;
 background:var(--page-banner-background,#2d176f);
 color:var(--page-banner-text,#fff);
}
:is(.site-main,.madep-gallery,.portfolio-page) :is(.project-page-hero,.profile-hero,.madep-gallery__hero,.portfolio-hero)::before {
 content:""; display:block; position:absolute; z-index:0; inset:0; pointer-events:none;
 background:var(--page-banner-image,none) center / cover no-repeat;
 background-position:50% var(--page-banner-image-position,50%);
 opacity:var(--page-banner-image-opacity,1);
}
:is(.site-main,.madep-gallery,.portfolio-page) :is(.project-page-hero,.profile-hero,.madep-gallery__hero,.portfolio-hero)::after { display:none; }
:is(.site-main,.madep-gallery,.portfolio-page) :is(.project-page-hero,.profile-hero,.madep-gallery__hero,.portfolio-hero) > div { position:relative; z-index:1; }
:is(.site-main,.madep-gallery,.portfolio-page) :is(.project-page-hero,.profile-hero,.madep-gallery__hero,.portfolio-hero) :is(h1,p,span,a) { color:var(--page-banner-text,#fff); }
:is(.site-main,.madep-gallery,.portfolio-page) :is(.project-page-hero,.profile-hero,.madep-gallery__hero,.portfolio-hero) :is(.project-kicker,.profile-eyebrow,.portfolio-eyebrow),
.madep-gallery .madep-gallery__hero p { color:var(--page-banner-accent,#ff9a28); }
@media(max-width:700px) {
 :is(.site-main,.madep-gallery,.portfolio-page) :is(.project-page-hero,.profile-hero,.madep-gallery__hero,.portfolio-hero) {
  width:calc(100% - 32px); margin-top:16px; border-radius:18px;
 }
}