%cw-classes {
  // --#{$prefix}gutter-x: #{$grid-gutter-width};
  // --#{$prefix}col-g: #{$grid-gutter-width};
  // --#{$prefix}grid-col: calc(((var(--#{$prefix}container-max-width) - var(--#{$prefix}gutter-x)) + var(--#{$prefix}col-g)) / #{$grid-columns});

  width: calc((var(--#{$prefix}grid-col) * var(--#{$prefix}cw-size)) - var(--#{$prefix}col-g, #{$grid-gutter-width})) !important; // stylelint-disable-line declaration-no-important

  // margin-right: calc(var(--#{$prefix}col-g) / 2);
  // margin-left: calc(var(--#{$prefix}col-g) / 2);
  margin-right: var(--#{$prefix}col-g, #{$grid-gutter-width});

  &:last-child {
    margin-right: 0;
  }
}

.cw-last {
  margin-right: 0;
}

.cw-g-0 {
  --#{$prefix}col-g: 0rem; // stylelint-disable-line length-zero-no-unit
}

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  @for $i from 1 through $grid-columns {
    .cw#{$infix}-#{$i} {
      @extend %cw-classes;
    }
  }

  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
    @if $grid-columns > 0 {
      @for $i from 1 through $grid-columns {
        .cw#{$infix}-#{$i} {
          --#{$prefix}cw-size: #{$i};
        }
        .ch#{$infix}-#{$i} {
          height: calc((var(--#{$prefix}grid-col) * #{$i}) - var(--#{$prefix}col-g, #{$grid-gutter-width})) !important; // stylelint-disable-line declaration-no-important
          // height: calc((var(--#{$prefix}grid-col) * #{$i}));
        }
      }
    }
  }
}