.hero{isolation:isolate}
.hero-artwork{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  background-color:#050608;
}
.hero:before{
  z-index:1;
  background:linear-gradient(90deg,rgba(4,5,7,.96) 0%,rgba(4,5,7,.78) 42%,rgba(4,5,7,.20) 72%,rgba(4,5,7,.04) 100%)!important;
  background-color:transparent!important;
}
.hero:after{z-index:2}
.hero-inner{z-index:3}
.hero-loading-indicator{
  position:absolute;
  z-index:4;
  right:22%;
  top:50%;
  width:30px;
  height:30px;
  margin:-15px 0 0 -15px;
  border:3px solid rgba(255,255,255,.28);
  border-top-color:var(--orange);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
html.hero-image-loading .hero-loading-indicator{
  opacity:1;
  animation:apex-hero-spin .8s linear infinite;
}
html.hero-image-ready .hero-loading-indicator,
html.hero-image-failed .hero-loading-indicator{display:none}
@keyframes apex-hero-spin{to{transform:rotate(360deg)}}
.media-poster{
  display:block!important;
  visibility:visible!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  object-fit:contain!important;
  background:#101722;
}
@media(max-width:760px){
  .hero-artwork{object-position:center top}
  .hero:before{
    background:linear-gradient(180deg,rgba(4,5,7,.04) 0%,rgba(4,5,7,.14) 42%,rgba(4,5,7,.76) 76%,#040507 100%)!important;
    background-color:transparent!important;
  }
  .hero-loading-indicator{right:50%;top:31%}
}