/* Extra small devices (portrait phones, less than 576px). Sizing: x - (x / 1.5) */
@media (max-width: 575.98px) {
    .f-1x {
        font-size: 0.3334em;
    }

    .f-lg {
        font-size: 0.4444em;
        line-height: .75em;
        vertical-align: -.0667em;
    }

    .f-2x {
        font-size: 0.6667em;
    }

    .f-3x {
        font-size: 1em !important;
    }

    .f-5x {
        font-size: 1.6666em;
    }

    .f-7x {
        font-size: 2.3333em;
    }

    .f-9x {
        font-size: 3em;
    }
}

/* Small devices (landscape phones, 576px and up). Sizing: x - (x / 3) */
@media (max-width: 767.98px) {
    .f-1x {
        font-size: 0.6667em;
    }

    .f-lg {
        font-size: 0.8888em;
        line-height: .75em;
        vertical-align: -.0667em;
    }

    .f-2x {
        font-size: 1.3333em;
    }

    .f-3x {
        font-size: 2em !important;
    }

    .f-5x {
        font-size: 3.3333em;
    }

    .f-7x {
        font-size: 4.6667em;
    }

    .f-9x {
        font-size: 6em;
    }
}

/* Medium devices (tablets, 768px and up). Sizing: x - (x / 4) */
@media (max-width: 991.98px) {
    .f-1x {
        font-size: 0.75em;
    }

    .f-lg {
        font-size: 0.9999em;
        line-height: .75em;
        vertical-align: -.0667em;
    }

    .f-2x {
        font-size: 1.5em;
    }

    .f-3x {
        font-size: 2.25em;
    }

    .f-5x {
        font-size: 3.75em;
    }

    .f-7x {
        font-size: 5.25em;
    }

    .f-9x {
        font-size: 6.75em;
    }
}

/* Large devices (desktops, 992px and up). Sizing: x - (x / 6) */
@media (max-width: 1199.98px) {
    .f-1x {
        font-size: 0.8333em;
    }

    .f-lg {
        font-size: 1.1111em;
        line-height: .75em;
        vertical-align: -.0667em;
    }

    .f-2x {
        font-size: 1.6667em;
    }

    .f-3x {
        font-size: 2.5em;
    }

    .f-5x {
        font-size: 4.1666em;
    }

    .f-7x {
        font-size: 5.8333em;
    }

    .f-9x {
        font-size: 7.5em;
    }
}

/* Extra large devices (large desktops, 1200px and up). Sizing: x */
@media (min-width: 1200px) {
    .f-1x {
        font-size: 1em;
    }

    .f-lg {
        font-size: 1.3333em;
        line-height: .75em;
        vertical-align: -.0667em;
    }

    .f-2x {
        font-size: 2em;
    }

    .f-3x {
        font-size: 3em;
    }

    .f-5x {
        font-size: 5em;
    }

    .f-7x {
        font-size: 7em;
    }

    .f-9x {
        font-size: 9em;
    }
}