@font-face {
  font-family: 'TT Interphases Pro Mono';
  src: url('../fonts/tt-interphases-pro-mono-regular.woff2') format('woff2'),
    url('../fonts/tt-interphases-pro-mono-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Interphases Pro Mono';
  src: url('../fonts/tt-interphases-pro-mono-bold.woff2') format('woff2'),
    url('../fonts/tt-interphases-pro-mono-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Flex VF';
  src: url('../fonts/RobotoFlex-VariableFont.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-stretch: 25% 151%;
  font-display: swap;
}


@font-face {
  font-family: 'Roboto Flex';
  src: url('../fonts/RobotoFlex-VariableFont.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-stretch: 25% 151%;
  font-display: swap;
}

:root {
  --color-white: #FFFFFF;
  --color-black: #2A2A2A;
  --color-gray: #A8A8A8;
  --color-blue: #2B9BEC;
  --color-blue-light: #EAF7FF;
  --color-blue-pale: #74C5FE;
  --color-blue-sky: #C9E9FF;
  --color-blue-soft: #A7DCFF;
  --color-blue-dark: #9ABED8;
  --color-blue-placeholder: #9ABED8;
  --color-blue-line-soft: rgba(154, 190, 216, 0.44);
  --color-gray-bg: #F2F2F2;
  --color-error: #FA5659;

  --font-main: 'TT Interphases Pro Mono', 'Courier New', monospace;
  --font-heading: 'Roboto Flex VF', 'Roboto Flex', sans-serif;
  --heading-vf:
    "slnt" 0,
    "wdth" 40,
    "GRAD" 150,
    "opsz" 18,
    "XOPQ" 96,
    "YOPQ" 79,
    "XTRA" 468,
    "YASQ" 712,
    "YTLC" 514,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738;

  --header-width: 1920px;
  --header-height: 104px;
  --header-side-padding: 32px;
  --logo-width: 238px;

  --phone-width: 209px;
  --consultation-width: 166px;

  --gap-logo-phone: 107px;
  --gap-phone-catalog: 416px;
  --gap-catalog-consultation: 185px;

  --header-line-width: 1856px;
  --header-line-gap: 30px;
  --content-width: 1856px;

  --catalog-image-width: 917px;
  --catalog-image-height: 516px;
  --catalog-column-width: 918px;
  --catalog-column-height: 900px;
  --catalog-columns-gap: 20px;
  --catalog-text-to-image: 312px;

  --btn-height: 44px;
  --btn-radius: 4px;
  --btn-padding-x: 18px;
  --btn-padding-y: 12px;
  --btn-font-size: 18px;
  --btn-line-height: 1.1;
}