:root{
  /* base.css */
  --color-black: #000;
  --color-white: #fff;
  --color-main: #1A7898;
  --color-main-hover: #15647f;
  --color-accent: #007bff;
  --color-gray: #9c9d9a;
  --color-border: #999999;

  --color-link: var(--color-black);
  --color-link-hover: var(--color-main);
  --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: 10px;
  
  --grid-col-w: 225px;
  --gap: clamp(15px, 2vw, 30px);

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