.show-col {
  background: @H500;
  color: #fff;
  padding: 10px;
}

.show-grid {
  [class*='@{ns}col-'] {
    padding: 10px 5px;
    color: @B000;
    background-color: @H500;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 6px;
    [class*='@{ns}col-'] {
      background-color: @H700;

      [class*='@{ns}col-'] {
        background-color: @H900;
      }

      [class*='@{ns}col-']:nth-child(2n) {
        background-color: fade(@H900, 90);
      }
    }

    [class*='@{ns}col-']:nth-child(2n) {
      background-color: fade(@H700, 90);
    }
  }

  [class*='@{ns}col-']:nth-child(2n) {
    background-color: fade(@H500, 80);
  }
}

// Flex grid box
.show-grid {
  .@{ns}flex-box-grid {
    &-item {
      margin-top: 6px;
      margin-bottom: 6px;
      padding: 10px 5px;
      color: white;
      text-align: center;
      background-color: @H500;
    }

    &-item:nth-child(2n) {
      background-color: fade(@H500, 80);
    }
  }
}
