.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.tj { text-align: justify; }

.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }

.break-word { word-break: break-word; }
.break-all { word-break: break-all; }
.keep-all { word-break: keep-all; }
.hyphens-auto { hyphens: auto; }
.hyphens-manual { hyphens: manual; }
.hyphens-none { hyphens: none; }

@each $breakpoint in $breakpoints {
  $bp: nth($breakpoint, 1);
  $letters: nth($breakpoint, 2);

  @media #{$bp} {
    .tl-#{$letters} { text-align: left; }
    .tr-#{$letters} { text-align: right; }
    .tc-#{$letters} { text-align: center; }
    .tj-#{$letters} { text-align: justify; }

    .ttc-#{$letters} { text-transform: capitalize; }
    .ttl-#{$letters} { text-transform: lowercase; }
    .ttu-#{$letters} { text-transform: uppercase; }
    .ttn-#{$letters} { text-transform: none; }

    .break-word-#{$letters} { word-break: break-word; }
    .break-all-#{$letters} { word-break: break-all; }
    .keep-all-#{$letters} { word-break: keep-all; }
    .hyphens-#{$letters} { hyphens: auto; }
  }
}