.hero {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero:after,
.hero:before {
    left: 0;
    z-index: 2;
    width: 100%;
    height: 45%;
    content: '';
    position: absolute;
    pointer-events: none;
}

.hero:after {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.53) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero:before {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.53) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero img,
.hero video {
    width: 100%;
    display: block;
    height: 100dvh;
    object-fit: cover;
    max-height: 640px;
    object-position: center;
}

@media screen and (min-width: 768px) {
    .hero img,
    .hero video {
        width: 100%;
        height: auto;
        display: block;
        max-height: none;
    }
}