@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&display=swap');

/* Root Variables */
:root {
  --heading-font-size-xxl: 4rem;
  --heading-font-size-xl: 3.5rem;
  --heading-font-size-l: 3rem;
  --heading-font-size-m: 2.25rem;
  --heading-font-size-s: 1.75rem;
  --heading-font-size-xs: 1.5rem;
  --body-font-size-m: 1.375rem;
  --body-font-size-s: 1.125rem;
  --body-font-size-xs: 1rem;

  /* fonts */
  --font-family-sans-fallback: helvetica, arial, sans-serif;
  --font-family-montserrat: 'Montserrat', var(--font-family-sans-fallback);
  --font-family-body: var(--font-family-montserrat);
  --font-family-heading: var(--font-family-montserrat);
  --font-family-heading-condensed: var(--font-family-montserrat);
  --body-font-family: var(--font-family-body);
  --heading-font-family: var(--font-family-heading);
  --narrow-heading-font-family: var(--font-family-heading-condensed);

  /* line heights */
  --line-height-body: 1.5;
  --line-height-heading: 1.25;
  --line-height-heading-tight: 1.1;

  /* font-weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

html {
  font-size: 16px;
}

body {
  font-size: var(--body-font-size-xs);
  font-family: var(--body-font-family);
  line-height: var(--line-height-body);
  text-rendering: optimizelegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-heading);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

h1 {
  font-size: var(--heading-font-size-xxl);
  line-height: var(--line-height-heading-tight);
  font-weight: var(--font-weight-medium);
  font-family: var(--heading-font-family);
}

h2 {
  font-size: var(--heading-font-size-xl);
  font-weight: var(--font-weight-medium);
  font-family: var(--heading-font-family);
}

h3 {
  font-size: var(--heading-font-size-l);
  font-weight: var(--font-weight-medium);
  font-family: var(--narrow-heading-font-family);
}

h4 {
  font-size: var(--heading-font-size-m);
  font-weight: var(--font-weight-medium);
  font-family: var(--narrow-heading-font-family);
}

h5 {
  font-size: var(--heading-font-size-s);
  font-weight: var(--font-weight-medium);
  font-family: var(--narrow-heading-font-family);
}

h6 {
  font-size: var(--heading-font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--heading-font-family);
}

p,
li {
  font-size: var(--body-font-size-xs);
  line-height: calc(var(--body-font-size-xs) + 0.5rem);
  font-weight: var(--font-weight-regular);
  font-family: var(--body-font-family);
}

.megadisplay-101 {
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-medium);
  font-size: 4.5rem;
  line-height: 4.5rem;
  letter-spacing: 1px;
}

.megadisplay-102 {
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-medium);
  font-size: 4rem;
  line-height: 4rem;
}

.display-101 {
  font-size: 1.75rem;
  font-weight: var(--font-weight-regular);
  font-family: var(--narrow-heading-font-family);
  line-height: 1.75rem;
  letter-spacing: 0.0625rem;
}

.display-102 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-regular);
  font-family: var(--narrow-heading-font-family);
  line-height: 2.5rem;
  letter-spacing: 1px;
}

.display-103 {
  font-size: 2.75rem;
  font-weight: var(--font-weight-medium);
  font-family: var(--narrow-heading-font-family);
  line-height: 2.75rem;
  letter-spacing: 1px;
}

.display-104 {
  font-size: 3rem;
  font-weight: var(--font-weight-regular);
  font-family: var(--narrow-heading-font-family);
  line-height: 3rem;
  letter-spacing: 1px;
}

.subdisplay-101 {
  font-family: var(--body-font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0;
}

.body-101 {
  font-size: var(--body-font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--spacing-16);
  color: var(--coredark-101);
}

.body-102 {
  font-size: var(--body-font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--spacing-30);
}

.body-102-bold {
  font-size: var(--body-font-size-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--spacing-30);
}

.body-103,
.body-103 *:not(:is(h1, h2, h3, h4, h5, h6)) {
  font-size: var(--body-font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--spacing-32);
}

.body-103-medium {
  font-size: var(--body-font-size-m);
  font-weight: var(--font-weight-medium);
  line-height: var(--spacing-32);
}

.body-103-bold {
  font-size: var(--body-font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--spacing-32);
}

/**
  * Responsive adjustments 
  */
@media (width >= 992px) { /* --breakpoint-lg */
  .megadisplay-102 {
    font-size: 4rem;
    line-height: 4rem;
  }

  .display-101 {
    font-size: 1.875rem;
    line-height: 1.875rem;
  }

  .display-102 {
    font-size: 2.25rem;
    line-height: 2.25rem;
  }

  .display-104 {
    font-size: 3rem;
    line-height: 3rem;
  }
}

@media (width >= 1200px) { /* --breakpoint-xl */
  .megadisplay-102 {
    font-size: 4.25rem;
    line-height: 4.25rem;
  }

  .display-101 {
    font-size: 2rem;
    line-height: 2rem;
  }

  .display-102 {
    font-size: 2.375rem;
    line-height: 2.375rem;
  }

  .display-103 {
    font-size: 3rem;
    line-height: 3rem;
  }

  .display-104 {
    font-size: 3.25rem;
    line-height: 3.25rem;
  }

  .subdisplay-101 {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
}

@media (width >= 1400px) { /* --breakpoint-xxl */
  .megadisplay-102 {
    font-size: 4.5rem;
    line-height: 4.5rem;
  }

  .display-102 {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }

  .display-104 {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}