.demo-grid {
  &-first {
    margin-top: 24px !important;
  }

  &-second {
    margin-top: 16px !important;
  }

  &-row {
    margin-bottom: 8px;
    background-image:
      linear-gradient(
        90deg,
        #f5f5f5 4.16666667%,
        transparent 0,
        transparent 8.33333333%,
        #f5f5f5 0,
        #f5f5f5 12.5%,
        transparent 0,
        transparent 16.66666667%,
        #f5f5f5 0,
        #f5f5f5 20.83333333%,
        transparent 0,
        transparent 25%,
        #f5f5f5 0,
        #f5f5f5 29.16666667%,
        transparent 0,
        transparent 33.33333333%,
        #f5f5f5 0,
        #f5f5f5 37.5%,
        transparent 0,
        transparent 41.66666667%,
        #f5f5f5 0,
        #f5f5f5 45.83333333%,
        transparent 0,
        transparent 50%,
        #f5f5f5 0,
        #f5f5f5 54.16666667%,
        transparent 0,
        transparent 58.33333333%,
        #f5f5f5 0,
        #f5f5f5 62.5%,
        transparent 0,
        transparent 66.66666667%,
        #f5f5f5 0,
        #f5f5f5 70.83333333%,
        transparent 0,
        transparent 75%,
        #f5f5f5 0,
        #f5f5f5 79.16666667%,
        transparent 0,
        transparent 83.33333333%,
        #f5f5f5 0,
        #f5f5f5 87.5%,
        transparent 0,
        transparent 91.66666667%,
        #f5f5f5 0,
        #f5f5f5 95.83333333%,
        transparent 0
      );
  }

  &-col {
    color: #333;

    &:nth-of-type(odd) {
      color: #fff;
      background: rgba(
        25,
        150,
        249,
        0.5
      );
    }
  }

  &-text {
    padding: 30px 0;
    text-align: center;
    font-size: 30px;
    line-height: 1;
  }

  &-box {
    background: rgba(
      25,
      150,
      249,
      0.8
    );
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 5px 0;
  }

  &-box2 {
    background: rgba(
      25,
      150,
      249,
      0.4
    );
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 5px 0;
  }
}