/* text */

.text--secondary {
    color: var(--color-secondary);
}

.text--alternative {
    color: var(--color-alternative);
}

/* highlight */

.span--highlighted {
    background-color: var(--color-alternative-hightlight);
    color: white;
    display: inline-block;
}

/* scale */

.scale--1:hover,
.scale--1:focus {
    transform: scale(1.1);
}

.scale--4:hover,
.scale--4:focus {
    transform: scale(1.4);
}

/* captions */

.title--caption {
    font-size: 13px;
}

.title--caption.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* font weights */

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

/* font-sizes */

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

/* buttons */

/* 1: statement */

.statement--button {
    min-width: 160px;
    height: 38px;
    border: 2px solid #111;
    border-radius: 15px 30px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* vertical text */

.vertical--text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

.vertical--text.reverse {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
}

@media (max-width: 575px) {
    .vertical--text.no-sm {
        writing-mode: initial;
        text-orientation: initial;
        transform: initial;
    }
}

/* link in text */

.text--link {
    text-decoration: none;
}

/* truncate */
.truncate-text-2l {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: pre-wrap;
}

.truncate-text-3l {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: pre-wrap;
}

.truncate-text-4l {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    white-space: pre-wrap;
}

/* truncate heights */

.h--78 {
    height: 78px;
}

.h--58 {
    height: 58px;
}

.h--39 {
    height: 39px;
}