/*** HEADINGS ***/
h1 {
    font-size: 48px;
    line-height: normal;
    letter-spacing: -0.96px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1.large {
    font-size: 72px;
    line-height: normal;
    letter-spacing: -1.44px;
}
h1.small {
    font-size: 38px;
    line-height: normal;
    letter-spacing: -0.76px;
}

h2 {
    font-size: 48px;
    line-height: normal;
    letter-spacing: -0.96px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h2.small {
    font-size: 26px;
    line-height: normal;
    letter-spacing: -0.52px;
}
h2.tiny {
    font-size: 22px;
    line-height: normal;
    letter-spacing: -0.44px;
}

h3 {
    font-size: 40px;
    line-height: normal;
    letter-spacing: -0.8px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h4 {
    font-size: 32px;
    line-height: normal;
    letter-spacing: -0.64px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h5 {
    font-size: 24px;
    line-height: normal;
    letter-spacing: -0.48px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h6 {
    font-size: 20px;
    line-height: normal;
    letter-spacing: -0.4px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 575px) {
    h1, h1.large {
        font-size: 28px;
        line-height: 31px;
        letter-spacing: -0.56px;
    }
    h1.small {
        font-size: 24px;
        line-height: 31px;
        letter-spacing: -0.48px;
    }

    h2 {
        font-size: 22px;
        line-height: normal;
        letter-spacing: -0.44px;
    }
    h2.small, h2.tiny {
        font-size: 16px;
        line-height: normal;
        letter-spacing: -0.32px;
    }

    h3, h4, h5, h6 {
        font-size: 20px;
        line-height: normal;
        letter-spacing: -0.40px;
    }
}


/*** BODY ***/
body {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.large {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.18px;
}
.small {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.14px;
}
.xsmall {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.13px;
}
.tiny {
    font-size: 12px;
    line-height: 17px;
    letter-spacing: -0.12px;
}
.micro {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -0.11px;
}

@media screen and (max-width: 575px) {
    body {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.14px;
    }
    .large {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.16px;
    }
    .small, .xsmall, .tiny {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: -0.12px;
    }
    .micro {
        font-size: 10px;
        letter-spacing: -0.1px;
        line-height: 12px; /* 120% */
    }
}


/*** FONT WEIGHTS ***/
.regular {
    font-weight: 400;
}
.medium {
    font-weight: 500;
}
.semibold {
    font-weight: 600;
}
.bold {
    font-weight: 700;
}
.heavy-bold {
    font-weight: 900; 
}

.darkgreen {
    color: var(--ratings-dark-green);
}
.green {
    color: var(--ratings-green);
}
.yellow {
    color: var(--ratings-yellow);
}
.red {
    color: var(--ratings-red);
}