@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("../media/fonts/Montserrat-Thin.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("../media/fonts/Montserrat-ExtraLight.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../media/fonts/Montserrat-Light.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../media/fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../media/fonts/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../media/fonts/Montserrat-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../media/fonts/Montserrat-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../media/fonts/Montserrat-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../media/fonts/Montserrat-Black.ttf") format("truetype");
}

/* @font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../media/fonts/Caveat-Regular-Cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../media/fonts/Caveat-Regular-Latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
} */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --font-family: "Montserrat", sans-serif;
    /* --second-family: "Caveat", sans-serif; */

    --h1: clamp(4.25rem, 2.3462rem + 8.4615vw, 12.5rem);
    --h2: clamp(2.75rem, 2.2423rem + 2.2564vw, 4.95rem);
    --h3: clamp(2.125rem, 1.8365rem + 1.2821vw, 3.375rem);
    --h4: clamp(1.25rem, 1.0192rem + 1.0256vw, 2.25rem);
    --h5: clamp(1.125rem, 0.9808rem + 0.641vw, 1.75rem);
    --h6: clamp(1rem, 0.9135rem + 0.3846vw, 1.375rem);

    --body-s: clamp(0.8125rem, 0.7692rem + 0.1923vw, 1rem);
    --body-m: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem);
    --body-l: clamp(1.25rem, 1.0769rem + 0.7692vw, 2rem);
    --body-xl: clamp(2rem, 0.9423rem + 0.764vw, 3.25rem);

    --handwrite-s: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);
    --handwrite-m: clamp(1.25rem, 1.1058rem + 0.641vw, 1.875rem);
    --handwrite-l: clamp(1.5rem, 1.3269rem + 0.7692vw, 2.25rem);
    --handwrite-xl: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);

    --space-3xs: calc(var(--body-m) * 0.25);
    --space-2xs: calc(var(--body-m) * 0.5);
    --space-xs: calc(var(--body-m) * 0.75);
    --space-s: var(--body-m);
    --space-m: calc(var(--body-m) * 1.5);
    --space-l: calc(var(--body-m) * 2);
    --space-xl: calc(var(--body-m) * 3);
    --space-2xl: calc(var(--body-m) * 4);
    --space-3xl: calc(var(--body-m) * 5);
    --space-4xl: calc(var(--body-m) * 6);

    --radius-xs: 8px;
    --radius-s: 14px;
    --radius-m: 24px;
    --radius-l: 28px;
    --radius-xl: 50px;
    --radius-2xl: 60px;
    --radius-full: 999px;
}

/* mobile base: 320+ */

/* маленькие телефоны */
@media (max-width: 374px) {}

/* обычные телефоны */
@media (max-width: 560px) {}

/* планшеты / крупные телефоны */
@media (max-width: 768px) {}

/* маленькие ноуты / планшеты landscape */
@media (max-width: 1024px) {}

/* ноутбуки */
@media (max-width: 1280px) {}

/* широкие экраны, если нужно */
@media (min-width: 1440px) {}

@media (max-width: 768px) {
    :root {
        --h2: clamp(1.75rem, 1.325rem + 1.9vw, 2.375rem);
        /* --h2: clamp(2rem, 1.8rem + 1.9vw, 2.7rem); */
        --h3: clamp(1.6rem, 1.1715rem + 1.5vw, 1.975rem);
        --body-xl: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem);
        --radius-l: 24px;
        --radius-xl: 30px;
        --radius-2xl: 28px;
        /* --body-xl: clamp(1rem, 0.9423rem + 0.764vw, 2.25rem); */
        /* --body-xl: clamp(2rem, 0.9423rem + 0.764vw, 3.25rem); */

    }
}

@media (max-width: 420px) {
    :root {
        --radius-xl: 24px;
        --radius-2xl: 24px;
    }
}

h1 {
    font-family: var(--font-family);
    font-weight: 800;
    font-size: var(--h1);
    text-transform: uppercase;
    line-height: 80%;
    text-align: center;
    color: var(--color-dark);
}

h2 {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--h2);
    line-height: 100%;
    text-align: center;
    color: var(--color-dark);
}

h3 {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--h3);
    line-height: 100%;
    text-align: center;
    color: var(--color-dark);
    max-width: 60rem;

}

h4,
h5,
h6 {
    font-family: var(--font-family);
    font-weight: 700;
    line-height: 100%;
    /* text-align: center; */
    color: var(--color-dark);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

.body-s,
.body-m,
.body-l,
.body-xl {
    font-family: var(--font-family);
    font-weight: 600;
    line-height: 130%;
    text-align: center;
    color: var(--color-dark);
}

.body-s {
    font-size: var(--body-s);
    max-width: 36rem;
    line-height: 140%;
    /* font-weight: 500; */

}

.body-m {
    font-size: var(--body-m);
    /* font-weight: 500; */
    max-width: 40rem;
    color: var(--color-dark);
}

.body-l {
    font-size: var(--body-l);
    max-width: 52rem;
}

.body-xl {
    font-size: var(--body-xl);
    max-width: 62rem;
}

.handwrite,
.handwrite-s,
.handwrite-m,
.handwrite-l,
.handwrite-xl {
    font-family: var(--second-family);
    font-weight: 400;
    line-height: 90%;
    color: var(--color-handwrite);
}

.handwrite,
.handwrite-s {
    font-size: var(--handwrite-s);
}

.handwrite-m {
    font-size: var(--handwrite-m);
}

.handwrite-l {
    font-size: var(--handwrite-l);
}

.handwrite-xl {
    font-size: var(--handwrite-xl);
}