:root {
    --font-family: 'Inter-VariableFont', sans-serif;

    --font-scale: 0.5vw;

    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-34: 34px;
    --font-size-36: 36px;

    --line-hieght-14: 14px;
    --line-hieght-36: 36px;
    --line-hieght-16: 16px;
    --line-hieght-24: 24px;
    --line-hieght-40: 40px;
    --line-hieght-20: 20px;
    --line-hieght-28: 28px;
    --line-hieght-30: 30px;
    --line-hieght-32: 32px;
    --line-hieght-34: 34px;
    --line-hieght-36: 36px;
    --line-hieght-40: 40px;

    --line-spacing--1: -1px;
    --line-spacing-0: 0px;
    --line-spacing--05: -0.5px;
}

p { margin-bottom: 0 !important; }

/* new typography */

.f-s12-w400-lh16-ls0 { font-size: var(--font-size-12); font-weight: 400; line-height: var(--line-hieght-16); letter-spacing: var(--line-spacing-0); }
.f-s12-w500-lh16-ls0 { font-size: var(--font-size-12); font-weight: 500; line-height: var(--line-hieght-16); letter-spacing: var(--line-spacing-0); }
.f-s12-w600-lh16-ls0 { font-size: var(--font-size-12); font-weight: 600; line-height: var(--line-hieght-16); letter-spacing: var(--line-spacing-0); }

.f-s14-w400-lh16-ls0 { font-size: var(--font-size-14); font-weight: 400; line-height: var(--line-hieght-16); letter-spacing: var(--line-spacing-0); }
.f-s14-w400-lh20-ls0 { font-size: var(--font-size-14); font-weight: 400; line-height: var(--line-hieght-20); letter-spacing: var(--line-spacing-0); }
.f-s14-w500-lh16-ls0 { font-size: var(--font-size-14); font-weight: 500; line-height: var(--line-hieght-16); letter-spacing: var(--line-spacing-0); }
.f-s14-w500-lh20-ls0 { font-size: var(--font-size-14); font-weight: 500; line-height: var(--line-hieght-20); letter-spacing: var(--line-spacing-0); }

.f-s16-w400-lh20-ls0 { font-size: var(--font-size-16); font-weight: 500; line-height: var(--line-hieght-20); letter-spacing: var(--line-spacing-0); }
.f-s16-w400-lh24-ls0 { font-size: var(--font-size-16); font-weight: 400; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing-0); }
.f-s16-w500-lh20-ls0 { font-size: var(--font-size-16); font-weight: 500; line-height: var(--line-hieght-20); letter-spacing: var(--line-spacing-0); }
.f-s16-w500-lh24-ls0 { font-size: var(--font-size-16); font-weight: 500; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing-0); }
.f-s16-w600-lh24-ls-05 { font-size: var(--font-size-16); font-weight: 600; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing--05); }

.f-s18-w500-lh24-ls-05 { font-size: var(--font-size-18); font-weight: 500; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing--05); }
.f-s18-w500-lh24-ls0 { font-size: var(--font-size-18); font-weight: 500; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing-0); }
.f-s18-w500-lh26-ls0 { font-size: var(--font-size-18); font-weight: 500; line-height: var(--line-hieght-26); letter-spacing: var(--line-spacing-0); }
.f-s18-w600-lh24-ls-05 { font-size: var(--font-size-18); font-weight: 600; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing--05); }

.f-s20-w500-lh28-ls0 { font-size: var(--font-size-20); font-weight: 500; line-height: var(--line-hieght-28); letter-spacing: var(--line-spacing-0); }
.f-s20-w500-lh28-ls-05 { font-size: var(--font-size-20); font-weight: 500; line-height: var(--line-hieght-28); letter-spacing: var(--line-spacing--05); }
.f-s20-w600-lh28-ls-05 { font-size: var(--font-size-20); font-weight: 600; line-height: var(--line-hieght-28); letter-spacing: var(--line-spacing--05); }

.f-s24-w500-lh32-ls0 { font-size: var(--font-size-24); font-weight: 500; line-height: var(--line-hieght-32); letter-spacing: var(--line-spacing-0); }
.f-s24-w600-lh32-ls-05 { font-size: var(--font-size-24); font-weight: 600; line-height: var(--line-hieght-32); letter-spacing: var(--line-spacing--05); }
.f-s24-w600-lh32-ls0 { font-size: var(--font-size-24); font-weight: 600; line-height: var(--line-hieght-32); letter-spacing: var(--line-spacing-0); }

.f-s26-w500-lh30-ls0 { font-size: var(--font-size-26); font-weight: 500; line-height: var(--line-hieght-30); letter-spacing: var(--line-spacing-0); }
.f-s28-w500-lh34-ls0 { font-size: var(--font-size-28); font-weight: 500; line-height: var(--line-hieght-34); letter-spacing: var(--line-spacing-0); }
.f-s30-w500-lh38-ls0 { font-size: var(--font-size-30); font-weight: 500; line-height: var(--line-hieght-38); letter-spacing: var(--line-spacing-0); }

.f-s32-w500-lh40-ls0 { font-size: var(--font-size-32); font-weight: 500; line-height: var(--line-hieght-40); letter-spacing: var(--line-spacing-0); }
.f-s32-w600-lh40-ls-1 { font-size: var(--font-size-32); font-weight: 600; line-height: var(--line-hieght-40); letter-spacing: var(--line-spacing--1); }

.f-s12-14-w400-lh16-ls0 { font-size: clamp(var(--font-size-12), calc(var(--font-size-10) + var(--font-scale)), var(--font-size-14));
    font-weight: 500; line-height: var(--line-hieght-16); letter-spacing: var(--line-spacing-0);
}
.f-s12-14-w500-lh16-ls0 { font-size: clamp(var(--font-size-12), calc(var(--font-size-10) + var(--font-scale)), var(--font-size-14));
    font-weight: 500; line-height: var(--line-hieght-16); letter-spacing: var(--line-spacing-0);
}
.f-s14-16-w400-lh20-ls0 { font-size: clamp(var(--font-size-14), calc(var(--font-size-12) + var(--font-scale)), var(--font-size-16));
    font-weight: 400; line-height: var(--line-hieght-20); letter-spacing: var(--line-spacing-0);
}
.f-s14-16-w500-lh20-ls0 { font-size: clamp(var(--font-size-14), calc(var(--font-size-12) + var(--font-scale)), var(--font-size-16));
    font-weight: 500; line-height: var(--line-hieght-20); letter-spacing: var(--line-spacing-0);
}
.f-s16-18-w500-lh24-ls0 { font-size: clamp(var(--font-size-16), calc(var(--font-size-14) + var(--font-scale)), var(--font-size-18));
    font-weight: 500; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing-0);
}
.f-s18-20-w500-lh24-ls0 { font-size: clamp(var(--font-size-18), calc(var(--font-size-16) + var(--font-scale)), var(--font-size-20));
    font-weight: 500; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing-0);
}
.f-s20-22-w500-lh22-ls0 { font-size: clamp(var(--font-size-20), calc(var(--font-size-18) + var(--font-scale)), var(--font-size-22));
    font-weight: 500; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing-0);
}
.f-s24-20-w500-lh24-ls0 { font-size: clamp(var(--font-size-20), calc(var(--font-size-16) + var(--font-scale)), var(--font-size-24));
  font-weight: 500; line-height: var(--line-hieght-24); letter-spacing: var(--line-spacing-0);
}
.f-s24-26-w500-lh32-ls0 { font-size: clamp(var(--font-size-24), calc(var(--font-size-20) + var(--font-scale)), var(--font-size-26));
    font-weight: 500; line-height: var(--line-hieght-32); letter-spacing: var(--line-spacing-0);
}
.f-s26-28-w500-lh30-ls0 { font-size: clamp(var(--font-size-26), calc(var(--font-size-24) + var(--font-scale)), var(--font-size-28));
    font-weight: 500; line-height: var(--line-hieght-30); letter-spacing: var(--line-spacing-0);
}
.f-s28-30-w500-lh34-ls0 { font-size: clamp(var(--font-size-28), calc(var(--font-size-26) + var(--font-scale)), var(--font-size-30));
    font-weight: 500; line-height: var(--line-hieght-40); letter-spacing: var(--line-spacing-0);
}
.f-s30-32-w500-lh38-ls0 { font-size: clamp(var(--font-size-30), calc(var(--font-size-28) + var(--font-scale)), var(--font-size-32));
    font-weight: 500; line-height: var(--line-hieght-38); letter-spacing: var(--line-spacing-0);
}
.f-s32-34-w500-lh40-ls-1 { font-size: clamp(var(--font-size-32), calc(var(--font-size-30) + var(--font-scale)), var(--font-size-34));
    font-weight: 500; line-height: var(--line-hieght-40); letter-spacing: var(--line-spacing--1);
}

.f-color-primary { color: var(--text-Primary); }
.f-color-secondary { color: var(--text-Secondary); }
.f-color-tertiary { color: var(--text-Tertiary); }
.f-color-primary-inverse { color: var(--text-Primary-inverse); }
.f-color-secondary-inverse { color: var(--text-Secondary-inverse); }
.f-color-tertiary-inverse { color: var(--text-Tertiary-inverse); }

.f-color-white { color: white; }

.f-color-selected { color: var(--text-Selected); }
.f-color-disabled { color: var(--text-Disabled); }
.f-color-brand { color: var(--text-Brand); }
.f-color-negative { color: var(--text-Negative); }
.f-color-positive { color: var(--text-Positive); }
.f-color-link { color: var(--link-color) !important; text-decoration: none !important; }

.br-0 { border-radius: 0; }
.br-4 { border-radius: 4px; }
.br-8 { border-radius: 8px; }
.br-12 { border-radius: 12px; }
.br-16 { border-radius: 16px; }
.br-20 { border-radius: 20px; }
.br-24 { border-radius: 24px; }

.f-crop-text-1, .f-crop-text-2, .f-crop-text-3, .f-crop-text-4 {
  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-box-orient: vertical;

  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Добавляет перенос текста по словам */
.f-crop-text-1.word-break, .f-crop-text-2.word-break, .f-crop-text-3.word-break, .f-crop-text-4.word-break {
  word-break: break-word;
  overflow-wrap: break-word;
}

.f-crop-text-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.f-crop-text-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.f-crop-text-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.f-crop-text-4 { -webkit-line-clamp: 4; line-clamp: 4; }
/* new typography */