.hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.82) 32%, rgba(5,10,18,.58) 52%, rgba(5,10,18,.22) 70%, rgba(5,10,18,.10) 100%),
        url('/assets/images/errata-family-inheritance-hero.webp') center right / cover no-repeat;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.34));
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

@media (min-width: 901px) {
    .hero {
        min-height: 640px;
        display: flex;
        align-items: center;
    }

    .hero-inner {
        margin-left: 0;
        margin-right: auto;
        padding-right: 2rem;
    }
}

@media (max-width: 900px) {
    .hero {
        background:
            linear-gradient(to bottom, rgba(5,10,18,.62) 0%, rgba(5,10,18,.40) 22%, rgba(5,10,18,.48) 40%, rgba(5,10,18,.78) 68%, rgba(5,10,18,.94) 100%),
            url('/assets/images/errata-family-inheritance-hero.webp') center center / cover no-repeat;
    }

    .hero-inner {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .hero {
        background:
            linear-gradient(to bottom, rgba(5,10,18,.44) 0%, rgba(5,10,18,.28) 18%, rgba(5,10,18,.50) 36%, rgba(5,10,18,.82) 62%, rgba(5,10,18,.96) 100%),
            url('/assets/images/errata-family-inheritance-hero.webp') 62% center / cover no-repeat;
        min-height: 720px;
    }

    .hero-inner {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}