$spaceAmounts: (0, 4, 8, 16, 20, 24, 32, 40); // Adjust this to include the pixel amounts you need.

@each $space in $spaceAmounts {
  .r-#{$space} {
    right: #{$space}px !important;
  }
  .l-#{$space} {
    left: #{$space}px !important;
  }
  .t-#{$space} {
    top: #{$space}px !important;
  }
  .b-#{$space} {
    bottom: #{$space}px !important;
  }
}


.relative {
  position: relative;
}

.absolute {
  position: absolute;
  &.center {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  &.left-top {
    left: 0;
    top: 0;
  }
  &.right-bottom {
    right: 0;
    bottom: 0;
  }
}

.header-fixed {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

.center {
  text-align: center;
}
.right {
  text-align: right;
}
.left {
  text-align: left;
}