.hero-image {
    height: 200px;
    width: 100%;
    margin: -$md-space 0 $md-space 0;
    background-size: cover;
    background-position: center center;

    @include media-breakpoint-up(sm) {
        height: 300px;
    }

    @include media-breakpoint-up(md) {
        height: 400px;
    }

    @include media-breakpoint-up(lg) {
        height: 600px;
    }
}