$gutter: 8px;

@mixin margin($index) {
  margin: $index * $gutter;
}

@mixin margin-top($index) {
  margin-top: $index * $gutter;
}

@mixin margin-bottom($index) {
  margin-bottom: $index * $gutter;
}

@mixin margin-left($index) {
  margin-left: $index * $gutter;
}

@mixin margin-right($index) {
  margin-right: $index * $gutter;
}

@mixin margin-horizontal($index) {
  @include margin-left($index);
  @include margin-right($index);
}

@mixin margin-vertical($index) {
  @include margin-top($index);
  @include margin-bottom($index);
}

@mixin no-margin() {
  margin: 0 !important;
}

@mixin no-margin-horizontal() {
  margin-left: 0;
  margin-right: 0;
}

@mixin no-margin-vertical() {
  margin-top: 0;
  margin-bottom: 0;
}

@mixin margin-auto {
  margin: auto;
}

@mixin margin-horizontal-auto {
  margin-left: auto;
  margin-right: auto;
}

@mixin margin-vertical-auto() {
  margin-top: auto;
  margin-bottom: auto;
}