.hero {
    height: 100vh;
    height: 100svh;
    background: #000 url(/images/hero-image.jpg) center center no-repeat;
    background-size: cover;
    position: relative;
    justify-content: center;
    align-items: center;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.hero-content {
    color: #fff;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}