/* =========================
   SPACING UTILITIES
========================= */

@each $key, $value in $spaces {

  /* margin */
  .m-#{$key}  { margin:        $value !important; }
  .mt-#{$key} { margin-top:    $value !important; }
  .mr-#{$key} { margin-right:  $value !important; }
  .mb-#{$key} { margin-bottom: $value !important; }
  .ml-#{$key} { margin-left:   $value !important; }
  .mx-#{$key} {
    margin-left:  $value !important;
    margin-right: $value !important;
  }
  .my-#{$key} {
    margin-top:    $value !important;
    margin-bottom: $value !important;
  }

  /* padding */
  .p-#{$key}  { padding:        $value !important; }
  .pt-#{$key} { padding-top:    $value !important; }
  .pr-#{$key} { padding-right:  $value !important; }
  .pb-#{$key} { padding-bottom: $value !important; }
  .pl-#{$key} { padding-left:   $value !important; }
  .px-#{$key} {
    padding-left:  $value !important;
    padding-right: $value !important;
  }
  .py-#{$key} {
    padding-top:    $value !important;
    padding-bottom: $value !important;
  }

  /* gap */
  .g-#{$key} {
    gap: $value !important;
  }
}

.row {
  display: flex;
  flex-direction: row;
} 

.w-100 {
  width: 100%;
}