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

  .p-#{$i} {
    padding: rem($spacing-value);
  }

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

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

  .pt-#{$i} {
    padding-top: rem($spacing-value);
  }

  .pr-#{$i} {
    padding-right: rem($spacing-value);
  }

  .pb-#{$i} {
    padding-bottom: rem($spacing-value);
  }

  .pl-#{$i} {
    padding-left: rem($spacing-value);
  }
}

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

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

    .pr-#{$i}-col {
      padding-right: $column_width;
    }

    .pl-#{$i}-col {
      padding-left: $column_width;
    }
  }
}

@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}--p-#{$i} {
        padding: rem($spacing-value);
      }

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

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

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

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

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

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

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

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

        .#{$breakpoint-name}--pr-#{$i}-col {
          padding-right: $column_width;
        }

        .#{$breakpoint-name}--pl-#{$i}-col {
          padding-left: $column_width;
        }
      }
    }
  }
}