:root {
    --color-main: #2E2E2E;
    --color-accent: #E31E25;
    --color-accent-hover: #b71a1f;
    --color-active: #387740;
    --color-active-hover: #326a39;
    --color-white: #fff;
    --color-black: #000;
    --color-bg: #F6F6F6;
    --color-title: #2E2E2E;
    --color-gray: #9F9F9F;



    --color-link: #2E2E2E;
    --color-link-hover: #387740;
    --color-link-light: #fff;
    --color-link-light-hover: #999999;


    --font-main: 'Roboto';
    --fonts: 'Roboto', "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --font-size-l: 20px;
    --font-size-m: 16px;
    --font-size-s: 14px;

    --font-size-h1: 48px;
    --font-size-h1-page: var(--font-size-h1);
    --font-size-h2: 30px;
    --font-size-h3: var(--font-size-l);
    --font-size-h4: var(--font-size-m);
    --font-size-h5: var(--font-size-m);

    --border-radius: 15px;

    --grid-col-w: 225px;
    /* --gap: clamp(15px, 2vw, 30px); */
    --gap: 11px;

    /* custom */
    /* *empty* */

}

@media screen and (max-width: 1199px) {
    /* :root{} */
}

@media screen and (max-width: 991px) {}

@media screen and (max-width: 767px) {
    :root {
        --font-size-h1: 18px;
        --font-size-h2: 17px;
        --font-size-l: 16px;
        --font-size-m: 14px;
        --font-size-s: 12px;
    }
}

@media screen and (max-width: 576px) {}