.hero {
    height: 70vh;
    @media (width >= 40rem) {
        height: 60vh;
    }
    @media (width >= 48rem) {
        height: 65vh;
    }
    @media (width >= 64rem) {
        height: 70vh;
    }
}

.video-overlay {
    position: absolute; /* Overlay above video */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0.5) 80%,
            rgba(0, 0, 0, 1) 100%
    );
    pointer-events: none; /* So the gradient does not affect interactivity */
    z-index: 1; /* Ensure it sits over video */
}