text was clamped

src/components/Layout/Footer.tsx

@@ -7,7 +7,7 @@ export function Footer() {
           <img src="src/assets/text_logo.svg" className="h-[33px]" alt="" />
         </div>
         <div className="desktop:text-sm mobile:text-xs flex flex-col gap-y-1 font-medium text-[#ffffff]">
-          <p className="flex gap-4 ">
+          <p className="flex gap-4 tablet-figma:text-[12px,12px+(100vw-768px)/832*2,14px] tablet-figma:leading-[]">
             Политика конфиденциальности <span>graff.tech</span>
           </p>
           <p className="opacity-40">

src/components/Main/Availables.tsx

@@ -1,9 +1,10 @@
 import { MiniTitle } from '../../ui/MiniTitle';
+import { Title } from '../../ui/Title';
 
 export function Availables() {
   return (
     <div className="desktop:py-[70px] desktop:pl-10 mobile:py-14 tablet:px-6 mobile:px-4">
-      <h1 className="desktop:text-[64px] desktop:leading-[58px] desktop:mb-14 tablet:text-[40px] tablet:leading-10 mobile:mb-6 mobile:text-[28px] mobile:leading-7 text-[#ffffff] font-medium">
+      <Title className="desktop:mb-14 mobile:mb-6">
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
           style={{
@@ -15,7 +16,7 @@ export function Availables() {
           Многопользовательский
         </span>
         <br /> режим обучения
-      </h1>
+      </Title>
       <div className="flex mobile:max-desktop-figma:flex-col items-start desktop:w-fit gap-x-4 tablet:pt-5 tablet:border-t border-[#3D425C]">
         <MiniTitle text="возможности" />
         <div className="tablet:max-desktop-figma:mt-4 mobile:max-tablet:mt-[9px]">
@@ -33,7 +34,7 @@ export function Availables() {
               text="координация действий между несколькими сотрудниками"
             />
           </div>
-          <p className="text-[#ffffff] desktop:text-[32px] desktop:leading-8 tablet:text-[28px] tablet:leading-7 mobile:text-xl mobile:leading-5 font-medium tablet-figma:max-w-[668px] ">
+          <p className="text-[#ffffff] font-medium tablet-figma:max-w-[668px] tablet-figma:text-[clamp(28px,28px+(100vw-768px)/832*4,32px)] tablet-figma:leading-[clamp(28px,28px+(100vw-768px)/832*4,32px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-360px)/408*8,28px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-360px)/408*8,28px)]">
             В одном цифровом пространстве{' '}
             <span className="opacity-60">
               могут работать сотрудники, находящиеся в разных помещениях,
@@ -50,7 +51,9 @@ function MultiUserFeature({ text, img }: { text: string; img: string }) {
   return (
     <div className="flex flex-col justify-between items-start p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:max-w-[367px] tablet-figma:max-desktop-figma:min-w-[232px] desktop:min-h-[214px] tablet:min-h-[240px] mobile:min-h-[220px]">
       <img src={img} alt="" className="mb-14" />
-      <p className="text-base text-[#ffffff]">{text}</p>
+      <p className="tablet-figma:text-base tablet-figma:leading-[21.6px] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(18.9px,18.9px+(100vw-360px)/408*2.7,21.6px)] text-[#ffffff]">
+        {text}
+      </p>
     </div>
   );
 }

src/components/Main/Contacts.tsx

@@ -1,8 +1,10 @@
+import { Title } from '../../ui/Title';
+
 export function Contacts() {
   return (
     <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4 desktop:flex justify-between">
       <div className="tablet:max-desktop:mb-20 mobile:mb-14">
-        <h1 className="text-[#ffffff] desktop:text-[64px] desktop:leading-[58px] font-medium desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] tablet:text-[40px] tablet:leading-10 mobile:mb-6 mobile:text-[28px] mobile:leading-7">
+        <Title className="desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] mobile:mb-6">
           Хотите использовать интерактивные тренажеры в обучении?
           <br />
           <span
@@ -15,29 +17,29 @@ export function Contacts() {
           >
             Давайте обсудим детали.
           </span>
-        </h1>
-        <button className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold desktop:text-lg desktop:leading-[18px] mobile:text-base mobile:leading-4 text-[#ffffff] justify-between desktop:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center">
+        </Title>
+        <button className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold text-[#ffffff] justify-between desktop:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
           Оставить заявку <img src="src/assets/send.svg" alt="" />
         </button>
       </div>
       <div className="desktop-figma:min-w-[507px] tablet:max-desktop:flex items-stretch justify-between">
         <div className="tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
-          <h2 className="text-[#ffffff] desktop:text-xl desktop:leading-6 mobile:text-base mobile:leading-5 mb-4">
+          <h2 className="text-[#ffffff] mb-4 tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*4,20px)] tablet-figma:leding-[clamp(19.2px,19.2px+(100vw-768px)/832*4.8,24px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
             Свяжитесь с нами
           </h2>
           <div className="flex flex-col gap-y-3 desktop:mb-20 mobile:max-tablet:mb-6">
-            <button className="text-[#ffffff] desktop:text-lg mobile:max-desktop:text-base font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] mobile:leading-4">
+            <button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
               Написать
               <img src="src/assets/mail.svg" alt="" />
             </button>
-            <button className="text-[#ffffff] desktop:text-lg mobile:max-desktop:text-base font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] mobile:leading-4">
+            <button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
               Позвонить
               <img src="src/assets/phone.svg" alt="" />
             </button>
           </div>
         </div>
         <div className="flex flex-col gap-y-4 tablet:max-desktop:justify-between tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
-          <h2 className="desktop:text-xl desktop:leading-6 mobile:text-base mobile:leading-5 font-semibold text-[#ffffff]">
+          <h2 className="font-semibold text-[#ffffff] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*4,20px)] tablet-figma:leding-[clamp(19.2px,19.2px+(100vw-768px)/832*4.8,24px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
             Социальные сети
           </h2>
           <div className="flex gap-x-2">

src/components/Main/Distance.tsx

@@ -1,7 +1,9 @@
+import { Title } from '../../ui/Title';
+
 export function Distance() {
   return (
     <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4">
-      <h1 className="font-medium desktop:text-[64px] desktop:leading-[58px] tablet:text-[40px] tablet:leading-10 mobile:text-[28px] mobile:leading-7 text-[#ffffff] desktop:mb-14 tablet:mb-6 mobile:mb-4">
+      <Title className="desktop:mb-14 tablet:mb-6 mobile:mb-4">
         Платформа GRAFF.training поволяет осуществлять{' '}
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -14,10 +16,10 @@ export function Distance() {
           дистанционное обучение
         </span>{' '}
         с любого устройства
-      </h1>
+      </Title>
       <div className="xl:pl-64">
         <div className="tablet:grid desktop:gap-x-4 desktop:gap-y-6 tablet:gap-x-3 tablet:gap-y-4 desktop:grid-cols-2 tablet-figma:max-[956px]:grid-cols-[446px_1fr]">
-          <p className="desktop:text-lg tablet:text-base mobile:text-sm text-[#ffffff] row-start-1 mobile:max-tablet:mb-6">
+          <p className="text-[#ffffff] row-start-1 mobile:max-tablet:mb-6 tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(21.6px,21.6px+(100vw-768px)/832*2.7,24.3px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(18.9px,18.9px+(100vw-360px)/408*2.7,21.6px)]">
             Обучающиеся будут получать доступ к системе с высоко
             детализированной 3D графикой для прохождения сценариев на любом
             устройстве, без необходимости установки дополнительного ПО.

src/components/Main/Events.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { MiniTitle } from '../../ui/MiniTitle';
+import { PropsWithChildren } from 'react';
 
 export function Events() {
   return (
@@ -9,9 +10,9 @@ export function Events() {
         <div className="">
           <div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex mobile:max-tablet:flex-col items-start gap-x-4">
             <div className="desktop:min-w-[984px]">
-              <h1 className="text-[#ffffff] desktop-figma:text-[32px] desktop-figma:leading-8 tablet:text-[24px] tablet:leading-6 font-medium tablet:mb-8 mobile:text-xl mobile:leading-5">
+              <EventTitle className="tablet:mb-8">
                 Макет кабины машиниста «Иволга» на выставке ВДНХ
-              </h1>
+              </EventTitle>
               <div className="flex items-start gap-2 tablet-figma:max-desktop:max-w-[586px] mobile:max-tablet:mt-5">
                 <img
                   src="src/assets/ivolga.png"
@@ -28,15 +29,13 @@ export function Events() {
             <LinkButton href="/" />
           </div>
           <div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-2">
-            <h1 className="text-[#ffffff] desktop-figma:text-[32px] desktop-figma:leading-8 tablet:text-[24px] tablet:leading-6 font-medium mobile:text-xl mobile:leading-5">
-              Победа на BuildUP 2023 в номинации IT
-            </h1>
+            <EventTitle>Победа на BuildUP 2023 в номинации IT</EventTitle>
             <LinkButton href="/" />
           </div>
           <div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-2">
-            <h1 className="text-[#ffffff] desktop-figma:text-[32px] desktop-figma:leading-8 tablet:text-[24px] tablet:leading-6 font-medium mobile:text-xl mobile:leading-5">
+            <EventTitle>
               Транспортное и специальное тренажеростроение — 2023
-            </h1>
+            </EventTitle>
             <LinkButton href="/" />
           </div>
         </div>
@@ -45,11 +44,27 @@ export function Events() {
   );
 }
 
+function EventTitle({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) {
+  return (
+    <h1
+      className={
+        'text-[#ffffff] font-medium tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*8,32px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-360px)/408*4,24px)] ' +
+        className
+      }
+    >
+      {children}
+    </h1>
+  );
+}
+
 function LinkButton({ href }: { href: string }) {
   return (
     <Link
       to={href}
-      className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop-figma:text-sm mobile:text-xs tablet:max-desktop:min-w-[114px] mobile:max-tablet:self-end"
+      className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 tablet:max-desktop:min-w-[114px] mobile:max-tablet:self-end tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(14px,14px+(100vw-768px)/832*0.4,14.4px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[14px]"
     >
       как это было <img src="src/assets/arrow_insert.svg" alt="" />
     </Link>

src/components/Main/Projects.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useMemo, useReducer, useState } from 'react';
 import { MiniTitle } from '../../ui/MiniTitle';
 import { useWindowWidth } from '../../hooks/useWindowWidth';
+import { Title } from '../../ui/Title';
 
 export function Projects() {
   return (
     <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4 overflow-hidden select-none">
-      <h1 className="text-[#ffffff] font-medium desktop:text-[64px] desktop:leading-[58px] desktop:mb-14 mobile:mb-6 tablet:text-[40px] tablet:leading-10 mobile:text-[28px] mobile:leading-7">
+      <Title className="desktop:mb-14 mobile:mb-6">
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
           style={{
@@ -17,7 +18,7 @@ export function Projects() {
           Большой опыт в работе
         </span>{' '}
         с промышленными предприятиями и учебными заведениями
-      </h1>
+      </Title>
       <MiniTitle text="реализованные проекты" />
       <Slider
         projects={[
@@ -54,18 +55,18 @@ function Project({
   return (
     <div className="bg-[#3D425C] bg-opacity-50 rounded-2xl box-border desktop:min-w-[624px] tablet:min-w-[520px] mobile:min-w-[328px] duration-1000 select-none desktop:translate-x-[264px]">
       <div
-        className="bg-cover h-[340px] rounded-2xl"
+        className="bg-cover bg-center bg-no-repeat h-[340px] rounded-2xl"
         style={{ backgroundImage: `url(${src})` }}
       />
       <div className="p-5">
-        <h1 className="text-[#ffffff] font-medium desktop:text-lg tablet:text-base mobile:text-sm">
+        <h1 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[19.2px,19.2px+(100vw-768px)/832*2.4,21.6px] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-360px)/408*2,19.2px)]">
           {title}
         </h1>
         <div className="flex gap-2 mt-4">
           {tags.map(tag => (
             <p
               key={tag}
-              className="text-[#ffffff] opacity-80 font-medium desktop:text-sm mobile:text-xs rounded-3xl py-3 px-4 border border-[#798FFF]"
+              className="text-[#ffffff] opacity-80 font-medium rounded-3xl py-3 px-4 border border-[#798FFF] tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[16.8px,16.8px+(100vw-768px)/832*2.8,19.6px] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]"
             >
               {tag}
             </p>

src/components/Main/Teaching.tsx

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from 'react';
 import { Title } from '../../ui/Title';
 
 export function Teaching() {
@@ -39,15 +40,15 @@ function TeachingFeaturesForDesktop() {
   return (
     <div className="mobile:max-desktop:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
       <div className="max-w-[880px] desktop:p-10 tablet:p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex desktop:min-w-[880px] desktop:min-h-[400px] bg-auto bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-right-bottom">
-        <div className="text-[#ffffff]">
-          <h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
+        <div className="">
+          <TeachingFeatureTitle className="">
             Управление процессом
-          </h1>
-          <p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[361px]">
+          </TeachingFeatureTitle>
+          <TeachingFeatureDescription className="max-w-[361px]">
             Назначение сценария обучения
             <br />
             Выбор режима: обучение, тренировка, тестирование
-          </p>
+          </TeachingFeatureDescription>
         </div>
         <img
           src="src/assets/master_card.svg"
@@ -57,27 +58,27 @@ function TeachingFeaturesForDesktop() {
       </div>
 
       <div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px]">
-        <div className="text-[#ffffff]">
-          <h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
+        <div className="">
+          <TeachingFeatureTitle className="">
             Управление пользователями
-          </h1>
-          <p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[200px]">
+          </TeachingFeatureTitle>
+          <TeachingFeatureDescription className="max-w-[200px]">
             Добавление, удаление
             <br />и назначение ролей
-          </p>
+          </TeachingFeatureDescription>
         </div>
         <img src="src/assets/modal.svg" className="rounded-lg" alt="" />
       </div>
 
       <div className="max-w-[880px] p-10 pb-[18px] bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] bg-[url(src/assets/pinned_windows.svg)] bg-no-repeat bg-right-bottom">
         <div className="text-[#ffffff]">
-          <h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
+          <TeachingFeatureTitle className="">
             Видеозапись обучения
-          </h1>
-          <p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[361px]">
+          </TeachingFeatureTitle>
+          <TeachingFeatureDescription className="max-w-[361px]">
             Фиксация и хранение сессий обучения, тренировки и тестирования.
             Ретроспектива по пройденной сессии вместе с инструктором
-          </p>
+          </TeachingFeatureDescription>
         </div>
         <img
           src="src/assets/manage_video.svg"
@@ -87,15 +88,15 @@ function TeachingFeaturesForDesktop() {
       </div>
 
       <div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] flex justify-between">
-        <div className="text-[#ffffff]">
-          <h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
+        <div className="">
+          <TeachingFeatureTitle className="">
             Статистика обучения
-          </h1>
-          <p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[280px]">
+          </TeachingFeatureTitle>
+          <TeachingFeatureDescription className="max-w-[280px]">
             Фиксация правильных и неправильных действий.
             <br />
             Отчет об ошибках
-          </p>
+          </TeachingFeatureDescription>
         </div>
         <div className="flex">
           <img
@@ -114,17 +115,53 @@ function TeachingFeaturesForDesktop() {
   );
 }
 
+function TeachingFeatureTitle({
+  children,
+  className = '',
+}: PropsWithChildren<{
+  className?: string;
+}>) {
+  return (
+    <h1
+      className={
+        'tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*8,32px)] mobile:max-tablet-figma:text-[clamp(20px,24px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,24px+(100vw-360px)/408*4,24px)] desktop:mb-2 mobile:max-desktop:mb-1 font-medium text-[#ffffff] ' +
+        className
+      }
+    >
+      {children}
+    </h1>
+  );
+}
+
+function TeachingFeatureDescription({
+  className = '',
+  children,
+}: PropsWithChildren<{
+  className?: string;
+}>) {
+  return (
+    <p
+      className={
+        'tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*6,18px)] tablet-figma:leading-[16.8px,1.52vw,24.3px] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px] text-[#ffffff] ' +
+        className
+      }
+    >
+      {children}
+    </p>
+  );
+}
+
 function TeachingFeaturesForOtherScreens() {
   return (
     <div className="mobile:max-tablet:flex mobile:max-tablet:flex-col mobile:max-tablet:gap-y-2 tablet-figma:max-desktop:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 desktop:hidden tablet:max-tablet-figma:flex tablet:max-tablet-figma:flex-col">
       <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-tablet:flex mobile:max-tablet:flex-col">
-        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
+        <TeachingFeatureTitle className="">
           Управление
           <br /> пользователями
-        </h1>
-        <p className="text-[#ffffff] text-xs tablet:max-desktop:-mb-[18px] leading-[17px]">
+        </TeachingFeatureTitle>
+        <TeachingFeatureDescription className="tablet:max-desktop:-mb-[18px]">
           Добавление, удаление и назначение ролей
-        </p>
+        </TeachingFeatureDescription>
         <img
           src="src/assets/modal.svg"
           className="relative mobile:max-tablet:w-[351px] tablet-figma:max-desktop:top-7 tablet:max-tablet-figma:top-11 mobile:max-tablet:top-5 mobile:max-tablet:left-[92px] self-end tablet:max-tablet-figma:m-auto"
@@ -133,14 +170,14 @@ function TeachingFeaturesForOtherScreens() {
       </div>
 
       <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-desktop:bg-contain mobile:max-tablet:bg-contain mobile:max-tablet:bg-[140px_130px] tablet:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-desktop:bg-[73px_102px] tablet:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
-        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
+        <TeachingFeatureTitle className="">
           Управление процессом
-        </h1>
-        <p className="text-[#ffffff] text-xs leading-[17px]">
+        </TeachingFeatureTitle>
+        <TeachingFeatureDescription className="">
           Назначение сценария обучения
           <br />
-          Выбор режима: обучение, тренировка, тестирование
-        </p>
+          Выбор режима: обучение, тренировка, тестирование{' '}
+        </TeachingFeatureDescription>
         <img
           src="src/assets/master_card.svg"
           className="rounded-lg mb-11 h-[92px] mt-[166px] tablet:max-tablet-figma:mx-auto"
@@ -149,13 +186,13 @@ function TeachingFeaturesForOtherScreens() {
       </div>
 
       <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] tablet:max-tablet-figma:bg-[100%_100%] tablet-figma:max-desktop:bg-contain bg-no-repeat tablet-figma:max-desktop:bg-[67px_119px] mobile:max-tablet:bg-[100%_119px] mobile:max-tablet:flex mobile:max-tablet:flex-col row-start-2 row-span-2 col-start-1">
-        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
+        <TeachingFeatureTitle className="">
           Видеозапись обучения
-        </h1>
-        <p className="text-[#ffffff] text-xs leading-[17px]">
+        </TeachingFeatureTitle>
+        <TeachingFeatureDescription className="">
           Фиксация и хранение сессий обучения, тренировки и тестирования.
           Ретроспектива по пройденной сессии вместе с инструктором
-        </p>
+        </TeachingFeatureDescription>
         <img
           src="src/assets/manage_video.svg"
           className="rounded-lg h-[94px] mt-[147px] mb-6 tablet:max-tablet-figma:mx-auto tablet:max-tablet-figma:mr-[200px] self-end mr-[168px]"
@@ -164,14 +201,13 @@ function TeachingFeaturesForOtherScreens() {
       </div>
 
       <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 tablet:max-tablet-figma:pb-6 mobile:max-tablet:pb-5 overflow-hidden row-start-3 col-start-2">
-        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
+        <TeachingFeatureTitle className="">
           Статистика обучения
-        </h1>
-        <p className="text-[#ffffff] text-xs leading-[17px] mobile:max-tablet-figma:mb-5">
-          Фиксация правильных и неправильных действий.
-          <br />
+        </TeachingFeatureTitle>
+        <TeachingFeatureDescription className="mobile:max-tablet-figma:mb-5">
+          Фиксация правильных и неправильных действий. <br />
           Отчет об ошибках
-        </p>
+        </TeachingFeatureDescription>
         <div className="flex flex-col">
           <div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-desktop:overflow-hidden mt-0.5 mobile:max-tablet:pl-11 mx-auto">
             <img

src/components/Main/Trainings.tsx

@@ -55,10 +55,10 @@ function TrainingsFeature({
   return (
     <div className="tablet:flex items-stretch justify-between tablet:py-10 desktop-figma:min-w-[1133px] border-b border-[#3D425C] first:border-t mobile:max-tablet:pt-5">
       <div className="tablet:flex flex-col justify-between mobile:max-tablet:mb-[42px]">
-        <h1 className="font-medium text-[#ffffff] mobile:max-tablet:mb-2">
+        <h1 className="font-medium text-[#ffffff] mobile:max-tablet:mb-2 tablet-figma:text-[clamp(20px,20px+(100vw-768px)/832*12,32px)] tablet-figma:leading-[clamp(20px,20px+(100vw-768px)/832*12,32px)] mobile:max-tablet-figma:text-xl mobile:max-tablet-figma:leading-5">
           {title}
         </h1>
-        <p className="desktop:text-lg desktop:leading-6 tablet:text-sm tablet:leading-[19px] tablet:max-w-[346px] text-[#ffffff] desktop:max-w-[495px]">
+        <p className="desktop:leading-6 tablet:max-w-[346px] text-[#ffffff] desktop:max-w-[495px] tablet-figma:text-[clamp(14px,14px+(100vw-768px)/832*4,18px)] tablet-figma:leading-[clamp(18.9px,18.9px+(100vw-768px)/832*2.7,21.6px)] mobile:max-tablet-figma:text-sm mobile:max-tablet-figma:leading-[18.9px]">
           {text}
         </p>
       </div>
@@ -68,7 +68,7 @@ function TrainingsFeature({
       </div>
       <div className="tablet-figma:flex tablet:max-tablet-figma:hidden mobile:max-tablet-figma:hidden">
         <img src={src} alt="" />
-        <p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm">
+        <p className="text-[#52587A] desktop:font-medium desktop:leading-[19.6px] tablet:text-sm">
           {order}
         </p>
       </div>
@@ -77,7 +77,7 @@ function TrainingsFeature({
         className="mobile:max-tablet:hidden tablet-figma:hidden"
         alt=""
       />
-      <p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm mobile:max-tablet:hidden tablet-figma:hidden">
+      <p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-[19.6px] tablet:text-sm mobile:max-tablet:hidden tablet-figma:hidden">
         {order}
       </p>
     </div>