:root {
  /* base.css */
  --color-black: #000;
  --color-white: #fff;
  --color-title: #252525;
  --color-light-bg: #fff;
  --color-dark-bg: #202020;
  --color-light-gray: #F7F7F8;
  --color-main: #F84A03;
  --color-main-hover: #c83c04;
  --color-accent: #FAAA1C;
  --color-accent-hover: #FAAA1C;
  --color-gray: #3A3A3A;
  --color-dark-gray: #383838;
  --color-border: #999999;

  --color-link: #1E1E1E;
  --color-link-hover: #606060;
  --color-link-light: #fff;
  --color-link-light-hover: #999999;
  --color-text: var(--color-black);
  --color-text-placeholder: var(--color-black);
  --color-focus: var(--color-gray);
  --color-bg-gray: var(--color-gray);

  --font-main: 'Jost';
  --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: 36px;
  --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: 0px;

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