/* Mobile first (default) */
.xl6-text { font-size: 48px; }
.xl5-text { font-size: 36px; }
.xl4-text { font-size: 30px; }
.xl3-text { font-size: 24px; }
.xl2-text { font-size: 20px; }
.xl-text  { font-size: 18px; }
.l-text   { font-size: 16px; }
.m-text   { font-size: 14px; }
.s-text   { font-size: 13px; }
.xs-text  { font-size: 12px; }
.xs2-text { font-size: 10px; }

/* Tablets and up */
@media (min-width: 768px) {
  .xl6-text { font-size: 72px; }
  .xl5-text { font-size: 60px; }
  .xl4-text { font-size: 48px; }
  .xl3-text { font-size: 36px; }
  .xl2-text { font-size: 30px; }
  .xl-text  { font-size: 24px; }
  .l-text   { font-size: 20px; }
  .m-text   { font-size: 18px; }
  .s-text   { font-size: 16px; }
  .xs-text  { font-size: 14px; }
  .xs2-text { font-size: 12px; }
}

/* Desktops and up */
@media (min-width: 992px) {
  .xl6-text { font-size: 96px; }
  .xl5-text { font-size: 72px; }
  .xl4-text { font-size: 60px; }
  .xl3-text { font-size: 48px; }
  .xl2-text { font-size: 40px; }
  .xl-text  { font-size: 32px; }
  .l-text   { font-size: 24px; }
  .m-text   { font-size: 20px; }
  .s-text   { font-size: 18px; }
  .xs-text  { font-size: 16px; }
  .xs2-text { font-size: 12px; }
}