.vc_grid-gutter(@gutter) {
  .vc_grid.vc_row.vc_grid-gutter-@{gutter} {
    margin-bottom: -@gutter;
    .vc_pageable-slide-wrapper {
      // TODO: test this
      margin-right: -@gutter;
    }
    .vc_grid-item {
      padding-right: @gutter;
      padding-bottom: @gutter;
    }
  }
}

.vc_grid-gutter(1px);
.vc_grid-gutter(2px);
.vc_grid-gutter(3px);
.vc_grid-gutter(4px);
.vc_grid-gutter(5px);
.vc_grid-gutter(10px);
.vc_grid-gutter(15px);
.vc_grid-gutter(20px);
.vc_grid-gutter(25px);
.vc_grid-gutter(30px);
.vc_grid-gutter(35px);

// Custom gap from the number+units field. The value is provided inline as the
// `--vc-grid-gap` custom property, so any value/unit is supported.
.vc_grid.vc_row.vc_grid-gutter {
  margin-bottom: ~"calc(-1 * var(--vc-grid-gap, 0px))";
  .vc_pageable-slide-wrapper {
    margin-right: ~"calc(-1 * var(--vc-grid-gap, 0px))";
  }
  .vc_grid-item {
    padding-right: ~"var(--vc-grid-gap, 0px)";
    padding-bottom: ~"var(--vc-grid-gap, 0px)";
  }
}