.generate-grid(@item-count, @row-size) {

  @r1     : 58;
  @g1     : 121;
  @b1     : 224;
  @r2     : 112;
  @g2     : 224;
  @b2     : 168;
  @r-diff : (@r2 - @r1) / @item-count;
  @g-diff : (@g2 - @g1) / @item-count;
  @b-diff : (@b2 - @b1) / @item-count;

  .generate-column-colors(@r1, @g1, @b1, @r-diff, @g-diff, @b-diff, @item-count);


  .generate-column-colors(@r, @g, @b, @r-diff, @g-diff, @b-diff, @n, @i: 0) when (@i < @n) {

    @row   : ceil((@i + 1) / @row-size);
    @column: mod(@i, @row-size)+1;

    &>* .vc_row:nth-child(@{row}) .wpb_column:nth-child(@{column}) .vc_column-inner {
      background-color: rgb(@r, @g, @b) !important;
    }

    .generate-column-colors((@r + @r-diff), (@g + @g-diff), (@b + @b-diff), @r-diff, @g-diff, @b-diff, @n, (@i + 1));
  }

  &>*>*>* .vc_column-inner {
    color : white !important;
    height: 100%;

    .wpb_wrapper {
      display       : flex;
      flex-direction: column;
      align-items   : center;
    }


    h2 {
      color: white !important;
    }

    a {
      color: white !important;
    }

    .hb-button {
      margin-bottom: 1em !important;
      border-color : #fff;
    }

  }