/* Tiempos Headline Font Family */
@font-face {
    font-family: 'Tiempos Headline';
    src: url('/fonts/tiempos-headline-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tiempos Headline';
    src: url('/fonts/tiempos-headline-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tiempos Headline';
    src: url('/fonts/tiempos-headline-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tiempos Headline';
    src: url('/fonts/tiempos-headline-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --fl-font-family-display: "Tiempos Headline", serif;
    --fl-font-family-body: "Roboto", sans-serif;

    /* Font scale ratio - adjust these values to change all font sizes at each breakpoint */
    --fl-font-scale: 1;

    /* Base font sizes (for 1920px+) */
    --fl-size-display-largest: 7.5rem;
    --fl-size-display-xxxxlg: 6rem;
    --fl-size-display-xxxlg: 5rem;
    --fl-size-display-xxlg: 4rem;
    --fl-size-display-xlg: 3.5rem;
    --fl-size-display-lg: 3rem;
    --fl-size-headline-xxxmd: 2.5rem;
    --fl-size-headline-xxmd: 2.25rem;
    --fl-size-headline-xmd: 2rem;
    --fl-size-headline-sm: 1.75rem;
    --fl-size-body-xlg: 1.5rem;
    --fl-size-body-lg: 1.25rem;
    --fl-size-body-md: 1rem;
    --fl-size-body-sm: 0.875rem;
    --fl-size-xs: 0.75rem;
    --fl-size-xxs: 0.625rem;
}

/*1920px + │ 1 (100%)*/

/* Breakpoint: 1680-1910px - Scale ratio */
@media (max-width: 1910px) {
    :root {
        --fl-font-scale: 0.9;
    }
}

/* Breakpoint:  1440-1679px - Scale ratio */
@media (max-width: 1679px) {
    :root {
        --fl-font-scale: 0.8;
    }
}

/* Breakpoint: 1024-1439px  - Scale ratio */
@media (max-width: 1439px) {
    :root {
        --fl-font-scale: 0.7;
    }
}

/* Breakpoint: Below 1024px - Scale ratio */
@media (max-width: 1023px) {
    :root {
        --fl-font-scale: 0.6;
    }
}

.fl-display-largest {
    font-family: var(--fl-font-family-display);
    font-weight: 300;
    font-size: calc(var(--fl-size-display-largest) * var(--fl-font-scale));
    line-height: 1.1;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-display-xxxxlg {
    font-family: var(--fl-font-family-display);
    font-weight: 300;
    font-size: calc(var(--fl-size-display-xxxxlg) * var(--fl-font-scale));
    line-height: 1.1;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-display-xxxlg {
    font-family: var(--fl-font-family-display);
    font-weight: 400;
    font-size: calc(var(--fl-size-display-xxxlg) * var(--fl-font-scale));
    line-height: 1.25;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-display-xxlg {
    font-family: var(--fl-font-family-display);
    font-weight: 300;
    font-size: calc(var(--fl-size-display-xxlg) * var(--fl-font-scale));
    line-height: 1.25;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-display-xlg {
    font-family: var(--fl-font-family-display);
    font-weight: 500;
    font-size: calc(var(--fl-size-display-xlg) * var(--fl-font-scale));
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--col-flint);
}

.fl-display-lg {
    font-family: var(--fl-font-family-display);
    font-weight: 500;
    font-size: calc(var(--fl-size-display-lg) * var(--fl-font-scale));
    line-height: 1.5;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-headline-xxxmd {
    font-family: var(--fl-font-family-body);
    font-weight: 300;
    font-size: calc(var(--fl-size-headline-xxxmd) * var(--fl-font-scale));
    line-height: 1.5;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-headline-xxmd {
    font-family: var(--fl-font-family-body);
    font-weight: 300;
    font-size: calc(var(--fl-size-headline-xxmd) * var(--fl-font-scale));
    line-height: 1.5;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-headline-xmd {
    font-family: var(--fl-font-family-body);
    font-weight: 400;
    font-size: calc(var(--fl-size-headline-xmd) * var(--fl-font-scale));
    line-height: 1.5;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-headline-sm {
    font-family: var(--fl-font-family-body);
    font-weight: 400;
    font-size: calc(var(--fl-size-headline-sm) * var(--fl-font-scale));
    line-height: 1.5;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-body-xlg {
    font-family: var(--fl-font-family-body);
    font-weight: 400;
    font-size: calc(var(--fl-size-body-xlg) * var(--fl-font-scale));
    line-height: 1.5;
    letter-spacing: 0em;
}

.fl-body-lg {
    font-family: var(--fl-font-family-body);
    font-weight: 400;
    font-size: calc(var(--fl-size-body-lg) * var(--fl-font-scale));
    line-height: 1.6;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-body-md {
    font-family: var(--fl-font-family-body);
    font-weight: 400;
    font-size: var(--fl-size-body-md);
    line-height: 1.6;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-body-sm {
    font-family: var(--fl-font-family-body);
    font-weight: 600;
    font-size: var(--fl-size-body-sm);
    line-height: 1.6;
    letter-spacing: 0em;
    color: var(--col-flint);
}

.fl-xs {
    font-family: var(--fl-font-family-body);
    font-weight: 600;
    font-size: var(--fl-size-xs);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--col-flint);
}

.fl-caption {
    font-family: var(--fl-font-family-body);
    font-weight: 600;
    font-size: var(--fl-size-xs);
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--col-flint);
}

.fl-xxs {
    font-family: var(--fl-font-family-body);
    font-weight: 500;
    font-size: var(--fl-size-xxs);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--col-flint);
}

.fl-text-highlight{
    background-color:var(--col-amber);
}

.fl-capitalize {
    text-transform: capitalize;
}