/* © 2015 - 2018 Caret.io Ltd.
   ------------------------------ */

/*
 * we should always have 2+ rems on each side to match grid spacing
 * grid is 46rem and we need 2 rem on each side = 50rem
 * at 20px font size, the min width that we can support is 1000px:
 * 19x50=950
 * 18x50=900
 * etc.
 */

@media only screen and (max-width: 999px) {
  :root {
    font-size: 19px;
  }
}

@media only screen and (max-width: 949px) {
  :root {
    font-size: 18px;
  }
}

@media only screen and (max-width: 899px) {
  :root {
    font-size: 17px;
  }
}

@media only screen and (max-width: 849px) {
  :root {
    font-size: 16px;
  }
}

@media only screen and (max-width: 799px) {
  :root {
    font-size: 15px;
  }
}

@media only screen and (max-width: 749px) {
  :root {
    font-size: 14px;
  }
}

@media only screen and (max-width: 699px) {
  :root {
    font-size: 13px;
  }
}

@media only screen and (max-width: 649px) {
  :root {
    font-size: 12px;
  }
}

@media only screen and (max-width: 599px) {
  :root {
    font-size: 11px;
  }
}

@media only screen and (max-width: 549px) {
  :root {
    font-size: 10px;
  }
}

@media only screen and (max-width: 499px) {
  :root {
    font-size: 9px;
  }
}

@media only screen and (max-width: 449px) {
  :root {
    font-size: 8px;
  }
}