:root {

--body-font-family: "gravita-geo-variable", sans-serif;
--heading-font-family: "titular", sans-serif;

/* font weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;

/* line heights */
--line-height-tight: 125%;
--line-height-medium: 140%;
--line-height-normal: 150%;

/* font sizes */
--heading-xlarge: 96px;
--heading-large: 72px;
--heading-1: 64px;
--heading-2: 48px;
--heading-3: 40px;
--heading-4: 32px;
--heading-5: 24px;
--text-large: 20px;
--text-medium: 18px;
--text-base: 16px;
--text-small: 14px;
--text-xsmall: 12px;
--text-tiny: 10px;

/* letter spacing */
--letter-spacing-normal: 0px;
--letter-spacing-wide: 0.32px;

/* border radius */
  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-large: 8px;
  --stroke-border-width: 1px;
  --stroke-divider-width: 1px;

/* colors */
  --color-white: rgba(255, 255, 255, 1);
  --color-neutral-lightest: rgba(238, 238, 238, 1);
  --color-neutral-lighter: rgba(204, 204, 204, 1);
  --color-neutral-light: rgba(170, 170, 170, 1);
  --color-neutral: rgba(102, 102, 102, 1);
  --color-neutral-dark: rgba(68, 68, 68, 1);
  --color-neutral-darker: rgba(34, 34, 34, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-opacity-transparent: rgba(255, 255, 255, 0);
  --color-opacity-white-5: rgba(255, 255, 255, 0.05);
  --color-opacity-white-10: rgba(255, 255, 255, 0.1);
  --color-opacity-white-15: rgba(255, 255, 255, 0.15);
  --color-opacity-white-20: rgba(255, 255, 255, 0.2);
  --color-opacity-white-30: rgba(255, 255, 255, 0.3);
  --color-opacity-white-40: rgba(255, 255, 255, 0.4);
  --color-opacity-white-50: rgba(255, 255, 255, 0.5);
  --color-opacity-white-60: rgba(255, 255, 255, 0.6);
  --color-opacity-black-5: rgba(0, 0, 0, 0.05);
  --color-opacity-black-10: rgba(0, 0, 0, 0.1);
  --color-opacity-black-15: rgba(0, 0, 0, 0.15);
  --color-opacity-black-20: rgba(0, 0, 0, 0.2);
  --color-opacity-black-30: rgba(0, 0, 0, 0.3);
  --color-opacity-black-40: rgba(0, 0, 0, 0.4);
  --color-opacity-black-50: rgba(0, 0, 0, 0.5);
  --color-opacity-black-60: rgba(0, 0, 0, 0.6);
  --color-opacity-black-80: rgba(0, 0, 0, 0.8);
  --color-primary: rgba(0, 145, 137, 1);
  --color-primary-20: rgba(18, 146, 138, 0.2);
  --color-primary-medium: #3e606b;
  --color-primary-dark: rgba(37, 83, 77, 1);
  --color-primary-darker: rgba(14, 32, 29, 1);
  --color-secondary: rgba(254, 226, 141, 1);
  --color-secondary-dark: rgba(255, 200, 68, 1);
  --color-secondary-darker: rgba(205, 196, 140, 1);

  /* spacing */
  --container-container-large: 1280px;
  --container-container-medium: 1024px;
  --container-container-small: 768px;
  --max-width-xxlarge: 1280px;
  --max-width-xlarge: 1024px;
  --max-width-large: 768px;
  --max-width-medium: 560px;
  --max-width-small: 480px;
  --max-width-xsmall: 400px;
  --max-width-xxsmall: 320px;
  --spacing-global: 64px;
  --spacing-xlarge: 224px;
  --spacing-large: 112px;
  --spacing-medium: 80px;
  --spacing-small: 48px;
  --spacing-smaller : 32px;
  --spacing-xsmall: 24px;
  --spacing-tiny: 16px;
  --spacing-mini: 12px;
}

/* mobile */
@media (max-width:767px) {
  :root {
  --spacing-global: 20px;
  --spacing-xlarge: 112px;
  --spacing-large: 64px;
  --spacing-medium: 48px;
  --spacing-small: 32px;
  --spacing-smaller: 24px;
  --spacing-xsmall: 16px;
  --spacing-tiny: 8px;
  --spacing-mini: 10px;

  --heading-xlarge: 64px;
  --heading-large: 48px;
  --heading-1: 40px;
  --heading-2: 36px;
  --heading-3: 32px;
  --heading-4: 24px;
  --heading-5: 20px;
  
  --text-large: 18px;
  --text-base: 16px;
  --text-medium: 16px;
  --text-small: 14px;
  --text-xsmall: 12px;
  --text-tiny: 10px;
  }
}


[data-fonts="geo"] {
  --heading-xlarge: 64px;
  --heading-large: 48px;
  --heading-1: 64px;
  --heading-2: 40px;
  --heading-3: 36px;
  --heading-4: 28px;
  --heading-5: 24px;
--heading-font-family:  "gravita-geo-variable", sans-serif;
}

@media (max-width:767px) {

  [data-fonts="geo"] {
    --heading-xlarge: 48px;
    --heading-large: 36px;
    --heading-1: 48px;
    --heading-2: 36px;
    --heading-3: 28px;
    --heading-4: 24px;
    --heading-5: 20px;
  }

}

@media (max-width: 576px) {

  .heading br {
    display: none;
  }

  [data-fonts="geo"] {
    --heading-xlarge: 36px;
    --heading-large: 28px;
    --heading-1: 36px;
    --heading-2: 28px;
    --heading-3: 25px;
    --heading-4: 22px;
    --heading-5: 20px;
  }

}