:root{
  /* base.css */
  --color-black: #181D20;
  --color-white: #fff;
  --color-main: var(--color-blue);
  --color-accent: #FF644C;
  --color-link: var(--color-black);
  --color-link-hover: var(--color-main);
  --color-text: var(--color-black);
  --color-text-placeholder: #EFF7FD;
  --color-focus: var(--color-text-placeholder);
  --color-bg-gray: #D9D9D9;

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

  --font-size-l: 30px;
  --font-size-m: 19px;
  --font-size-s: 14px;

  --font-size-h1: 60px;
  --font-size-h1-page: 50px;
  --font-size-h2: 45px;
  --font-size-h3: var(--font-size-l);
  --font-size-h4: var(--font-size-m);
  --font-size-h5: var(--font-size-s);

  --border-radius: 27px;

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

  --bs-gutter-x: 15px;

  /* custom */
  --color-red: #FF2000;
  --color-btn-accent: #FEAC9E;
  --color-blue: #0076BA;
  --color-blue-light: #92D9FF;
  --color-blue-dark: #003A5E;
  --color-blue-bg: rgba(82, 190, 248, .25);
  
  --border-radius-l: 37px;

  --gradient-red: linear-gradient(31deg, var(--color-red) 0%, var(--color-btn-accent) 100%);
  --gradient-blue: linear-gradient(10deg, var(--color-main) 0%, var(--color-main) 50%, var(--color-blue-light) 100%);

  --icon-size-s: 24px;
  --icon-size-m: 38px;
  --icon-size-l: 61px;
}

@media screen and (max-width: 1199px){
  :root{
    --font-size-h1: 50px;
    --font-size-h1-page: var(--font-size-h1);
    --font-size-h2: 40px;
    --font-size-l: 26px;
    --font-size-m: 18px;
    --font-size-s: 14px;

    --icon-size-m: 36px;
    --icon-size-l: 55px;
  }
}
@media screen and (max-width: 991px){}
@media screen and (max-width: 767px){
  :root{
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-l: 19px;
    --font-size-m: 14px;
    --font-size-s: 12px;

    --icon-size-l: 42px;
  }
}
@media screen and (max-width: 576px){
}