/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/styles/_typography.scss
@import "styles/mixins";
/* h1 style */
@mixin h1 {
font-size: 80px;
line-height: 100%;
letter-spacing: -3px;
@include w($sm) {
font-size: 40px;
line-height: 120%;
letter-spacing: -1px;
}
}
.h1,
h1 {
@include h1;
}
/* h2 style */
@mixin h2 {
font-size: 56px;
line-height: 110%;
letter-spacing: -2px;
@include w($sm) {
font-size: 32px;
line-height: 120%;
letter-spacing: -1px;
}
}
.h2,
h2 {
@include h2;
}
/* H3 */
@mixin h3 {
font-size: 40px;
line-height: 120%;
letter-spacing: -1px;
@include w($sm) {
font-size: 24px;
line-height: 120%;
letter-spacing: -1px;
}
}
.h3,
h3 {
@include h3;
}
/* Body 1 */
@mixin body1 {
font-size: 20px;
line-height: 130%;
@include w($sm) {
font-size: 16px;
line-height: 140%;
}
}
.body1 {
@include body1;
}
/* Body 2 */
@mixin body2 {
font-size: 16px;
line-height: 140%;
@include w($sm) {
font-size: 14px;
}
}
.body2 {
@include body2;
}
/* Body 3 */
@mixin body3 {
font-size: 14px;
line-height: 100%;
@include w($sm) {
font-size: 12px;
}
}
.body3 {
@include body3;
}
/* Body 4 */
@mixin body4 {
font-size: 14px;
line-height: 140%;
letter-spacing: 0.5px;
@include w($sm) {
font-size: 12px;
}
}
.body4 {
@include body4;
}
/* Description 1 */
@mixin description1 {
font-size: 32px;
line-height: 110%;
letter-spacing: -1px;
@include w($sm) {
font-size: 24px;
line-height: 130%;
letter-spacing: -0.5px;
}
}
.description1 {
@include description1;
}
/* Description 2 */
@mixin description2 {
font-family: SpaceGrotesk-Bold;
font-size: 24px;
line-height: 120%;
@include w($sm) {
font-size: 20px;
}
}
.description2 {
@include description2;
}
/* Link */
@mixin link {
font-size: 16px;
line-height: 100%;
@include w($sm) {
font-size: 14px;
}
}
.link {
@include link;
}
/* Tag */
@mixin tag-text {
font-family: SpaceGrotesk-Bold;
font-size: 14px;
line-height: 100%;
@include w($sm) {
font-size: 12px;
}
}
.tag-text {
@include tag-text;
}
/* Button */
@mixin button-text {
font-family: SpaceGrotesk-Bold;
font-size: 16px;
line-height: 100%;
}
.button-text {
@include button-text;
}