.heroGridItem-0 {
    grid-area: 1 / 8 / 2 / 9
}

.heroGridItem-1 {
    grid-area: 1 / 16 / 2 / 17
}

.heroGridItem-2 {
    grid-area: 2 / 4 / 3 / 5
}

.heroGridItem-3 {
    grid-area: 2 / 19 / 3 / 20
}

.heroGridItem-4 {
    grid-area: 4 / 6 / 5 / 7
}

.heroGridItem-5 {
    grid-area: 4 / 18 / 5 / 19
}

.heroGridItem-6 {
    grid-area: 5 / 20 / 6 / 21
}

.heroGridItem-7 {
    grid-area: 6 / 3 / 7 / 4
}

.heroGridItem-8 {
    grid-area: 7 / 18 / 8 / 19
}

.heroGridItem-9 {
    grid-area: 8 / 6 / 9 / 7
}

.heroGridItem-10 {
    grid-area: 8 / 15 / 9 / 16
}

.heroGridContent {
    grid-area: 2 / 7 / 8 / 17
}

@media(max-width:768px) {
    .heroGridItem-0 {
        grid-area: 1 / 3 / 2 / 4
    }

    .heroGridItem-1 {
        grid-area: 1 / 7 / 2 / 8
    }

    .heroGridItem-2 {
        grid-area: 1 / 9 / 2 / 10
    }

    .heroGridItem-3 {
        grid-area: 2 / 2 / 3 / 3
    }

    .heroGridItem-4 {
        grid-area: 3 / 9 / 4 / 10
    }

    .heroGridItem-5 {
        grid-area: 4 / 2 / 5 / 3
    }

    .heroGridItem-6 {
        grid-area: 5 / 9 / 6 / 10
    }

    .heroGridItem-7 {
        grid-area: 7 / 2 / 8 / 3
    }

    .heroGridItem-8 {
        grid-area: 7 / 9 / 8 / 10
    }

    .heroGridItem-9 {
        grid-area: 10 / 4 / 11 / 5
    }

    .heroGridItem-10 {
        grid-area: 10 / 8 / 11 / 9
    }

    .heroGridContent {
        grid-area: 2 / 3 / 10 / 9
    }
}

.heroGridMask {
    --col: calc(100% / 22);
    --hero-grid-mask: linear-gradient(to right, rgba(0 0 0 / .1) 0, rgba(0 0 0 / .18) calc(1*var(--col)), rgba(0 0 0 / .35) calc(2*var(--col)), rgba(0 0 0 / .43) calc(3*var(--col)), rgba(0 0 0 / .51) calc(4*var(--col)), rgba(0 0 0 / .59) calc(5*var(--col)), rgba(0 0 0 / .67) calc(6*var(--col)), rgba(0 0 0 / .75) calc(7*var(--col)), rgba(0 0 0 / .84) calc(8*var(--col)), rgba(0 0 0 / .92) calc(9*var(--col)), rgba(0 0 0 / 1) calc(10*var(--col)), rgba(0 0 0 / 1) calc(11*var(--col)), rgba(0 0 0 / .92) calc(12*var(--col)), rgba(0 0 0 / .84) calc(13*var(--col)), rgba(0 0 0 / .75) calc(14*var(--col)), rgba(0 0 0 / .67) calc(15*var(--col)), rgba(0 0 0 / .59) calc(16*var(--col)), rgba(0 0 0 / .51) calc(17*var(--col)), rgba(0 0 0 / .43) calc(18*var(--col)), rgba(0 0 0 / .35) calc(19*var(--col)), rgba(0 0 0 / .18) calc(20*var(--col)), rgba(0 0 0 / .1) 100%);
    -webkit-mask-image: var(--hero-grid-mask);
    mask-image: var(--hero-grid-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: -100px;
    margin-bottom: -100px
}

@media(max-width:768px) {
    .heroGridMask {
        --col: 10%;
        --hero-grid-mask: linear-gradient(to right, rgba(0 0 0/.1) 0, rgba(0 0 0/.18) calc(1*var(--col)), rgba(0 0 0/.35) calc(2*var(--col)), rgba(0 0 0/.6) calc(3*var(--col)), rgba(0 0 0/.7) calc(4*var(--col)), rgba(0 0 0/.8) calc(5*var(--col)), rgba(0 0 0/.9) calc(6*var(--col)), rgba(0 0 0/.8) calc(7*var(--col)), rgba(0 0 0/.35) calc(8*var(--col)), rgba(0 0 0/.18) calc(9*var(--col)), rgba(0 0 0/.1) 100%);
        -webkit-mask-image: var(--hero-grid-mask);
        mask-image: var(--hero-grid-mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 120% 150%;
        mask-size: 120% 150%;
        -webkit-mask-position: center;
        mask-position: center;
        overflow: visible
    }
}