.grid-row {
    background: #fff;
}

.grid-col {
    background: #20a0ff;
    padding: .5rem 1rem;
    text-align: center;
    color: #fff;
}

.grid-col:nth-of-type(2n+1) {
    background-color: #7cbce9;
}

.grid-row-nest {
    &>.grid-col {
        padding: 0;
    }
}

#first {
    position: relative;
    // opacity: .5;
    background: blue;

    &>.grid-col:first-child {
        color: black;
    }
}

#nest {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    z-index: 2;
    background: #fff;

    & .grid-row-nest {
        margin: 0;
    }

    & .grid-col:nth-of-type(2n+1) {
        background: rgba(0, 0, 0, .6);
        padding: .5rem;
    }

    & .grid-col:nth-of-type(2n) {
        background: rgba(0, 0, 0, .3);
        padding: .5rem;
    }

    // &>.grid-col:nth-of-type(2n+1) {
    //     background: #000;
    // }
}