/* The hero art is a real <img> (see .hero-bg in index.html) instead of a CSS
   background, so the LCP candidate can carry fetchpriority and srcset. */
.hero{position:relative;overflow:hidden;background:#051326}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,19,38,.96) 0%,rgba(5,19,38,.84) 38%,rgba(5,19,38,.25) 72%,rgba(5,19,38,.1) 100%)}
.hero-copy{position:relative;z-index:2}
@media(max-width:550px){
  .hero-bg{object-position:78% center}
  .hero:after{background:linear-gradient(180deg,rgba(5,19,38,.94) 0%,rgba(5,19,38,.89) 64%,rgba(5,19,38,.72) 100%)}
}