/* TYPEFACES */
@font-face {
    font-family: 'Labil';
    src: url('../fonts/LabilGrotesk-Medium.woff2') format('woff2'),
        url('../fonts/LabilGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Labil';
    src: url('../fonts/LabilGrotesk-Bold.woff2') format('woff2'),
        url('../fonts/LabilGrotesk-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Labil';
    src: url('../fonts/LabilGrotesk-Regular.woff2') format('woff2'),
        url('../fonts/LabilGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* GENERAL */
body {
    font-family: 'Labil';
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'salt' 0,'calt' 0,'ss01' 0,'ss02' 0;
    font-variant-alternates: normal;
}

@media (max-width: 991.98px) {
    body {
        font-size: 1.25rem;
        line-height: 1.3;
    }
}

/* FONT STYLES */
.h-xxl, h1 {
    font-size: 5rem;
    letter-spacing: -0.03em;
    line-height: .9;
    font-weight: 700;
    font-feature-settings: 'salt' 1;
    margin-bottom: var(--space-s);
}

.h-xl, h2 {
    font-size: 3.5rem;
    letter-spacing: -0.02em;
    line-height: 1;
    font-weight: 700;
    font-feature-settings: 'salt' 1;
    margin-bottom: var(--space-s);
}

.h-l, h3 {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    line-height: 1;
    font-weight: 700;
    font-feature-settings: 'salt' 1;
    margin-bottom: var(--space-s);
}

.h-m, h4 {
    font-size: 2rem;
    letter-spacing: -0.01em;
    line-height: 1;
    font-weight: 700;
    font-feature-settings: 'salt' 1;
    margin-bottom: var(--space-s);
}

.h-s, h5 {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 1;
    font-weight: 500;
    font-feature-settings: 'salt' 1;
    margin-bottom: var(--space-s);
}

p {
    margin-bottom: var(--space-xs);
}

.p-m {
    font-size: 1.25rem;
}

.p-s {
    font-size: 16px;
}

.p-xs {
    font-size: 14px;
}

.h-bold {
    font-weight: 700;
}

/* UTILITIES */
.h-regular {font-weight: 400;}
.h-medium {font-weight: 500;}
.h-bold, strong {font-weight: 700;}
.h-uppercase {text-transform: uppercase;}
.h-lowercase {text-transform: lowercase;}
.h-capitalize {text-transform: capitalize;}
.h-underline {text-decoration: underline;}
.h-overline {text-decoration: overline;}
.h-line-through {text-decoration: line-through;}


@media (max-width: 1500px) {
    html{font-size: 90%;}
}

@media (max-width: 1200px) {
    html{font-size: 80%;}
}

@media (max-width: 991.98px) {
    html{font-size: 75%;}
    body {line-height: 1.3;}
    .h-xxl, h1 {
        font-size: 3rem;
    }
    .h-xl, h2 {
        font-size: 2.5rem;
    }
    .h-l, h3 {
        font-size: 2.25rem;
    }
    .h-m, h4 {
        font-size: 2rem;
    }
    .p-m {font-size: 1.25rem;}
    .p-s {font-size: 1.25rem;}
    .p-xs {font-size: 1rem;}
}