/* Fade the actual image boundary as well as the overlay beneath the text. */
.hero{background:#080909;isolation:isolate}
.hero .hero-image{z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.5) 20%,rgba(0,0,0,.88) 34%,#000 46%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.5) 20%,rgba(0,0,0,.88) 34%,#000 46%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#080909 0%,rgba(8,9,9,.98) 18%,rgba(8,9,9,.88) 30%,rgba(8,9,9,.55) 44%,rgba(8,9,9,.14) 62%,rgba(8,9,9,0) 82%),linear-gradient(0deg,#080909 0%,rgba(8,9,9,.75) 7%,rgba(8,9,9,0) 26%,rgba(8,9,9,0) 82%,rgba(8,9,9,.4) 100%)}
.hero .hero-content{position:relative;z-index:2}
.hero .hero-bottom{z-index:2}
@media(max-width:52rem){.hero .hero-image{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}.hero::before{background:linear-gradient(90deg,rgba(8,9,9,.92),rgba(8,9,9,.55) 45%,rgba(8,9,9,.08) 90%),linear-gradient(0deg,#080909 0%,rgba(8,9,9,.7) 12%,transparent 55%,rgba(8,9,9,.4) 100%)}}
@media(max-width:40rem){.hero .hero-image{inset:0;-webkit-mask-image:none;mask-image:none}.hero::before{background:linear-gradient(90deg,rgba(8,9,9,.64) 0%,rgba(8,9,9,.24) 75%,rgba(8,9,9,.08) 100%),linear-gradient(0deg,#080909 0%,rgba(8,9,9,.8) 15%,rgba(8,9,9,.12) 65%,rgba(8,9,9,.5) 100%)}}