.hero{
    height:690px;
}
.hero::before{
    content:"";
    background-image: url('../images/hero2-light.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    position: absolute;
    inset:0;
    opacity:.3;
}
@media screen and (max-width: 1500px) {
    .hero{
        aspect-ratio: 22 / 9;
        height:auto;
    }
    .hero::before{
        background-size: cover;
    }
}
@media (prefers-color-scheme: dark) {
    .hero::before {
        background-image: url('../images/hero2-dark.png');
    }
}