.title-main {
  font-family: var(--font-family-base);
  font-size: var(--font-title-main-desktop);
  line-height: 72px;
  letter-spacing: -0.02em;
  font-weight: 700;
}

@media (max-width: 768px) {
  .title-main {
    font-size: var(--font-title-main-mobile);
    line-height: 50px;
  }
}

.subtitle {
  font-family: var(--font-family-base);
  font-size: var(--font-subtitle);
  line-height: 28px;
  font-weight: 600;
}

.title-md {
  font-family: var(--font-family-base);
  font-size: var(--font-title-md-desktop);
  line-height: 56px;
  letter-spacing: -0.02em;
  font-weight: 700;
}

@media (max-width: 768px) {
  .title-md {
    font-size: var(--font-title-md-mobile);
    line-height: 34px;
  }
}

.title-sm {
  font-family: var(--font-family-base);
  font-size: var(--font-title-sm-desktop);
  line-height: 36px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .title-sm {
    font-size: var(--font-title-sm-mobile);
    line-height: 24px;
  }
}

.text {
  font-family: var(--font-family-base);
  font-size: var(--font-text);
  line-height: 22px;
}

.semibold {
  font-weight: 500;
}

.bold {
  font-weight: 600;
}

.bolder {
  font-weight: 700;
}