.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;
  background: blue;
}

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

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

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

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

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