.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; } }