:root {
    --color-main: #3D3D3D;
    --color-accent: #00A6D5;
    --color-accent-hover: #0568839a;
    --color-active: #000;
    --color-active-hover: #000;
    --color-white: #FFFFFF;
    --color-black: #000;
    --color-bg: #FFFFFF;
    --color-title: #3D3D3D;
    --color-gray: #9F9F9F;



    --color-link: #3D3D3D;
    --color-link-hover: #00A6D5;
    --color-link-light: #FFFFFF;
    --color-link-light-hover: #999999;


    --font-main: 'Montserrat';
    --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: 20px;

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

    /* custom */
    /* *empty* */
    --bs-gutter-x: 30px;
}

@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) {}