.display-1,
.display-2,
.headline-1,
.headline-2,
.h1,
.h2{
    font-family: var(--ff-primary), sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}
.display-1{
    font-size: 48px;
    line-height: 1.1;
}
.display-2{
    font-size: 48px;
    line-height: 1.1;
}
.headline-1,
.h1{
    font-size: 24px;
    line-height: 30px;
    font-weight: var(--fw-semibold);
}
.headline-2,
.h2{
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--fw-semibold)
}
.headline-3,
.h3,
.headline-4,
.h4{
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--fw-semibold)
}
.subtitle-1{
    font-size: 20px;
    line-height: 24px;
}
.subtitle-2{
    font-size: 14px;
    line-height: 18px;
}
.body-1{
    font-size: 16px;
    line-height: 20px;
}
.body-2{
    font-size: 14px;
    line-height: 18px;
}
.caption{
    font-size: 12px;
    line-height: 16px;
}
.overline{
    font-size: 10px;
    line-height: 1.1;
    font-weight: var(--fw-semibold);
}
@media (min-width: 992px){
    .headline-1,
    .h1{
        font-size: 48px;
        line-height: 56px;
        font-weight: var(--fw-semibold);
    }
    .headline-2,
    .h2{
        font-size: 32px;
        line-height: 38px;
        font-weight: var(--fw-semibold)
    }
    .headline-3,
    .h3{
        font-size: 24px;
        line-height: 30px;
        font-weight: var(--fw-semibold)
    }
}