_display.scss

.sd-d-none {
  display: none !important;
}

.sd-d-inline {
  display: inline !important;
}

.sd-d-inline-block {
  display: inline-block !important;
}

.sd-d-block {
  display: block !important;
}

.sd-d-grid {
  display: grid !important;
}

.sd-d-flex-row {
  display: -ms-flexbox !important;
  display: flex !important;
  flex-direction: row !important;
}

.sd-d-flex-column {
  display: -ms-flexbox !important;
  display: flex !important;
  flex-direction: column !important;
}

.sd-d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@each $cat, $width in $media-widths {
  @media (min-width: $width) {
    .sd-d-#{$cat}-none {
      display: none !important;
    }

    .sd-d-#{$cat}-inline {
      display: inline !important;
    }

    .sd-d-#{$cat}-inline-block {
      display: inline-block !important;
    }

    .sd-d-#{$cat}-block {
      display: block !important;
    }

    .sd-d-#{$cat}-grid {
      display: grid !important;
    }

    .sd-d-#{$cat}-flex {
      display: -ms-flexbox !important;
      display: flex !important;
    }

    .sd-d-#{$cat}-inline-flex {
      display: -ms-inline-flexbox !important;
      display: inline-flex !important;
    }
  }
}

// will align on major axis of flex
.sd-align-major-start {
  justify-content: flex-start !important;
}

.sd-align-major-end {
  justify-content: flex-end !important;
}

.sd-align-major-center {
  justify-content: center !important;
}

.sd-align-major-justify {
  justify-content: space-between !important;
}

.sd-align-major-spaced {
  justify-content: space-evenly !important;
}

// will align on minor axis of flex
.sd-align-minor-start {
  align-items: flex-start !important;
}

.sd-align-minor-end {
  align-items: flex-end !important;
}

.sd-align-minor-center {
  align-items: center !important;
}

// default
.sd-align-minor-stretch {
  align-items: stretch !important;
}