@layer components {
.text-h1 {
font-size: 32px;
font-weight: 700;
line-height: 125%;
letter-spacing: 0.32%;
@apply desktop:text-[48px];
}
.text-h2 {
font-size: 32px;
font-weight: 700;
line-height: 140%;
letter-spacing: 0.24%;
@apply desktop:text-[32px];
}
.text-h3 {
font-size: 24px;
font-weight: 600;
line-height: 150%;
letter-spacing: 0.2%;
@apply desktop:text-[28px];
}
.text-h4 {
font-size: 18px;
font-weight: 600;
line-height: 160%;
letter-spacing: 0.18%;
@apply desktop:text-[24px];
}
.text-h5 {
font-size: 16px;
font-weight: 500;
line-height: 160%;
letter-spacing: 0.08%;
@apply desktop:text-[20px];
}
.text-h6 {
font-size: 14px;
font-weight: 500;
line-height: 160%;
letter-spacing: 0.07%;
@apply desktop:text-[18px];
}
.text-subtitle-1 {
font-size: 16px;
line-height: 175%;
letter-spacing: 0.08%;
@apply desktop:text-[20px];
}
.text-subtitle-2 {
font-size: 14px;
font-weight: 500;
line-height: 160%;
letter-spacing: 0.08%;
@apply desktop:text-[16px];
}
.text-paragraph-1 {
font-size: 14px;
line-height: 160%;
letter-spacing: 0;
@apply desktop:text-[16px];
}
.text-paragraph-2 {
font-size: 12px;
line-height: 150%;
letter-spacing: 0;
@apply desktop:text-[14px];
}
.text-button {
font-size: 14px;
font-weight: 600;
line-height: 160%;
letter-spacing: 0.28%;
@apply desktop:text-[16px];
}
.text-caption {
font-size: 12px;
line-height: 150%;
letter-spacing: 0.06%;
}
.text-overline {
font-size: 10px;
font-weight: 600;
line-height: 150%;
letter-spacing: 1%;
}
.heading {
font-size: 28px;
font-weight: 700;
line-height: 125%;
letter-spacing: 0.32%;
@apply desktop:text-[40px];
}
}