/*

   TYPE SCALE

   A mobile first, highly readable type-scale.

*/

.f1    { font-size: 4rem; }
.f2    { font-size: 2rem; }
.f3    { font-size: 1.25rem; }
.f4    { font-size: 1rem; }
.f5,
.small { font-size: .85rem; }

@media only screen and (min-width: 48em) {
  .f1-ns    { font-size: 4rem; }
  .f2-ns    { font-size: 2rem; }
  .f3-ns    { font-size: 1.25rem; }
  .f4-ns    { font-size: 1rem; }
  .f5-ns,
  .small-ns { font-size: .85rem; }
}

@media only screen and (min-width: 48em) and (max-width: 64em) {
  .f1-m    { font-size: 5rem; }
  .f2-m    { font-size: 2.5rem; }
  .f3-m    { font-size: 1.25rem; }
  .f4-m    { font-size: 1rem; }
  .f5-m,
  .small-m { font-size: .85rem; }
}

@media only screen and (min-width: 64em)  {
  .f1-l    { font-size: 5rem; }
  .f2-l    { font-size: 2.5rem; }
  .f3-l    { font-size: 1.5rem; }
  .f4-l    { font-size: 1.25rem; }
  .f5-l,
  .small-l { font-size: 1rem; }
}