$pos: (
  t: top,
  b: bottom,
  l: left,
  r: right
);
@for $i from 0 through 30 {
  @each $key, $value in $pos {
    .m#{$key}-#{$i * 2} {
      margin: {
        #{$value}: 2px * $i;
      }
    }
    .p#{$key}-#{$i * 2} {
      padding: {
        #{$value}: 2px * $i;
      }
    }
  }
  .mcol-#{$i * 2} {
    margin: {
      top: 2px * $i;
      bottom: 2px * $i;
    }
  }
  .mrow-#{$i * 2} {
    margin: {
      right: 2px * $i;
      left: 2px * $i;
    }
  }
  .m-#{$i * 2} {
    margin: 2px * $i;
  }

  .pcol-#{$i * 2} {
    padding: {
      top: 2px * $i;
      bottom: 2px * $i;
    }
  }
  .prow-#{$i * 2} {
    padding: {
      right: 2px * $i;
      left: 2px * $i;
    }
  }
  .p-#{$i * 2} {
    padding: 2px * $i;
  }
}

$fjs: (
  fs: flex-start,
  fe: flex-end,
  sb: space-between,
  sa: space-around,
  c: center
);
$ais: (
  fs: flex-start,
  fe: flex-end,
  s: stretch,
  b: baseline,
  c: center
);
@each $fjsKey, $fjsValue in $fjs {
  @each $aisKey, $aisValue in $ais {
    .f-#{$fjsKey}-#{$aisKey} {
      display: flex;
      justify-content: $fjsValue;
      align-items: $aisValue;
    }
  }
}
.f-col {
  flex-direction: column;
}
.f-row {
  flex-direction: row;
}

@for $i from 1 through 24 {
  .flex-#{$i} {
    flex: $i;
    display: block;
    min-width: 0;
  }
}

.bg-w {
  background-color: #fff;
}

.br-10 {
  border-radius: 10px;
}