@font-family: "Inter", sans-serif;

@fw-bold: 700;
@fw-extra-bold: 700;
@fw-semi-bold: 600;
@fw-regular: 400;
@fw-medium: 500;


@letter-spacing-1: 0.01em;
@letter-spacing-2: -0.02em;
@letter-spacing-5: -0.05em;


.H1-mobile {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: @letter-spacing-2;
}


.H2-mobile {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: @letter-spacing-2;
}


.H3-extra-bold-mobile {
  font-family: @font-family;
  font-weight: @fw-extra-bold;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: @letter-spacing-2;
}


.H3-semi-bold-mobile {
  font-family: @font-family;
  font-weight: @fw-semi-bold;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: @letter-spacing-2;
}


.H4-mobile {
  font-family: @font-family;
  font-weight: @fw-semi-bold;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: @letter-spacing-2;
}


.H5-mobile {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: @letter-spacing-2;
}


.XL-mobile {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}


.L-regular-mobile {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
}


.L-medium-mobile {
  font-family: @font-family;
  font-weight: @fw-medium;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
}


.M-regular-mobile {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0;
}


.M-semi-bold-mobile {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}


.M-medium-mobile {
  font-family: @font-family;
  font-weight: @fw-medium;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
}


.S-mobile {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
}


.XS-mobile {
  font-family: @font-family;
  font-weight: @fw-semi-bold;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0;
}

/*
.S-mobile {
  font-family: @font-family;
  font-weight: @fw-semi-bold;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: @letter-spacing-2;
}
*/

.H1-desktop {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 52px;
  line-height: 60px;
  letter-spacing: @letter-spacing-2;
}


.H2-desktop {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: @letter-spacing-2;
}


.H3-desktop {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: @letter-spacing-2;
}


.H4-desktop {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: @letter-spacing-2;
}


.L-bold-desktop {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0;
}


.L-regular-desktop {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0;
}


.XL-desktop {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: @letter-spacing-5;
}


.M-desktop {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: @letter-spacing-5;
}


.M-medium-desktop {
  font-family: @font-family;
  font-weight: @fw-medium;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: @letter-spacing-5;
}


.M-desktop-semi-bold {
  font-family: @font-family;
  font-weight: @fw-semi-bold;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: @letter-spacing-5;
}


.S-regular-desktop {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: @letter-spacing-5;
}


.S-semibold-desktop {
  font-family: @font-family;
  font-weight: @fw-semi-bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: @letter-spacing-1;
}


.XS-regular-desktop {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: @letter-spacing-2;
}


.XS-semi-bold-desktop {
  font-family: @font-family;
  font-weight: @fw-regular;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: @letter-spacing-2;
}


.S-bold {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 14px;
  line-height: 16px;
}

.S-semi-bold {
  font-family: @font-family;
  font-weight: @fw-semi-bold;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: @letter-spacing-5;
}

.H2-tablet {
  font-family: @font-family;
  font-weight: @fw-bold;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: @letter-spacing-2;
}