@value text-2xs: 16px;
@value text-xs: 18px;
@value text-s: 20px;
@value text-base: 22px;
@value text-md: 33px;
@value text-l: 40px;
@value text-2l: 50px;
@value text-xl: 66px;
@value text-2xl: 88px;
@value text-3xl: 110px;
@value text-4xl: 200px;
@value text-5xl: 350px;

.heading-lg {
  composes: typography-headingLg from global;
  composes: typography-heading from global;
  font-size: text-3xl;
  line-height: 1;
}

.heading-md {
  composes: typography-headingMd from global;
  composes: typography-heading from global;
  font-size: text-2xl;
  line-height: 1;
}

.heading-sm {
  composes: typography-headingSm from global;
  composes: typography-heading from global;
  font-size: text-xl;
  font-weight: 700;
  line-height: 1;
}

.heading-xs {
  composes: typography-headingXs from global;
  composes: typography-heading from global;
  font-size: text-md;
  margin-top: 1em;
  margin-bottom: 0;
}


.headingTagline-lg {
  composes: typography-headingTaglineLg from global;
  composes: typography-headingTagline from global;
  font-size: text-md;
  line-height: 1.2;
}

.headingTagline-md {
  composes: typography-headingTaglineMd from global;
  composes: typography-headingTagline from global;
  font-size: text-md;
  line-height: 1.2;
}

.headingTagline-sm {
  composes: typography-headingTaglineSm from global;
  composes: typography-headingTagline from global;
  font-size: text-base;
  line-height: 1.4;
}


.headingSubtitle-lg {
  composes: typography-headingSubtitleLg from global;
  composes: typography-headingSubtitle from global;
  font-size: 44px;
  line-height: 1.2;
}

.headingSubtitle-md {
  composes: typography-headingSubtitleMd from global;
  composes: typography-headingSubtitle from global;
  font-size: 44px;
  line-height: 1.2;
}

.headingSubtitle-sm {
  composes: typography-headingSubtitleSm from global;
  composes: typography-headingSubtitle from global;
  font-size: 26px;
  line-height: 1.2;
}

.body {
  composes: typography-body from global;
  font-size: text-base;
  line-height: 1.4;
}

.caption {
  composes: typography-caption from global;
  font-size: text-s;
  line-height: 1.4;
}

.question {
  composes: typography-question from global;
  font-size: text-base;
  line-height: 1.4;
  font-weight: 700;
}

.questionAnswer {
  composes: typography-questionAnswer from global;
  font-size: text-base;
  line-height: 1.4;
}

.quoteText-lg {
  composes: typography-quoteText from global;
  composes: typography-quoteTextLg from global;
  font-size: text-2l;
  line-height: 1.1;
}

.quoteText-md {
  composes: typography-quoteText from global;
  composes: typography-quoteTextMd from global;
  font-size: text-l;
  line-height: 1.1;
}

.quoteText-sm {
  composes: typography-quoteText from global;
  composes: typography-quoteTextSm from global;
  font-size: text-md;
  line-height: 1.2;
}

.quoteText-xs {
  composes: typography-quoteText from global;
  composes: typography-quoteTextXs from global;
  font-size: 26px;
  line-height: 1.2;
}

.quoteAttribution {
  composes: typography-quoteAttribution from global;
  font-size: text-base;
  line-height: 1.4;
}

.quoteAttribution-lg {
  composes: quoteAttribution;
  composes: typography-quoteAttributionLg from global;
}

.quoteAttribution-md {
  composes: quoteAttribution;
  composes: typography-quoteAttributionMd from global;
}

.quoteAttribution-sm {
  composes: quoteAttribution;
  composes: typography-quoteAttributionSm from global;
}

.quoteAttribution-xs {
  composes: quoteAttribution;
  composes: typography-quoteAttributionXs from global;
}

.counterNumber-lg {
  composes: typography-counterNumber from global;
  font-size: text-5xl;
  line-height: 1;
  font-weight: 700;
}

.counterNumber-md {
  composes: typography-counterNumber from global;
  font-size: text-4xl;
  line-height: 1;
  font-weight: 700;
}

.counterNumber-sm {
  composes: typography-counterNumber from global;
  font-size: text-3xl;
  line-height: 1;
  font-weight: 700;
}

.counterNumber-xs {
  composes: typography-counterNumber from global;
  font-size: text-xl;
  line-height: 1;
  font-weight: 700;
}

.counterDescription {
  composes: typography-counterDescription from global;
  font-size: text-base;
  line-height: 1.4;
}

.hotspotsTooltipTitle {
  composes: typography-hotspotTooltipTitle from global;
  font-size: text-xs;
  line-height: 1.4;
  font-weight: bold;
}

.hotspotsTooltipDescription {
  composes: typography-hotspotTooltipDescription from global;
  font-size: text-xs;
  line-height: 1.4;
}

.hotspotsTooltipLink {
  composes: typography-hotspotTooltipLink from global;
  composes: typography-linkButton from global;
}

.teaserTitle-lg {
  composes: typography-externalLinkTitle from global;
  composes: typography-externalLinkTitleLg from global;
  line-height: 1.3;
  font-weight: bold;
  font-size: text-s;
}

.teaserTitle-md {
  composes: typography-externalLinkTitle from global;
  composes: typography-externalLinkTitleMd from global;
  line-height: 1.3;
  font-weight: bold;
  font-size: 19.8px;
}

.teaserTitle-sm {
  composes: typography-externalLinkTitle from global;
  composes: typography-externalLinkTitleSm from global;
  line-height: 1.3;
  font-weight: bold;
  font-size: 19.2px;
}

.teaserTagline-lg {
  composes: typography-externalLinkTagline from global;
  composes: typography-externalLinkTaglineLg from global;
  line-height: 1.3;
  font-size: text-s;
  margin-bottom: 0.25rem;
}

.teaserTagline-md {
  composes: typography-externalLinkTagline from global;
  composes: typography-externalLinkTaglineMd from global;
  line-height: 1.3;
  font-size: text-xs;
  margin-bottom: 0.25rem;
}

.teaserTagline-sm {
  composes: typography-externalLinkTagline from global;
  composes: typography-externalLinkTaglineSm from global;
  line-height: 1.3;
  font-size: text-2xs;
  margin-bottom: 0.25rem;
}

.teaserDescription-lg {
  composes: typography-externalLinkDescription from global;
  line-height: 1.3;
  font-size: text-s;
}

.teaserDescription-md {
  composes: typography-externalLinkDescription from global;
  line-height: 1.3;
  font-size: text-xs;
}

.teaserDescription-sm {
  composes: typography-externalLinkDescription from global;
  line-height: 1.3;
  font-size: text-2xs;
}

.teaserLink {
  composes: typography-teaserLink from global;
  composes: typography-linkButton from global;
}

:global(.typography-linkButton) {
  font-size: text-2xs;
  line-height: 1.4;
  font-weight: bold;
}

.infoTableLabel {
  composes: typography-infoTableLabel from global;
  font-size: text-s;
  line-height: 1.4;
  font-weight: 600;
}

.infoTableValue {
  composes: typography-infoTableValue from global;
  font-size: text-s;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .heading-lg {
    font-size: text-xl;
    line-height: 1.1;
  }

  .heading-md {
    font-size: text-2l;
    line-height: 1.1;
  }

  .heading-sm {
    font-size: text-l;
  }

  .headingTagline-lg {
    font-size: 26px;
    line-height: 1.2;
  }

  .headingTagline-md,
  .headingTagline-sm {
    font-size: text-base;
    line-height: 1.4;
  }

  .headingSubtitle-lg {
    font-size: text-md;
    line-height: 1.2;
  }

  .headingSubtitle-md,
  .headingSubtitle-sm {
    font-size: 26px;
    line-height: 1.2;
  }


  .quoteText-lg {
    font-size: text-l;
    line-height: 1.1;
  }

  .quoteText-md {
    font-size: text-md;
    line-height: 1.2;
  }

  .quoteText-sm,
  .quoteText-xs {
    font-size: text-base;
    line-height: 1.4;
  }

  .counterNumber-lg {
    font-size: text-4xl;
    line-height: 1;
  }

  .counterNumber-md {
    font-size: text-3xl;
    line-height: 1;
  }

  .counterNumber-sm {
    font-size: text-xl;
    line-height: 1.1;
  }

  .counterNumber-xs {
    font-size: text-l;
    line-height: 1.1;
  }

  .teaserTitle-md {
    font-size: text-xs;
  }

  .teaserTitle-sm {
    font-size: text-2xs;
  }
}
