.hero {
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40px;
    left: 50%;
    width: min(1080px, 100vw);
    height: 760px;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: .7;
    background-image: radial-gradient(circle, rgba(106, 100, 122, .42) 1px, transparent 1.2px);
    background-size: 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 54% 52% at 50% 38%, #000 0%, rgba(0, 0, 0, .78) 48%, transparent 86%);
    mask-image: radial-gradient(ellipse 54% 52% at 50% 38%, #000 0%, rgba(0, 0, 0, .78) 48%, transparent 86%);
}

.hero > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 760px) {
    .hero::before {
        top: 0;
        height: 650px;
        opacity: .52;
        background-size: 15px 15px;
        -webkit-mask-image: radial-gradient(ellipse 75% 48% at 50% 25%, #000 0%, transparent 82%);
        mask-image: radial-gradient(ellipse 75% 48% at 50% 25%, #000 0%, transparent 82%);
    }
}