@each $spacing-name, $spacing-value in $spacing {
  $i: index($spacing, $spacing-name $spacing-value) - 1;

  .m-#{$i} {
    margin: rem($spacing-value);
  }

  .mx-#{$i} {
    margin-left: rem($spacing-value);
    margin-right: rem($spacing-value);
  }

  .my-#{$i} {
    margin-top: rem($spacing-value);
    margin-bottom: rem($spacing-value);
  }

  .mt-#{$i} {
    margin-top: rem($spacing-value);
  }

  .mr-#{$i} {
    margin-right: rem($spacing-value);
  }

  .mb-#{$i} {
    margin-bottom: rem($spacing-value);
  }

  .ml-#{$i} {
    margin-left: rem($spacing-value);
  }
}

@each $column_width in $column_widths {
  $i: index($column_widths, $column_width);

  @if $i < 3 {
    .mx-#{$i}-col {
      margin-left: $column_width;
      margin-right: $column_width;
    }

    .mr-#{$i}-col {
      margin-right: $column_width;
    }

    .ml-#{$i}-col {
      margin-left: $column_width;
    }
  }
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    @each $spacing-name, $spacing-value in $spacing {
      $i: index($spacing, $spacing-name $spacing-value) - 1;

      .#{$breakpoint-name}--m-#{$i} {
        margin: rem($spacing-value);
      }

      .#{$breakpoint-name}--mx-#{$i} {
        margin-left: rem($spacing-value);
        margin-right: rem($spacing-value);
      }

      .#{$breakpoint-name}--my-#{$i} {
        margin-top: rem($spacing-value);
        margin-bottom: rem($spacing-value);
      }

      .#{$breakpoint-name}--mt-#{$i} {
        margin-top: rem($spacing-value);
      }

      .#{$breakpoint-name}--mr-#{$i} {
        margin-right: rem($spacing-value);
      }

      .#{$breakpoint-name}--mb-#{$i} {
        margin-bottom: rem($spacing-value);
      }

      .#{$breakpoint-name}--ml-#{$i} {
        margin-left: rem($spacing-value);
      }
    }

    .#{$breakpoint-name}--mx-auto {
      margin-left: auto;
      margin-right: auto;
    }

    .#{$breakpoint-name}--ml-auto {
      margin-left: auto;
    }

    .#{$breakpoint-name}--mr-auto {
      margin-right: auto;
    }

    @each $column_width in $column_widths {
      $i: index($column_widths, $column_width);

      @if $i < 3 {
        .#{$breakpoint-name}--mx-#{$i}-col {
          margin-left: $column_width;
          margin-right: $column_width;
        }

        .#{$breakpoint-name}--mr-#{$i}-col {
          margin-right: $column_width;
        }

        .#{$breakpoint-name}--ml-#{$i}-col {
          margin-left: $column_width;
        }
      }
    }
  }
}