/* ==========================================================================
   UTILITIES / #TYPOGRAPHY
   ========================================================================== */

/* Typography utilities will override any matching property declarations */

/* Text alignment utilities
   =========================================== */
// @each loop to generate breakpoint specific (using the responsivize mixin) and general use text alignment classes

@each $alignment-position in left center right justify {
  .u-text-#{$alignment-position} {
    @include responsivize() {
      text-align: $alignment-position !important;
    }
  }
}

/* Font style utilities
  =========================================== */

.u-text-bold {
  font-weight: bold !important;
}

.u-text-italic {
  font-style: italic !important;
}

/**
 * Text utility to constrain text to a maximum of 75 characters per line,
 * regardless of the text’s `font-size`. 30em is roughly equal to 75 characters,
 * so we hard-code this value. Please don’t change it.
 *
 * https://jsfiddle.net/5571te7g/
 *
 */
.u-text-constrain {
  max-width: 30em !important;
}