#top.hero {
    background-image: linear-gradient(180deg, rgba(15, 28, 46, 0.31), rgba(15, 28, 46, 0.51)),
        url("../assets/matrix-ade/hero.webp");

    background-position: 40% 40%;
    min-height: var(--hero-height-without-cta);
}
#top.hero .hero-grid {
    min-height: calc(var(--hero-height-without-cta) - 80px);
}
@media (max-width: 720px) {
    #top.hero {
        background-position: 70% 40%;
        background-size: cover;
        min-height: var(--hero-height-without-cta-mobile);
    }

    #top.hero .hero-grid {
        min-height: calc(var(--hero-height-without-cta-mobile) - 80px);
    }
}