/* Body Large Class */
.typography-body-large {
  /* Mobile first (smartphone) */
  font-family: var(--body-large-font-smartphone);
  font-size: var(--body-large-size-rem-smartphone);
  font-weight: var(--body-large-weight-smartphone);
  letter-spacing: var(--body-large-letter-spacing-smartphone);
  line-height: var(--body-large-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--body-large-font-tablet);
    font-size: var(--body-large-size-rem-tablet);
    font-weight: var(--body-large-weight-tablet);
    letter-spacing: var(--body-large-letter-spacing-tablet);
    line-height: var(--body-large-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--body-large-font-desktop);
    font-size: var(--body-large-size-rem-desktop);
    font-weight: var(--body-large-weight-desktop);
    letter-spacing: var(--body-large-letter-spacing-desktop);
    line-height: var(--body-large-line-height-desktop);
  }
}

/* Body Small Class */
.typography-body-small {
  /* Mobile first (smartphone) */
  font-family: var(--body-small-font-smartphone);
  font-size: var(--body-small-size-rem-smartphone);
  font-weight: var(--body-small-weight-smartphone);
  letter-spacing: var(--body-small-letter-spacing-smartphone);
  line-height: var(--body-small-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--body-small-font-tablet);
    font-size: var(--body-small-size-rem-tablet);
    font-weight: var(--body-small-weight-tablet);
    letter-spacing: var(--body-small-letter-spacing-tablet);
    line-height: var(--body-small-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--body-small-font-desktop);
    font-size: var(--body-small-size-rem-desktop);
    font-weight: var(--body-small-weight-desktop);
    letter-spacing: var(--body-small-letter-spacing-desktop);
    line-height: var(--body-small-line-height-desktop);
  }
}

/* Display Large Class */
.typography-display-large {
  /* Mobile first (smartphone) */
  font-family: var(--display-large-font-smartphone);
  font-size: var(--display-large-size-rem-smartphone);
  font-weight: var(--display-large-weight-smartphone);
  letter-spacing: var(--display-large-letter-spacing-smartphone);
  line-height: var(--display-large-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--display-large-font-tablet);
    font-size: var(--display-large-size-rem-tablet);
    font-weight: var(--display-large-weight-tablet);
    letter-spacing: var(--display-large-letter-spacing-tablet);
    line-height: var(--display-large-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--display-large-font-desktop);
    font-size: var(--display-large-size-rem-desktop);
    font-weight: var(--display-large-weight-desktop);
    letter-spacing: var(--display-large-letter-spacing-desktop);
    line-height: var(--display-large-line-height-desktop);
  }
}

/* Heading Large Class */
.typography-heading-large {
  /* Mobile first (smartphone) */
  font-family: var(--heading-large-font-smartphone);
  font-size: var(--heading-large-size-rem-smartphone);
  font-weight: var(--heading-large-weight-smartphone);
  letter-spacing: var(--heading-large-letter-spacing-smartphone);
  line-height: var(--heading-large-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--heading-large-font-tablet);
    font-size: var(--heading-large-size-rem-tablet);
    font-weight: var(--heading-large-weight-tablet);
    letter-spacing: var(--heading-large-letter-spacing-tablet);
    line-height: var(--heading-large-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--heading-large-font-desktop);
    font-size: var(--heading-large-size-rem-desktop);
    font-weight: var(--heading-large-weight-desktop);
    letter-spacing: var(--heading-large-letter-spacing-desktop);
    line-height: var(--heading-large-line-height-desktop);
  }
}

/* Heading Medium Class */
.typography-heading-medium {
  /* Mobile first (smartphone) */
  font-family: var(--heading-medium-font-smartphone);
  font-size: var(--heading-medium-size-rem-smartphone);
  font-weight: var(--heading-medium-weight-smartphone);
  letter-spacing: var(--heading-medium-letter-spacing-smartphone);
  line-height: var(--heading-medium-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--heading-medium-font-tablet);
    font-size: var(--heading-medium-size-rem-tablet);
    font-weight: var(--heading-medium-weight-tablet);
    letter-spacing: var(--heading-medium-letter-spacing-tablet);
    line-height: var(--heading-medium-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--heading-medium-font-desktop);
    font-size: var(--heading-medium-size-rem-desktop);
    font-weight: var(--heading-medium-weight-desktop);
    letter-spacing: var(--heading-medium-letter-spacing-desktop);
    line-height: var(--heading-medium-line-height-desktop);
  }
}

/* Heading Small Class */
.typography-heading-small {
  /* Mobile first (smartphone) */
  font-family: var(--heading-small-font-smartphone);
  font-size: var(--heading-small-size-rem-smartphone);
  font-weight: var(--heading-small-weight-smartphone);
  letter-spacing: var(--heading-small-letter-spacing-smartphone);
  line-height: var(--heading-small-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--heading-small-font-tablet);
    font-size: var(--heading-small-size-rem-tablet);
    font-weight: var(--heading-small-weight-tablet);
    letter-spacing: var(--heading-small-letter-spacing-tablet);
    line-height: var(--heading-small-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--heading-small-font-desktop);
    font-size: var(--heading-small-size-rem-desktop);
    font-weight: var(--heading-small-weight-desktop);
    letter-spacing: var(--heading-small-letter-spacing-desktop);
    line-height: var(--heading-small-line-height-desktop);
  }
}

/* Label Large Class */
.typography-label-large {
  /* Mobile first (smartphone) */
  font-family: var(--label-large-font-smartphone);
  font-size: var(--label-large-size-rem-smartphone);
  font-weight: var(--label-large-weight-smartphone);
  letter-spacing: var(--label-large-letter-spacing-smartphone);
  line-height: var(--label-large-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--label-large-font-tablet);
    font-size: var(--label-large-size-rem-tablet);
    font-weight: var(--label-large-weight-tablet);
    letter-spacing: var(--label-large-letter-spacing-tablet);
    line-height: var(--label-large-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--label-large-font-desktop);
    font-size: var(--label-large-size-rem-desktop);
    font-weight: var(--label-large-weight-desktop);
    letter-spacing: var(--label-large-letter-spacing-desktop);
    line-height: var(--label-large-line-height-desktop);
  }
}

/* Label Medium Class */
.typography-label-medium {
  /* Mobile first (smartphone) */
  font-family: var(--label-medium-font-smartphone);
  font-size: var(--label-medium-size-rem-smartphone);
  font-weight: var(--label-medium-weight-smartphone);
  letter-spacing: var(--label-medium-letter-spacing-smartphone);
  line-height: var(--label-medium-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--label-medium-font-tablet);
    font-size: var(--label-medium-size-rem-tablet);
    font-weight: var(--label-medium-weight-tablet);
    letter-spacing: var(--label-medium-letter-spacing-tablet);
    line-height: var(--label-medium-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--label-medium-font-desktop);
    font-size: var(--label-medium-size-rem-desktop);
    font-weight: var(--label-medium-weight-desktop);
    letter-spacing: var(--label-medium-letter-spacing-desktop);
    line-height: var(--label-medium-line-height-desktop);
  }
}

/* Label Small Class */
.typography-label-small {
  /* Mobile first (smartphone) */
  font-family: var(--label-small-font-smartphone);
  font-size: var(--label-small-size-rem-smartphone);
  font-weight: var(--label-small-weight-smartphone);
  letter-spacing: var(--label-small-letter-spacing-smartphone);
  line-height: var(--label-small-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--label-small-font-tablet);
    font-size: var(--label-small-size-rem-tablet);
    font-weight: var(--label-small-weight-tablet);
    letter-spacing: var(--label-small-letter-spacing-tablet);
    line-height: var(--label-small-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--label-small-font-desktop);
    font-size: var(--label-small-size-rem-desktop);
    font-weight: var(--label-small-weight-desktop);
    letter-spacing: var(--label-small-letter-spacing-desktop);
    line-height: var(--label-small-line-height-desktop);
  }
}

/* Label X-Large Class */
.typography-label-x-large {
  /* Mobile first (smartphone) */
  font-family: var(--label-x-large-font-smartphone);
  font-size: var(--label-x-large-size-rem-smartphone);
  font-weight: var(--label-x-large-weight-smartphone);
  letter-spacing: var(--label-x-large-letter-spacing-smartphone);
  line-height: var(--label-x-large-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--label-x-large-font-tablet);
    font-size: var(--label-x-large-size-rem-tablet);
    font-weight: var(--label-x-large-weight-tablet);
    letter-spacing: var(--label-x-large-letter-spacing-tablet);
    line-height: var(--label-x-large-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--label-x-large-font-desktop);
    font-size: var(--label-x-large-size-rem-desktop);
    font-weight: var(--label-x-large-weight-desktop);
    letter-spacing: var(--label-x-large-letter-spacing-desktop);
    line-height: var(--label-x-large-line-height-desktop);
  }
}

/* Title Large Class */
.typography-title-large {
  /* Mobile first (smartphone) */
  font-family: var(--title-large-font-smartphone);
  font-size: var(--title-large-size-rem-smartphone);
  font-weight: var(--title-large-weight-smartphone);
  letter-spacing: var(--title-large-letter-spacing-smartphone);
  line-height: var(--title-large-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--title-large-font-tablet);
    font-size: var(--title-large-size-rem-tablet);
    font-weight: var(--title-large-weight-tablet);
    letter-spacing: var(--title-large-letter-spacing-tablet);
    line-height: var(--title-large-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--title-large-font-desktop);
    font-size: var(--title-large-size-rem-desktop);
    font-weight: var(--title-large-weight-desktop);
    letter-spacing: var(--title-large-letter-spacing-desktop);
    line-height: var(--title-large-line-height-desktop);
  }
}

/* Title Small Class */
.typography-title-small {
  /* Mobile first (smartphone) */
  font-family: var(--title-small-font-smartphone);
  font-size: var(--title-small-size-rem-smartphone);
  font-weight: var(--title-small-weight-smartphone);
  letter-spacing: var(--title-small-letter-spacing-smartphone);
  line-height: var(--title-small-line-height-smartphone);

  /* Tablet */
  @media (width >= 768px) {
    font-family: var(--title-small-font-tablet);
    font-size: var(--title-small-size-rem-tablet);
    font-weight: var(--title-small-weight-tablet);
    letter-spacing: var(--title-small-letter-spacing-tablet);
    line-height: var(--title-small-line-height-tablet);
  }

  /* Desktop */
  @media (width >= 1024px) {
    font-family: var(--title-small-font-desktop);
    font-size: var(--title-small-size-rem-desktop);
    font-weight: var(--title-small-weight-desktop);
    letter-spacing: var(--title-small-letter-spacing-desktop);
    line-height: var(--title-small-line-height-desktop);
  }
}