:root {
  --silke-title-xxs: 14px;
  --silke-title-xs: 16px;
  --silke-title-s: 24px;
  --silke-title-m: 30px;
  --silke-title-l: 36px;
  --silke-title-xl: 59px;

  --silke-title-xxs-line-height: 19px;
  --silke-title-xs-line-height: 24px;
  --silke-title-s-line-height: 30px;
  --silke-title-m-line-height: 36px;
  --silke-title-l-line-height: 44px;
  --silke-title-xl-line-height: 64px;
}

.title {
  &.xl {
    font-size: var(--silke-title-xl);
    line-height: var(--silke-title-xl-line-height);
  }

  &.l {
    font-size: var(--silke-title-l);
    line-height: var(--silke-title-l-line-height);
  }

  &.m {
    font-size: var(--silke-title-m);
    line-height: var(--silke-title-m-line-height);
  }

  &.s {
    font-size: var(--silke-title-s);
    line-height: var(--silke-title-s-line-height);
  }

  &.xs {
    font-size: var(--silke-title-xs);
    line-height: var(--silke-title-xs-line-height);
    letter-spacing: var(--silke-title-xs-letter-spacing);
  }

  &.xxs {
    font-size: var(--silke-title-xxs);
    line-height: var(--silke-title-xxs-line-height);
    letter-spacing: var(--silke-title-xxs-letter-spacing);
  }
}