////////////////////////////////////////
///////////// - Headers - //////////////
////////////////////////////////////////

h1 {
    font-size: 48px;

    @media @media_md {
        & {
            font-size: 36px;
        }
    }
}

h2 {
    font-size: 36px;

    @media @media_md {
        & {
            font-size: 28px;
        }
    }
}

h3 {
    font-size: 24px;

    @media @media_md {
        & {
            font-size: 22px;
        }
    }
}

h4 {
    font-size: 18px;

    @media @media_md {
        & {
            font-size: 17px;
        }
    }
}

p {
    line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.4;
    color: black;
    font-family: "Poppins", Helvetica, Arial, system-ui;
}

html.dark {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: white;
    }
}

////////////////////////////////////////
/////////// - Paragraphs - /////////////
////////////////////////////////////////

p {
    line-height: 1.8;
}

////////////////////////////////////////
///////// - Text Components - //////////
////////////////////////////////////////

.metric {
    font-size: 36px;
}