.hero {
    position: relative;
    height: 60vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.hero:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5215686275), rgba(0, 0, 0, 0.2549019608), rgba(0, 0, 0, 0))
}

.content {
    position: relative;
    margin-top: -7rem;
    border-style: solid;
    z-index: 1
}

@media screen and (min-width: 992px) {
    .content {
        margin-top: -10rem
    }
}