Display

.u-display-block        { display: block; }
.u-display-none         { display: none; }
.u-display-inline       { display: inline; }
.u-display-inline-block { display: inline-block; }

// display:block at (min-width: $sm)
.u-display-block-sm {
  display: none;
  @include media($sm) {
    display: block !important; 
  } 
}

// display:block at (min-width: $md)
.u-display-block-md {
  display: none;
  @include media($md) {
    display: block !important; 
  } 
}

// display:block at (min-width: $lg)
.u-display-block-lg {
  display: none;
  @include media($lg) {
    display: block !important; 
  } 
}

// display:block at (min-width: $xl)
.u-display-block-xl {
  display: none;
  @include media($xl) {
    display: block !important; 
  } 
}

// display:none at (min-width: $sm)
.u-display-none-sm {
  @include media($sm) {
    display: none !important; 
  } 
}

// display:none at (min-width: $md)
.u-display-none-md {
  @include media($md) {
    display: none !important; 
  } 
}

// display:none at (min-width: $lg)
.u-display-none-lg {
  @include media($lg) {
    display: none !important; 
  } 
}

// display:none at (min-width: $xl)
.u-display-none-xl {
  @include media($xl) {
    display: none !important; 
  } 
}

.u-display-flex {
  @include display(flex);
}

// Display flex at (min-width: $md)
.u-display-flex-md {
  display: block;
  @include media($md) {
    @include display(flex);
  }
}

// Display flex at (min-width: $lg)
.u-display-flex-lg {
  display: block;
  @include media($lg) {
    @include display(flex);
  }
}

.u-overflow-visible {
  overflow: visible;
}
.u-overflow-hidden {
  overflow: hidden;
}