section#blog.hero {
    --hero-bg: url("/images/hero-background.png");
    width: 100%;
    min-height: 300px;
    height: auto;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

section#blog.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
            rgba(38, 38, 38, 0.41),
            rgba(38, 38, 38, 0.41)
        ),
        var(--hero-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}