/* =========================
   TABLET (<= 992px)
========================= */
@media (min-width: 993px) {

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }

    p,
    li,
    a,
    span {
        font-size: 1rem;
    }
}
@media (max-width: 992px) {

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }

    p,
    li,
    a,
    span {
        font-size: 0.95rem;
    }
}


/* =========================
   MOBILE (<= 768px)
========================= */

@media (max-width: 768px) {

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }

    p,
    li,
    a,
    span {
        font-size: 0.9rem;
    }
}


/* =========================
   SMALL MOBILE (<= 576px)
========================= */

@media (max-width: 576px) {

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }

    p,
    li,
    a,
    span {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}


/* =========================
   EXTRA SMALL (<= 400px)
========================= */

@media (max-width: 400px) {

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }
    h6 { font-size: 0.85rem; }

    p,
    li,
    a,
    span {
        font-size: 0.8rem;
    }
}