$grid-cols: 12;
$size-break-point-sm: (
  min: $size-break-point-s-min,
  max: $size-break-point-s-max
);
$size-break-point-md: (
  min: $size-break-point-m-min,
  max: $size-break-point-m-max
);
$size-break-point-lg: (
  min: $size-break-point-l-min,
  max: $size-break-point-l-max
);

@each $modifier, $breakpoint in ('': 0, '-sm': $size-break-point-sm, '-md': $size-break-point-md, '-lg': $size-break-point-lg) {
  @include create-mq($breakpoint) {
    @include create-col-classes($modifier, $grid-cols);
    @include create-alignment-classes($modifier);
  }
}

.row {
  @include make-row();
}

// Flexbox
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}