/* typography classes */
.page-title {
    grid-area: page-title;
    color: var(--color-text-primary);
    font-family: var(--font-family-special-headline);
    font-size: var(--font-size-special-headline-xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 40px;
    margin-bottom: var(--spacing-32);
}

.special-headline-lg {
    font-family: var(--font-family-special-headline);
    font-size: var(--font-size-special-headline-lg);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 1.33;
}
.special-headline-2xl {
    font-family: var(--font-family-special-headline);
    font-size: var(--font-size-special-headline-2xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
}

.title-lg {
    font-family: var(--font-family);
    font-size: var(--font-size-title-lg);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-title-lg);
}

.title-md {
    font-family: var(--font-family);
    font-size: var(--font-size-title-md);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-title-md);
}

.title-sm {
    font-family: var(--font-family);
    font-size: var(--font-size-title-sm, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.25;
}


.title-xs {
    font-family: var(--font-family);
    font-size: var(--font-size-component-md);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.text-body {
    font-size: var(--font-size-component-md);
    font-weight: var(--font-weight-regular);
}

.text-body-md {
    font-family: var(--font-family);
    font-size: var(--font-size-component-md, 14px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: 150%; /* 24px */
}

.text-body-sm {
    font-size: var(--font-size-component-xs);
    font-weight: var(--font-weight-regular);
}

.text-body-xsm {
    font-size: var(--font-size-component-xxs);
    font-weight: var(--font-weight-regular);
}

.text-body-xs {
    font-size: var(--font-size-component-xs);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
}