:root {
  --color-primary: #27391C;
  --color-primary--2: #7ABB54;
  --color-primary--3: #ECF3DC;

  --color-secondary: #5D1C0B;
  --color-secondary--2: #B94D00;
  --color-secondary--3: #EF7D00;
  --color-secondary--4: #FDC740;

  --color-tertiary: #49BED6;

  --color-neutral: #162738;

  --color-white: #ffffff;
  --color-black: #000000;

  --px240-percent: calc(8000vw / 1920); /** dynamic spacing > 16px for 375px wide screen **/

  /** Radius **/
  --radius-m : 15px;
  --radius-l : 40px;
  --radius-xl : 80px;
  --radius-xxl : 160px;

  /** Font Size **/

  --content-size-s: 14px;
  --content-size: 1rem /* 16px */;
  --content-size-m: 1.125rem /* 18px */;
  --content-size-l: 1.5rem /* 24px */;

  --heading-size-xl: 2.25rem /* 36px */;
  --heading-size-l: 1.75rem /* 27px */;
  --heading-size-m:  1.375rem /* 22px */;
  --heading-size-s: 1.3125rem /* 21px */;
  --heading-size-xs: 1.375rem /* 22px */;
}


@media (min-width: 900px) {
  :root {
    --px240-percent: calc(10000vw / 1920); /** dynamic padding > 50px for 900px wide screen **/

    --heading-size-xl: 4rem /* 64px */;
    --heading-size-l: 3rem /* 48px */;
    --heading-size-m:  2rem /* 32px */;
    --heading-size-s: 1.3125rem /* 21px */;
    --heading-size-xs: 1.375rem /* 22px */;
  }
}


@media (min-width: 1300px) {
  :root {
      --px240-percent: calc(24000vw / 1920); /** dynamic padding > 240px for 1920px wide screen **/
  }
}
@media (min-width: 1921px) {
  :root {
      --px240-percent: 240px;
  }
}