// ===
// Spacer
// ===
$spacer-default: 1rem;
$spacer-map: (
  0: 0,
  1: ($spacer-default * .25),
  2: ($spacer-default * .5),
  3: $spacer-default,
  4: ($spacer-default * 1.5),
  5: ($spacer-default * 3)
);

@each $spacer, $value in $spacer-map {
  .m-#{$spacer} {
    margin: $value;
  }
  .mt-#{$spacer} {
    margin-top: $value;
  }
  .mr-#{$spacer} {
    margin-right: $value;
  }
  .mb-#{$spacer} {
    margin-bottom: $value;
  }
  .ml-#{$spacer} {
    margin-left: $value;
  }
  .mx-#{$spacer} {
    margin-left: $value;
    margin-right: $value;
  }
  .my-#{$spacer} {
    margin-top: $value;
    margin-bottom: $value;
  }

  .p-#{$spacer} {
    padding: $value;
  }
  .pt-#{$spacer} {
    padding-top: $value;
  }
  .pr-#{$spacer} {
    padding-right: $value;
  }
  .pb-#{$spacer} {
    padding-bottom: $value;
  }
  .pl-#{$spacer} {
    padding-left: $value;
  }
  .px-#{$spacer} {
    padding-left: $value;
    padding-right: $value;
  }
  .py-#{$spacer} {
    padding-top: $value;
    padding-bottom: $value;
  }
}

.mb-custom{
  margin-bottom: 30px;
}

/*Margin*/
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}