/*

  Text Align

  A set of responsive, mobile-first classes to set text-align on elements.

  Base class names are namespaced across three breakpoints:

  *  -ns = not-small (covers everything larger than mobile)
  *  -m  = medium
  *  -l  = large

*/

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

@media screen and (min-width: 48em) {
  .tl-ns  { text-align: left; }
  .tr-ns  { text-align: right; }
  .tc-ns  { text-align: center; }
}

@media screen and (min-width: 48em) and (max-width: 64em) {
  .tl-m  { text-align: left; }
  .tr-m  { text-align: right; }
  .tc-m  { text-align: center; }
}

@media screen and (min-width: 64em)  {
  .tl-l  { text-align: left; }
  .tr-l  { text-align: right; }
  .tc-l  { text-align: center; }
}