body, html {
    font-family: 'Fira Sans', sans-serif;
    color: var(--primary-text-color);
    font-weight: var(--regular-font-weight);
}

/* heading */
.ui-heading--h1, h1 {
    font-size: 48px;
    line-height: var(--smallest-line-height);
    font-weight: var(--semibold-font-weight);
    color: var(--secondary-text-color);
}

.ui-heading--h2, h2 {
    font-size: 36px;
    line-height: var(--medium-line-height);
    font-weight: var(--semibold-font-weight);
    color: var(--secondary-text-color);
}

.ui-heading--h3, h3 {
    font-size: 32px;
    line-height: var(--medium-line-height);
    font-weight: var(--semibold-font-weight);
    color: var(--secondary-text-color);
}

.ui-heading--h4, h4 {
    font-size: 26px;
    line-height: var(--medium-line-height);
    font-weight: var(--medium-font-weight);
    color: var(--secondary-text-color);
}

.ui-heading--h5, h5 {
    font-size: 20px;
    line-height: var(--medium-line-height);
    font-weight: var(--medium-font-weight);
    color: var(--secondary-text-color);
}

/* paragraph */
.ui-primary-large-text {
    font-size: var(--large-font-size);
    line-height: var(--medium-line-height);
}

.ui-primary-medium-text, p {
    font-size: var(--medium-font-size);
    line-height: var(--medium-line-height);
}

.ui-primary-small-text {
    font-size: var(--small-font-size);
    line-height: var(--medium-line-height);
}

.ui-primary-smallest-text {
    font-size: var(--smallest-font-size);
    line-height: var(--small-line-height);
}

.ui-primary-medium-font-weight-text {
    font-weight: var(--medium-font-weight)!important;
}

.ui-primary-regular-font-weight-text {
    font-weight: var(--regular-font-weight)!important;
}

.ui-primary-light-font-weight-text {
    font-weight: var(--light-font-weight)!important;
}

/* color */
.black-text {
    color: var(--secondary-text-color)!important;
}

.white-text {
    color: var(--white-color)!important;
}

.brand-color-text {
    color: var(--primary-brand-color)!important;
}

/* hyphenation */
.hyphens--auto {
    -ms-hyphens: auto;
    hyphens: auto;
}

.hyphens--auto, .hyphens--manual {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.hyphens--manual {
    -ms-hyphens: manual;
    hyphens: manual;
}

/* alignment */
.center-text {
    text-align: center;
}

/* truncate */
/* needs to be specified webkit-line-clamp-x */
.truncate-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.webkit-line-clamp-2 {
    -webkit-line-clamp: 2;
}

.webkit-line-clamp-3 {
    -webkit-line-clamp: 3;
}

.webkit-line-clamp-4 {
    -webkit-line-clamp: 4;
}


@media screen and (max-width: 770px) {
    .ui-heading--h1, h1 {
        font-size: 38px;
    }

    .ui-heading--h2, h2 {
        font-size: 30px;
    }

    .ui-heading--h3, h3 {
        font-size: 28px;
    }
}

@media screen and (max-width: 480px) {
    .ui-heading--h1, h1 {
        font-size: 28px;
    }

    .ui-heading--h2, h2 {
        font-size: 24px;
    }

    .ui-heading--h3, h3 {
        font-size: 22px;
    }

    .ui-heading--h4, h4 {
        font-size: 18px;
    }

    .ui-heading--h5, h5 {
        font-size: 16px;
    }
}