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

@each $name, $value in $space {
  .gutterx-#{$name} {
    margin-left: -$value;
  
    & > * {
      margin-left: $value;
    }
  }
  
  .guttery-#{$name} {
    margin-top: -$value;
  
    & > * {
      margin-top: $value;
    }
  }
  
  .gutter-#{$name} {
    margin-left: -$value;
    margin-top: -$value;
  
    & > * {
      margin-left: $value;
      margin-top: $value;
    }
  }
}