MAINHACK

.font-72 {
    font-size: 4.5rem; // 72 px
    font-weight: bold;
    line-height: 1.22;
}

.font-48 {
    font-size: 3rem; // 48px
    font-weight: bold;
    line-height: 1.22;
}

.font-36 {
    font-size: 2.25rem; // 36px
    font-weight: bold;
    line-height: 1.22;

@media (max-width: $screen-xs-max) {
        font-size: 1.25rem; // 20px
    }
}

.font-30 {
    font-size: 1.875rem; // 30px
    font-weight: bold;
    line-height: 1.22;

@media (max-width: $screen-xs-max) {
        font-size: 1.25rem; // 20px
    }
}

.font-24 {
    font-size: 1.5rem; // 24px
    font-weight: bold;
    line-height: 1.5;

@media (max-width: $screen-xs-max) {
        font-size: 1rem; // 16px
    }
}

.font-20 {
    font-size: 1.25rem; // 20px
    font-weight: 500;
    line-height: 1.22;

@media (max-width: $screen-xs-max) {
        font-size: 0.875rem; // 14px
    }
}

.font-16 {
    font-size: 1rem; // 16px
    font-weight: normal;
    line-height: 1.5;

@media (max-width: $screen-xs-max) {
        font-size: 0.75rem; // 12px
    }
}

.font-14 {
    font-size: 0.875rem; // 14px
    font-weight: normal;
    line-height: 1.4;
}

.font-12 {
    font-size: 0.75rem; // 12px
    font-weight: normal;
    line-height: 1.4;
}

.font-10 {
    font-size: 0.625rem; // 10px
    font-weight: normal;
    line-height: 1.4;
}

.font-weight-500 {
    font-weight: 500;
}

[ MAINHACK ]