/*
    Marketing Typography rules.
    Used for marketing-type applications where big fonts are preferred.
    Font sizes increase in size as the screen gets larger.
*/
.h1-mktg, .h2-mktg, .h3-mktg, .h4-mktg, .f0-mktg, .f1-mktg, .f2-mktg, .f3-mktg {
    font-family: var(--ff-primary) !important;
    margin: 0;
}
.h1-mktg {
    font-size: 2.5rem !important;
    line-height: 1.125em !important;
}
.h2-mktg {
    font-size: 2rem !important;
    line-height: 1.125em !important;
}
.h3-mktg {
    font-size: 1.375rem !important;
    line-height: 1.25em !important;
}
.h4-mktg {
    font-size: 1.25rem !important;
    line-height: 1.5em !important;
}
.f0-mktg {
    font-size: 2rem !important;
    line-height: 1.125em !important;
    font-weight: 400 !important;
}
.f1-mktg {
    font-size: 1.375rem !important;
    line-height: 1.25em !important;
    font-weight: 400 !important;
}
.f2-mktg {
    font-size: 1.25rem !important;
    line-height: 1.5em !important;
    font-weight: 400 !important;
}
.f3-mktg {
    font-size: 1.125rem !important;
    line-height: 1.5em !important;
    font-weight: 400 !important;
}
.f4-mktg {
    font-size: 1rem !important;
    line-height: 1.5em !important;
    font-weight: 400 !important;
}
.f5-mktg {
    font-size: 0.875rem !important;
    line-height: 1.5em !important;
    font-weight: 400 !important;
}

@media (min-width: 768px) {
    .h1-mktg {
        font-size: 3rem !important;
        line-height: 1.125em !important;
    }
    .f0-mktg {
        font-size: 3rem !important;
        line-height: 1.125em !important;
    }
    .f1-mktg {
        font-size: 1.75rem !important;
        line-height: 1.25em !important;
    }
}

@media (min-width: 1008px) {
    .h1-mktg {
        font-size: 3.5rem !important;
        line-height: 1.125em !important;
    }
    .h2-mktg {
        font-size: 3rem !important;
        line-height: 1.125em !important;
    }
    .h3-mktg {
        font-size: 1.5rem !important;
        line-height: 1.25em !important;
    }
}