.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50vh;
}

.heroBackground {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;

    background-image: url(../images/hero.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
            filter: blur(5px)
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50vh;
}

.heroBackground {
    position: absolute;
    /* Make the image larger than normal and then mask it so it has clean edges */
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;

    background-image: url(../images/hero.jpg);
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
            filter: blur(5px)
}

Fix hero background size on mobile, adjust positioning
Fix hero background size on mobile, adjust positioning
