@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/Lato/Lato-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: 400;
    src: url("./fonts/Lato/Lato-Italic.woff2") format("woff2");
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    src: url("./fonts/Lato/Lato-Bold.woff2") format("woff2");
}

body {
    font-family: $fhi-core-font-family-sans-serif;
    font-size: $fhi-core-font-size-2;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    font-weight: 400;
}
h1,
.h1 {
    font-size: $fhi-core-font-size-7;
}
h2,
.h2 {
    font-size: $fhi-core-font-size-6;
}
h3,
.h3 {
    font-size: $fhi-core-font-size-4;
}
h4,
.h4 {
    font-size: $fhi-core-font-size-3;
}
h5,
.h5 {
    font-size: $fhi-core-font-size-2;
    font-weight: 700;
}
h6,
.h6 {
    color: red; // don't use h6
    font-size: 8px;
}
.lead {
    font-size: $fhi-core-font-size-3;
}
b,
.b,
strong,
.font-weight-bold {
    font-weight: $font-weight-bold;
}
a {
    color: $fhi-inline-link-color;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: $fhi-core-px;
    text-underline-offset: $fhi-core-px * 4;

    &:hover {
        color: $fhi-inline-link-hover-color;
    }
}

@include media-breakpoint-up(lg) {
    h1,
    .h1 {
        font-size: $fhi-core-font-size-9;
    }
    h2,
    .h2 {
        font-size: $fhi-core-font-size-7;
    }
    h3,
    .h3 {
        font-size: $fhi-core-font-size-6;
    }
    h4,
    .h4 {
        font-size: $fhi-core-font-size-4;
    }
    h5,
    .h5 {
        font-size: $fhi-core-font-size-3;
    }
    .lead {
        font-size: $fhi-core-font-size-4;
    }
}