#hero-bg{position:absolute;top:100%;left:50%;transform:translate(-50%,-100%);width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:-1;object-fit: cover;}
#hero:before{position:absolute;background:url(../media/img/hero/pattern.png) repeat;content:"";display:block;opacity:0.5;width:100%;height:100%;}
#hero{background:url(../media/img/hero/hero-bg.jpg) 60% 40% / cover no-repeat;position:relative;box-shadow:inset 0 1px 10px #000;z-index:20;height:90vh;max-height:1440px;min-height:600px;overflow:hidden;}
.hero-content-container{position:absolute;text-align:center;top:50%;left:50%;transform:translate(-50%,-80%);width:300px;max-width:100%;margin:auto}
#hero .hero-logo-container{width:100%;max-width:100%;padding:0}
#hero .hero-logo-container a{max-width:100%;width:320px;display:block;margin:auto}
#hero #hero-date{color:#fff;text-shadow:0 0 10px #000;font-size:clamp(20px,2.5vw,32px);margin:1em 0}
#hero .cta{font-size:clamp(16px,2vw,24px);border-radius:50px;overflow:hidden;padding:15px 0;}
#hero #hero-trailer{margin-top:1em;}
@media screen and (min-width: 768px) {
.hero-content-container{width:400px;max-width:50%}
}
@media screen and (min-width: 1024px) {
#hero{background-position:center center}
.hero-content-container{position:absolute;padding:2em 1em 5em;top:50%;left:25%;transform:translate(-50%,-50%);max-width:960px;width:50%;}
.hero-btn{width:45%;display:inline-block;}
#hero .hero-logo-container a{width:auto}
}