// --------------------------------------------------------------------------
// Gap  (px-based, 0–200)
//   gap-0 … gap-200 | gap-x-* | gap-y-*
// --------------------------------------------------------------------------
@for $i from 0 through 200 {
  .gap-#{$i}   { gap: #{$i}px !important; }
  .gap-x-#{$i} { column-gap: #{$i}px !important; }
  .gap-y-#{$i} { row-gap: #{$i}px !important; }
}