@use "sass:string";
$spaceamounts: (12, 24, 36, 48, 56, 60, 72, 16, 32, 64, 80, 96, 148);
$sides: (top, bottom, left, right);

@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{string.slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p-#{string.slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

.center {
  text-align: center;
}

.flex {
  display: flex;
  flex-wrap: wrap;

  &--center {
    justify-content: center;
  }

  @each $space in $spaceamounts {
    &--gap-#{$space} {
      gap: #{$space}px;
    }
  }
}
