/* Use document-relative image elements instead of CSS variable URL resolution. */
.hero-carousel .carousel-item,.page-banner{position:relative;isolation:isolate;background-image:none!important;overflow:hidden}
.hero-photo,.banner-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;pointer-events:none}
.hero-carousel .carousel-item::after,.page-banner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,20,39,.88),rgba(5,20,39,.62) 48%,rgba(5,20,39,.08))}
.hero-inner,.page-banner>.container{position:relative;z-index:1}
@media(max-width:767px){.hero-photo{object-position:65% center}.hero-carousel .carousel-item::after{background:rgba(5,20,39,.65)}}