@font-face {
  font-family: aeonik;
  src: url('../fonts/AeonikPro-Regular_pic.woff2') format('woff2'),
    url('../fonts/AeonikPro-Regular_pic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: aeonik;
  src: url('../fonts/AeonikPro-Medium_pic.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: aeonik;
  src: url('../fonts/AeonikPro-Bold_pic.woff2') format('woff2'),
    url('../fonts/AeonikPro-Bold_pic.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: inter;
  src: url('../fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: inter;
  src: url('../fonts/Inter-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* family */
  --font-family: aeonik, sans-serif;
  --font-inter: inter, sans-serif;

  /* h1 */
  --font-size-h1: 3.5rem;
  --font-size-h1-mobile: 2rem;
  --font-weight-h1: 700;
  --line-height-h1: 105%;
  --letter-spacing-h1: -1%;

  /* h2 */
  --font-size-h2: 2.5rem;
  --font-size-h2-mobile: 1.5rem;
  --font-weight-h2: 700;
  --line-height-h2: 100%;
  --letter-spacing-h2: -1%;

  /* h3 */
  --font-size-h3: 1.5rem;
  --font-size-h3-mobile: 1.125rem;
  --font-weight-h3: 700;
  --line-height-h3: 110%;
  --letter-spacing-h3: 0%;

  /* h4 */
  --font-size-h4: 1.125rem;
  --font-size-h4-mobile: 1rem;
  --font-weight-h4: 700;
  --line-height-h4: 110%;
  --letter-spacing-h4: 0%;

  /* h5 */
  --font-size-h5: 1rem;
  --font-weight-h5: 700;
  --line-height-h5: 105%;
  --letter-spacing-h5: 0%;

  /* body1 */
  --font-size-body1: 1.5rem;
  --font-size-body1-mobile: 1.125rem;
  --font-weight-body1: 400;
  --line-height-body1: 110%;
  --letter-spacing-body1: 0%;

  /* body2 */
  --font-size-body2: 1.125rem;
  --font-size-body2-mobile: 0.875rem;
  --font-weight-body2: 400;
  --line-height-body2: 110%;
  --letter-spacing-body2: 0%;

  /* body3 */
  --font-size-body3: 1rem;
  --font-weight-body3: 400;
  --line-height-body3: 120%;
  --letter-spacing-body3: 0%;

  /* body4 */
  --font-size-body4: 0.875rem;
  --font-weight-body4: 400;
  --line-height-body4: 130%;
  --letter-spacing-body4: 0%;

  /* label1 */
  --font-size-label1: 1.125rem;
  --font-weight-label1: 700;
  --line-height-label1: 100%;
  --letter-spacing-label1: 0%;

  /* label2 */
  --font-size-label2: 1rem;
  --font-weight-label2: 700;
  --line-height-label2: 105%;
  --letter-spacing-label2: 0%;

  /* label3 */
  --font-size-label3: 1rem;
  --font-weight-label3: 400;
  --line-height-label3: 105%;
  --letter-spacing-label3: 0%;

  /* label4 */
  --font-size-label4: 0.875rem;
  --font-weight-label4: 700;
  --line-height-label4: 105%;
  --letter-spacing-label4: 0%;
}

h5,
.heading-5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}

h3,
.heading-3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

h4,
.heading-4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

h2,
.heading-2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

h1,
.heading-1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.font-body1 {
  font-size: var(--font-size-body1);
  font-weight: var(--font-weight-body1);
  line-height: var(--line-height-body1);
  letter-spacing: var(--letter-spacing-body1);
}

.font-body2 {
  font-size: var(--font-size-body2);
  font-weight: var(--font-weight-body2);
  line-height: var(--line-height-body2);
  letter-spacing: var(--letter-spacing-body2);
}

.font-body3 {
  font-size: var(--font-size-body3);
  font-weight: var(--font-weight-body3);
  line-height: var(--line-height-body3);
  letter-spacing: var(--letter-spacing-body3);
}

.font-body4 {
  font-size: var(--font-size-body4);
  font-weight: var(--font-weight-body4);
  line-height: var(--line-height-body4);
  letter-spacing: var(--letter-spacing-body4);
}

.font-label1 {
  font-size: var(--font-size-label1);
  font-weight: var(--font-weight-label1);
  line-height: var(--line-height-label1);
  letter-spacing: var(--letter-spacing-label1);
}

.font-label2 {
  font-size: var(--font-size-label2);
  font-weight: var(--font-weight-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
}

.font-label3 {
  font-size: var(--font-size-label3);
  font-weight: var(--font-weight-label3);
  line-height: var(--line-height-label3);
  letter-spacing: var(--letter-spacing-label3);
}

.font-label4 {
  font-size: var(--font-size-label4);
  font-weight: var(--font-weight-label4);
  line-height: var(--line-height-label4);
  letter-spacing: var(--letter-spacing-label4);
}

.tablet,
.mobile {

  h3,
  .heading-3 {
    font-size: var(--font-size-h3-mobile);
  }

  h2,
  .heading-2 {
    font-size: var(--font-size-h2-mobile);
  }

  h1,
  .heading-1 {
    font-size: var(--font-size-h1-mobile);
  }

  .font-body1 {
    font-size: var(--font-size-body1-mobile);
  }

  .font-body2 {
    font-size: var(--font-size-body2-mobile);
  }
}