:root {
  --desktop-font-size-header: 30px;
  --desktop-font-size-bigger: 20px;
  --desktop-font-size-default: 18px;
  --desktop-font-size-secondary: 16px;
  --desktop-font-size-ternary: 14px;

  --mobile-font-size-header: 28px;
  --mobile-font-size-bigger: 18px;
  --mobile-font-size-default: 16px;
  --mobile-font-size-secondary: 14px;
  --mobile-font-size-ternary: 12px;
}

body {
  font-size: var(--desktop-font-size-default);
}

.headline {
  font-size: var(--desktop-font-size-header);
}

.headline-b {
  font-size: var(--desktop-font-size-header);
  font-weight: 600;
}

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

.body1-b {
  font-size: var(--desktop-font-size-bigger);
  font-weight: 600;
}

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

.body2-b {
  font-size: var(--desktop-font-size-default);
  font-weight: 600;
}

.secondary {
  font-size: var(--desktop-font-size-secondary);
}

.secondary-b {
  font-size: var(--desktop-font-size-secondary);
  font-weight: 600;
}

.ternary {
  font-size: var(--desktop-font-size-ternary);
}

.ternary-b {
  font-size: var(--desktop-font-size-ternary);
  font-weight: 600;
}

@media (max-width: 572px) {
  body {
    font-size: var(--mobile-font-size-default);
  }

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

  .headline-b {
    font-size: var(--mobile-font-size-header);
    font-weight: 600;
  }

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

  .body1-b {
    font-size: var(--mobile-font-size-bigger);
    font-weight: 600;
  }

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

  .body2-b {
    font-size: var(--mobile-font-size-default);
    font-weight: 600;
  }

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

  .secondary-b {
    font-size: var(--mobile-font-size-secondary);
    font-weight: 600;
  }

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

  .ternary-b {
    font-size: var(--mobile-font-size-ternary);
    font-weight: 600;
  }
}