h1,
h2,
h3,
.title {
    font-family: Metropolis, sans-serif;
    font-weight: 600;
}

.font-semibold {
    font-weight: 600;
}

.text-heading8 {
    font-size: 32px;
    font-weight: 600;
}

.text-heading7 {
    font-size: 28px;
    font-weight: 600;
}

.text-heading6 {
    font-size: 25px;
    font-weight: 600;
}

.text-heading5 {
    font-size: 22px;
    font-weight: 600;
}

.text-heading4 {
    font-size: 20px;
    font-weight: 600;
}

.text-heading3 {
    font-size: 18px;
    font-weight: 600;
}

.text-heading2 {
    font-size: 16px;
    font-weight: 600;
}

.text-heading1 {
    font-size: 14px;
    font-weight: 600;
}

.text-base {
    font-size: 16px;
}

.text-danger {
    color: var(--error-text);
}

// Metropolis font definitions
@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/metropolis/Metropolis-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/metropolis/Metropolis-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/metropolis/Metropolis-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/metropolis/Metropolis-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/metropolis/Metropolis-LightItalic.woff2') format('woff2');
}
