.hero-unit {
    min-height: $hero-height-mobile;

    position: relative;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    color: $text-color-inverted;

    @media screen and (min-width: $breakpoint) {
        min-height: $hero-height;
    }

    &:before {
        content: "";
        width: 100%;
        height: 14em;

        position: absolute;
        bottom: 0;

        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8));
    }
}

.hero-unit__wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.hero-unit__subtitle {
    margin-top: 0.3em;
}

.hero-unit {
    min-height: $hero-height-mobile;

    position: relative;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    color: $text-color-inverted;

    @media screen and (min-width: $breakpoint) {
        min-height: $hero-height;
    }

    &:before {
        content: "";
        width: 100%;
        height: 14em;
        max-height: 100%;

        position: absolute;
        bottom: 0;

        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8));
    }
}

.hero-unit__wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.hero-unit__subtitle {
    margin-top: 0.3em;
}

Fix gradient leaking into header on small screens
Fix gradient leaking into header on small screens
