// Columns gutter classes

.columns {

  column-gap: var(--gap-size, 0);
  &.gap-no { margin-left: 1px; > * { margin-left: -1px; margin-bottom: -1px  } }

  &.gap_px , &.gap-h_px  { column-gap: var(--space-px) }
  &.gap_xs , &.gap-h_xs  { column-gap: var(--space-xs) }
  &.gap_s  , &.gap-h_s   { column-gap: var(--space-s)  }
  &.gap_m  , &.gap-h_m   { column-gap: var(--space-m)  }
  &.gap_l  , &.gap-h_l   { column-gap: var(--space-l)  }
  &.gap_xl , &.gap-h_xl  { column-gap: var(--space-xl) }
}