@use "../theme.scss" as *;

@each $name, $value in $space {

  .grid-gutterx-#{$name} {
    margin-left: -$value;
  
    & > * {
      padding-left: $value;
    }
  }
  
  .grid-guttery-#{$name} {
    margin-top: -$value;
  
    & > * {
      padding-top: $value;
    }
  }
  
  .grid-gutter-#{$name} {
    margin-left: -$value;
    margin-top: -$value;
  
    & > * {
      padding-left: $value;
      padding-top: $value;
    }
  }
}