:root {
  --unit: calc(0.0625 * 1rem);

  --font-family: 'Inter', sans-serif;
  --font-family-additional: 'Lexend', sans-serif;

  --h1-size: calc(var(--unit) * 66);
  --h2-size: calc(var(--unit) * 26);
  --h3-size: calc(var(--unit) * 36);
  --h4-size: calc(var(--unit) * 26);
  --h5-size: calc(var(--unit) * 16);
  --h6-size: calc(var(--unit) * 14);

  --big-text-size: 18px;
  --text-size: 14px;
  --small-text-size: 12px;

  --brand-color: #0142FF;
  --brand-color-active: #0056b3;
  --white-color: #fff;
  --text-color: #291B1B;
  --grey-color: #AEAEAE;
  --bg-color: #1B1B29;
  --bg-color-light: #F1F4F8;

  --gradient-grey: linear-gradient(123.75deg, #FAFAFA -30.52%, #D7DBE0 89.61%);
  --gradient-blue: linear-gradient(45deg, #0273FF 0%, #013FFF 100%);

  --border-radius-xxxs: calc(var(--unit) * 12);
  --border-radius-xxs: calc(var(--unit) * 18);
  --border-radius-xs: calc(var(--unit) * 20);
  --border-radius-s: calc(var(--unit) * 25);
  --border-radius-m: calc(var(--unit) * 30);
  --border-radius-l: calc(var(--unit) * 35);
  --border-radius-xl: calc(var(--unit) * 40);
  --border-radius-xxl: calc(var(--unit) * 60);

  --transition-speed: .1s;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
}

body * {
  transition: all var(--transition-speed) ease-in-out
}

p {
  font-weight: 400;
  line-height: 1.5
}

img {object-fit: cover}

*, ::after, ::before {
  box-sizing: border-box;
}

@media (max-width: 1566px) {

}

@media (max-width: 1440px) {
  :root {
    --h1-size: 57.75px;
    --h2-size: 22.75px;
    --h3-size: 31px;
    --h4-size: 23px;
    --h5-size: 14px;
    --h6-size: 12.3px;

    --border-radius-m: 26.25px;
    --border-radius-xl: 35px;
    --border-radius-xxl: 52.5px;
  }
}

@media (max-width: 1262px) {
  :root {
    --h1-size: 49.5px;
    --h2-size: 19.5px;
    --h3-size: 27px;
    --h4-size: 26px;
    --h5-size: 12px;
    --h6-size: 10.5px;

    --border-radius-m: 22.5px;
    --border-radius-xl: 30px;
  }
}

@media (max-width: 1016px) {
  :root {
    --h1-size: 38.4px;
    --h2-size: 21.6px;
    --h3-size: 31px;
    --h4-size: 26px;
    --h5-size: 16px;
    --h6-size: 16px;

    --border-radius-m: 36px;
    --border-radius-xxl: 42px;
  }
}

@media (max-width: 768px) {
  :root {
    --h1-size: 35px;
    --h2-size: 19.8px;
    --h3-size: 28px;
    --h4-size: 24px;
    --h5-size: 15px;
    --h6-size: 15.4px;

    --border-radius-m: 33px;
    --border-radius-xl: 27.5px;
    --border-radius-xxl: 38px;
  }
}

@media (max-width: 576px) {
  :root {
    --h1-size: 32px;
    --h2-size: 18px;
    --h3-size: 26px;
    --h4-size: 22px;
    --h5-size: 13.5px;
    --h6-size: 14px;

    --border-radius-m: 30px;
    --border-radius-xl: 25px;
    --border-radius-xxl: 36px;
  }
}