body {
  margin: 0;
  line-height: normal;
}

:root {
  /* fonts */
  --text-1: Lato;
  --font-muller: Muller;
  --txt02: Montserrat;

  /* font sizes */
  --title01-size: 50px;
  --title02-size: 30px;
  --font-size-21xl: 40px;
  --txt02-size: 13px;
  --font-size-xs: 12px;
  --txt01-size: 20px;
  --text-1-size: 16px;
  --font-size-2xs: 11px;
  --font-size-sm: 14px;
  --title-1-size: 100px;

  /* Colors */
  --color-white1: #fff;
  --brown-1: #22110d;
  --color-gray: #080a17;
  --color-blue-1: #2b2b5a;
  --color-gray-1: #e1e1e1;
  --color-gainsboro-100: #d9d9d9;
  --color-red-1: #d7001c;
  --color-gray-2: #f8f8f8;
  --green-1: #6c913d;
  --yel-1: #d0973b;
  --blue-1: #4089c8;
  --red-1: #dc4d26;

  /* Gaps */
  --gap-4xl: 23px;
  --gap-xl: 20px;
  --gap-22xl: 41px;
  --gap-12xs: 1px;
  --gap-mini: 15px;
  --gap-3xs: 10px;
  --gap-6xs: 7px;
  --gap-21xl: 40px;
  --gap-7xs: 6px;
  --gap-10xs: 3px;
  --gap-8xs: 5px;
  --gap-31xl: 50px;
  --gap-11xl: 30px;
  --gap-59xl: 78px;

  /* Paddings */
  --padding-31xl: 50px;
  --padding-6xl: 25px;
  --padding-xl: 20px;
  --padding-11xl: 30px;
  --padding-3xs: 10px;
  --padding-sm: 14px;
  --padding-81xl: 100px;

  /* Border radiuses */
  --br-3xs: 10px;
  --br-mini: 15px;
  --br-481xl: 500px;
  --br-6xs: 7px;

  /* Effects */
  --shadow-1: 0px 30px 90px rgba(28, 44, 56, 0.1);
}
@media (max-width: 1024px) {
  :root {
  /* font sizes */
  --font-size-21xl:30px;

    /* Paddings */
  --padding-31xl: 15px;

    /* Gaps */

  --gap-31xl: 20px;
  --gap-59xl: 20px;

  }
}