@font-face {
    font-family: "Roboto-Bold";
    src: url("/fonts/Roboto-Bold.woff2");
    font-display: swap;
}

@font-face {
    font-family: "Roboto-Medium";
    src: url("/fonts/Roboto-Medium.woff2");
    font-display: swap;
}

@font-face {
    font-family: "Lato-Medium";
    src: url("/fonts/Lato-Medium.woff2");
    font-display: swap;
}

@font-face {
    font-family: "Roboto-Regular";
    src: url("/fonts/Roboto-Regular.woff2");
    font-display: swap;
}

.font-style--Bold {
    --font-family: Roboto-Bold;
}

.font-style--Medium {
    --font-family: Roboto-Medium;
}

.font-style--Medium--Lato {
    --font-family: Lato-Medium;
}

/* 
    If you want to create new font - you have to create
    2 local custome variables:
        - font-size
        - line-height
*/
[class*="static-font"],
h1,
h2,
h3,
a {
    --_font-size: var(--font-size, 1em);
    --_line-height: var(--line-height, calc(var(--_font-size) + 4px));
    --_font-family: var(--font-family, Roboto-Regular), sans-serif;

    font-size: var(--_font-size);
    line-height: var(--_line-height);
    font-family: var(--_font-family);
}

.static-font--XXL,
h1 {
    --font-size: 32px;
    --line-height: 38px;
}

.static-font--XL,
h2 {
    --font-size: 24px;
    --line-height: 28px;
}

.static-font--L,
h3 {
    --font-size: 20px;
    --line-height: 24px;
}

.static-font--M {
    --font-size: 20px;
    --line-height: 26px;

    @media (max-width: 1024px) and (min-width: 510px) {
        --font-size: 18px;
        --line-height: 22px;
    }

    @media (max-width: 509px) {
        --font-size: 16px;
        --line-height: 20px;
    }
}

.static-font--S,
a {
    --font-size: 16px;
    --line-height: 20px;
}

.static-font--XS {
    --font-size: 18px;
    --line-height: 24px;
}

.static-font--XXS {
    --font-size: 14px;
    --line-height: 20px;

    @media (max-width: 1024px) and (min-width: 510px) {
        --font-size: 12px;
        --line-height: 18px;
    }

    @media (max-width: 509px) {
        --font-size: 10px;
        --line-height: 16px;
    }
}

/* ==================================================== */

/* 
    If you want to create new responsive font - you have to create
    6 local custome variables:
        - max-screen-width
        - max-font-size
        - max-line-height
        - min-screen-width
        - min-font-size
        - min-line-height
*/
[class*="responsive-font"] {
    /* Require props */
    --_max-font-size: var(--max-font-size);
    --_max-line-height: var(--max-line-height);
    --_max-screen-width: var(--max-screen-width);

    --_min-font-size: var(--min-font-size);
    --_min-line-height: var(--min-line-height);
    --_min-screen-width: var(--min-screen-width);
    /* ============= */

    /* Computed deltas */
    --font-delta: (var(--_max-font-size) - var(--_min-font-size));
    --line-height-delta: (var(--_max-line-height) - var(--_min-line-height));
    --screen-width-delta: (var(--_max-screen-width) - var(--_min-screen-width));
    /* =============== */

    --main-coef: (100vw - var(--_min-screen-width) * 1px) / var(--screen-width-delta);

    /* Target values */
    --computed-font-size: calc(var(--_min-font-size) * 1px + var(--font-delta) * var(--main-coef));
    --computed-line-height: calc(var(--_min-line-height) + var(--line-height-delta) * var(--main-coef));
    --_font-family: var(--font-family, Roboto-Regular), sans-serif;
    /* ============= */

    font-size: clamp(calc(var(--_min-font-size) * 1px), var(--computed-font-size), calc(var(--_max-font-size) * 1px));
    line-height: clamp(calc(var(--_min-line-height) * 1px), var(--computed-line-height), calc(var(--_max-font-size) * 1px));
    font-family: var(--_font-family);
}

.responsive-font--M {
    --max-screen-width: var(--desktop-size-max);
    --max-font-size: 20;
    --max-line-height: 26;

    --min-screen-width: var(--tablet-size-max);
    --min-font-size: 18;
    --min-line-height: 22;

    @media (max-width: 1024px) and (min-width: 510px) {
        --max-screen-width: var(--tablet-size-max);
        --max-font-size: 18;
        --max-line-height: 22;

        --min-screen-width: var(--mobile-size-max);
        --min-font-size: 16;
        --min-line-height: 20;
    }

    @media (max-width: 509px) {
        --max-screen-width: var(--mobile-size-max);
        --max-font-size: 16;
        --max-line-height: 20;

        --min-screen-width: var(--mobile-size-min);
        --min-font-size: 16;
        --min-line-height: 20;
    }
}

.responsive-font--XS {
    --max-screen-width: var(--desktop-size-max);
    --max-font-size: 14;
    --max-line-height: 20;

    --min-screen-width: var(--tablet-size-max);
    --min-font-size: 12;
    --min-line-height: 18;

    @media (max-width: 1024px) and (min-width: 510px) {
        --max-screen-width: var(--tablet-size-max);
        --max-font-size: 12;
        --max-line-height: 18;

        --min-screen-width: var(--mobile-size-max);
        --min-font-size: 10;
        --min-line-height: 16;
    }

    @media (max-width: 509px) {
        --max-screen-width: var(--mobile-size-max);
        --max-font-size: 10;
        --max-line-height: 16;

        --min-screen-width: var(--mobile-size-min);
        --min-font-size: 10;
        --min-line-height: 16;
    }
}

/* =============================================================== */