From f7eead0b3f60a3ab3e38bff99eb265ff7892ccda Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 16 Jul 2024 15:21:15 +0500
Subject: [PATCH] fixed button, refactoring

---
 src/components/Layout/Footer.tsx              | 12 ++---
 src/components/Layout/Header.tsx              |  8 +--
 src/components/Layout/Navbar.tsx              | 14 ++---
 src/components/Main/Availables.tsx            | 27 ++++------
 src/components/Main/Contacts.tsx              | 18 +++----
 ...tactsFooterForm.tsx => ContactsFooter.tsx} |  3 +-
 src/components/Main/Decreasing.tsx            | 21 +++-----
 src/components/Main/Distance.tsx              | 23 +++-----
 src/components/Main/Efficiency.tsx            | 14 ++---
 src/components/Main/Events.tsx                | 24 ++++-----
 src/components/Main/Marquee.tsx               | 10 ++--
 .../Main/ProductTabs/ForTeachingTab.tsx       | 40 +++++++-------
 .../Main/ProductTabs/SimulatorsTab.tsx        | 30 +++++------
 .../Main/ProductTabs/TrainingsTab.tsx         | 22 ++++----
 src/components/Main/Products.tsx              |  8 +--
 src/components/Main/Projects.tsx              | 27 ++++------
 src/components/Main/Teaching.tsx              | 53 ++++++++-----------
 src/components/Main/Trainings.tsx             | 22 ++++----
 src/components/Main/Video.tsx                 | 10 ++--
 src/index.css                                 | 18 +++----
 src/ui/Button.tsx                             |  6 ++-
 src/ui/MiniTitle.tsx                          |  2 +-
 tailwind.config.js                            |  2 -
 23 files changed, 183 insertions(+), 231 deletions(-)
 rename src/components/Main/{ContactsFooterForm.tsx => ContactsFooter.tsx} (97%)

diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 9196b35..94280ac 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -2,8 +2,8 @@ import { Link } from 'react-router-dom';
 
 export function Footer() {
   return (
-    <footer className="tablet:grid xl:grid-cols-[2fr_1fr_1fr] tablet:max-xl:grid-cols-2 tablet:max-xl:grid-rows-2">
-      <div className="flex tablet:items-center mobile:max-tablet:flex-col tablet:px-10 mobile:px-4 tablet:py-9 mobile:py-4 border-t border-[#3D425C] gap-6 tablet:max-xl:row-start-1 tablet:max-xl:col-span-2">
+    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:max-xl:grid-cols-2 sm:max-xl:grid-rows-2">
+      <div className="flex sm:items-center mobile:max-sm:flex-col sm:px-10 mobile:px-4 sm:py-9 mobile:py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
         <Link to={'/'} className="w-32 flex justify-between items-center">
           <img src="src/assets/logo.svg" alt="" className="h-[50px]" />
           <img src="src/assets/text_logo.svg" className="h-[33px]" alt="" />
@@ -11,16 +11,16 @@ export function Footer() {
         <div className="flex flex-col gap-y-1">
           <Link
             to="https://graff.tech/privacypolicy"
-            className="text-[#ffffff] tablet:font-medium flex gap-4 m-text"
+            className="text-[#ffffff] sm:font-medium flex gap-4 m-text"
           >
             Политика конфиденциальности <span>graff.tech</span>
           </Link>
-          <p className="opacity-40 text-[#ffffff] tablet:font-medium m-text">
+          <p className="opacity-40 text-[#ffffff] sm:font-medium m-text">
             © 2024 GRAFF interactive. Все права защищены
           </p>
         </div>
       </div>
-      <div className="px-10 py-[30px] flex items-center border-t xl:border-l tablet:border-r border-[#3D425C] flex-1 justify-between tablet:max-xl:row-start-2 tablet:max-xl:col-start-1">
+      <div className="px-10 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
         <div>
           <Contact type="email" text="info@graff.tech" />
           <Contact type="phone" text="+7 800 770 00 67" />
@@ -29,7 +29,7 @@ export function Footer() {
           RU
         </div>
       </div>
-      <div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between tablet:max-xl:row-start-2 tablet:max-xl:col-start-2">
+      <div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
         <div>
           <Contact type="email" text="info@graff.tech" />
           <Contact type="phone" text="+971 58 506 0097" />
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index cbdbc18..fc12dbe 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -3,8 +3,8 @@ import { Marquee } from '../Main/Marquee';
 export function Header() {
   return (
     <header className="text-[#ffffff]">
-      <div className="desktop:px-10 tablet:px-6 mobile:px-4 desktop:py-28 tablet:py-12 mobile:py-14">
-        <h1 className="desktop-figma:mb-[38px] pb-8 font-medium desktop:block mobile:max-desktop:hidden h1">
+      <div className="lg:px-10 sm:px-6 mobile:px-4 lg:py-28 sm:py-12 mobile:py-14">
+        <h1 className="desktop-figma:mb-[38px] pb-8 font-medium lg:block mobile:max-lg:hidden h1">
           Создаем{' '}
           <span
             className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -18,7 +18,7 @@ export function Header() {
           </span>{' '}
           для промышленности и образования
         </h1>
-        <h1 className="font-medium desktop:hidden mobile:max-desktop:block h1">
+        <h1 className="font-medium lg:hidden mobile:max-lg:block h1">
           Интерактивные тренажеры{' '}
           <span
             className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -31,7 +31,7 @@ export function Header() {
             для обучения сотрудников
           </span>
         </h1>
-        <h3 className="max-w-[768px] desktop:block mobile:max-desktop:hidden h3">
+        <h3 className="max-w-[768px] lg:block mobile:max-lg:hidden h3">
           Помогаем сократить затраты на обучение, повысить безопасность и
           производительность
         </h3>
diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx
index b3b7e8b..ba4f56a 100644
--- a/src/components/Layout/Navbar.tsx
+++ b/src/components/Layout/Navbar.tsx
@@ -23,13 +23,13 @@ export function Navbar() {
 
   return (
     <>
-      <nav className="flex items-stretch justify-between border-b border-[#3D425C] desktop:pl-10 mobile:pl-4 desktop:min-h-[72px] mobile:min-h-16">
+      <nav className="flex items-stretch justify-between border-b border-[#3D425C] lg:pl-10 mobile:pl-4 lg:min-h-[72px] mobile:min-h-16">
         <Link to={'/'} className="flex w-[104px] justify-between items-center">
           <img src="src/assets/logo.svg" alt="" />
           <img
             src="src/assets/text_logo.svg"
             alt=""
-            className="desktop:block mobile:hidden"
+            className="lg:block mobile:hidden"
           />
         </Link>
         <div className="flex">
@@ -39,7 +39,7 @@ export function Navbar() {
           <NavLink route="#events">События</NavLink>
           <Button
             onClick={() => setModal(<ModalWithForm />)}
-            className="rounded-none btn-text font-semibold tablet:block mobile:hidden px-10"
+            className="rounded-none btn-text font-semibold sm:block mobile:hidden px-10"
           >
             Оставить заявку
           </Button>
@@ -47,7 +47,7 @@ export function Navbar() {
           <button
             ref={menuBtnRef}
             onClick={() => setMenuOpen(prev => !prev)}
-            className="px-6 py-5 min-[1350px]:hidden mobile:block border-[#3D425C] mobile:max-tablet:border-l"
+            className="px-6 py-5 min-[1350px]:hidden mobile:block border-[#3D425C] mobile:max-sm:border-l"
           >
             <img
               src={`src/assets/${menuOpen ? 'cross' : 'burger'}.svg`}
@@ -63,7 +63,7 @@ export function Navbar() {
         ref={menuRef}
         onClick={() => setMenuOpen(false)}
         className={
-          'absolute z-50 w-full min-[1350px]:hidden tablet:max-[1350px]:max-w-[340px] right-0 tablet:border-l border-b border-[#3D425C]' +
+          'absolute z-50 w-full min-[1350px]:hidden sm:max-[1350px]:max-w-[340px] right-0 sm:border-l border-b border-[#3D425C]' +
           (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '')
         }
       >
@@ -71,14 +71,14 @@ export function Navbar() {
         <BurgerLink route="#trainings">Варианты комплектации</BurgerLink>
         <BurgerLink route="#projects">Проекты</BurgerLink>
         <BurgerLink route="#events">События</BurgerLink>
-        <div className="grid mobile:max-tablet:grid-cols-[216px_1fr_1fr] tablet:grid-cols-2">
+        <div className="grid mobile:max-sm:grid-cols-[216px_1fr_1fr] sm:grid-cols-2">
           <Button
             onClick={() => {
               setMenuOpen(false);
               setModal(<ModalWithForm />);
             }}
             width="full"
-            className="tablet:hidden font-semibold btn-text rounded-none"
+            className="sm:hidden font-semibold btn-text rounded-none"
           >
             Оставить заявку
           </Button>
diff --git a/src/components/Main/Availables.tsx b/src/components/Main/Availables.tsx
index c52700c..6e06a9e 100644
--- a/src/components/Main/Availables.tsx
+++ b/src/components/Main/Availables.tsx
@@ -5,27 +5,18 @@ import { Title } from '../../ui/Title';
 
 export function Availables() {
   return (
-    <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4">
-      <Title className="desktop-figma:mb-[77px] desktop:mb-14 mobile:mb-6">
-        <span
-          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-          style={{
-            backgroundClip: 'text',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-          }}
-        >
-          Многопользовательский
-        </span>
+    <div className="lg:py-[70px] lg:px-10 mobile:py-14 sm:px-6 mobile:px-4">
+      <Title className="desktop-figma:mb-[77px] lg:mb-14 mobile:mb-6">
+        <span className="text-gradient">Многопользовательский</span>
         <br />
         режим обучения
       </Title>
-      <AppearanceHr className="mobile:max-tablet:hidden" />
-      <div className="flex mobile:max-desktop:flex-col items-start desktop:w-fit tablet:pt-5">
+      <AppearanceHr className="mobile:max-sm:hidden" />
+      <div className="flex mobile:max-lg:flex-col items-start lg:w-fit sm:pt-5">
         <MiniTitle text="возможности" />
-        <AppearanceHr className="tablet:hidden w-full  mt-2" />
-        <div className="tablet:max-desktop-figma:mt-4 mobile:max-tablet:mt-2">
-          <div className="flex mobile:max-tablet:flex-col mobile:max-tablet:gap-y-2 desktop:gap-x-4 tablet:max-desktop:gap-x-3 tablet:pb-5 mobile:pb-2 mobile:max-tablet:pt-2">
+        <AppearanceHr className="sm:hidden w-full  mt-2" />
+        <div className="sm:max-desktop-figma:mt-4 mobile:max-sm:mt-2">
+          <div className="flex mobile:max-sm:flex-col mobile:max-sm:gap-y-2 lg:gap-x-4 sm:max-lg:gap-x-3 sm:pb-5 mobile:pb-2 mobile:max-sm:pt-2">
             <MultiUserFeature
               img="src/assets/processes.svg"
               text="отработка производственных процессов, в которых участвует группа людей"
@@ -63,7 +54,7 @@ export function Availables() {
 
 function MultiUserFeature({ text, img }: { text: string; img: string }) {
   return (
-    <div className="flex flex-col desktop-figma:max-w-[22vw] w-full justify-between items-start p-6 bg-[#3D425C4D] rounded-2xl desktop:min-h-[214px] tablet:min-h-[240px] mobile:min-h-[220px]">
+    <div className="flex flex-col desktop-figma:max-w-[22vw] w-full justify-between items-start p-6 bg-[#3D425C4D] rounded-2xl lg:min-h-[214px] sm:min-h-[240px] mobile:min-h-[220px]">
       <img src={img} alt="" className="mb-14" />
       <p className="l-text text-[#ffffff] desktop-figma:max-w-[70%]">{text}</p>
     </div>
diff --git a/src/components/Main/Contacts.tsx b/src/components/Main/Contacts.tsx
index e97f009..7c75721 100644
--- a/src/components/Main/Contacts.tsx
+++ b/src/components/Main/Contacts.tsx
@@ -1,11 +1,11 @@
-import ContactsFooter from './ContactsFooterForm';
+import ContactsFooter from './ContactsFooter';
 
 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 gap-x-4">
+    <div className="lg:py-[70px] lg:px-10 mobile:py-14 sm:px-6 mobile:px-4 lg:flex justify-between gap-x-4">
       <ContactsFooter />
-      {/* <div className="tablet:max-desktop:mb-20 mobile:mb-14">
-        <Title className="desktop-figma:mb-[77px] desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] mobile:mb-6">
+      {/* <div className="sm:max-lg:mb-20 mobile:mb-14">
+        <Title className="desktop-figma:mb-[77px] lg:mb-[68px] desktop-figma:max-w-[899px] lg:max-w-[720px] mobile:mb-6">
           Хотите использовать интерактивные тренажеры в обучении?
           <br />
           <span
@@ -21,15 +21,15 @@ export function Contacts() {
         </Title>
         <button
           onClick={() => setModal(<ContactsForm />)}
-          className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold text-[#ffffff] justify-between desktop-figma:min-w-[23vw] desktop:max-desktop-figma:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center btn-text"
+          className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold text-[#ffffff] justify-between desktop-figma:min-w-[23vw] lg:max-desktop-figma:min-w-[368px] sm:max-lg:min-w-[332px] mobile:max-sm:w-full items-center btn-text"
         >
           Оставить заявку <img src="src/assets/send.svg" alt="" />
         </button>
       </div>
-      <div className="min-w-[31.69vw] tablet:max-desktop:flex items-stretch justify-between gap-x-4">
-        <div className="desktop:min-w-[20.75vw] tablet:w-full">
+      <div className="min-w-[31.69vw] sm:max-lg:flex items-stretch justify-between gap-x-4">
+        <div className="lg:min-w-[20.75vw] sm:w-full">
           <p className="text-[#ffffff] mb-4 l-text">Свяжитесь с нами</p>
-          <div className="flex flex-col gap-y-3 desktop:mb-20 mobile:max-tablet:mb-6">
+          <div className="flex flex-col gap-y-3 lg:mb-20 mobile:max-sm:mb-6">
             <Link
               to={'mailto:info@graff.tech'}
               className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text"
@@ -46,7 +46,7 @@ export function Contacts() {
             </Link>
           </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]">
+        <div className="flex flex-col gap-y-4 sm:max-lg:justify-between tablet-figma:max-lg:min-w-[332px] sm:max-tablet-figma:min-w-[250px]">
           <p className="font-semibold text-[#ffffff] l-text">Социальные сети</p>
           <div className="flex gap-x-2">
             <Link
diff --git a/src/components/Main/ContactsFooterForm.tsx b/src/components/Main/ContactsFooter.tsx
similarity index 97%
rename from src/components/Main/ContactsFooterForm.tsx
rename to src/components/Main/ContactsFooter.tsx
index 2dfc3c1..eab0192 100644
--- a/src/components/Main/ContactsFooterForm.tsx
+++ b/src/components/Main/ContactsFooter.tsx
@@ -1,3 +1,4 @@
+import AppearanceHr from '../../ui/AppearanceHr';
 import MailIcon from '../icons/MailIcon';
 import PhoneIcon from '../icons/PhoneIcon';
 import TelegramIcon from '../icons/TelegramIcon';
@@ -27,7 +28,7 @@ export default function ContactsFooter() {
             <p className="2xl:text-xl font-gilroy font-semibold">
               Горячая линия
             </p>
-            <div className="w-full h-px bg-[#3D425C]"></div>
+            <AppearanceHr className="w-full" />
           </div>
 
           <div className="space-y-2 2xl:pr-4 xl:pr-2">
diff --git a/src/components/Main/Decreasing.tsx b/src/components/Main/Decreasing.tsx
index f65de03..6e3ff1c 100644
--- a/src/components/Main/Decreasing.tsx
+++ b/src/components/Main/Decreasing.tsx
@@ -3,21 +3,12 @@ import { Title } from '../../ui/Title';
 
 export function Decreasing() {
   return (
-    <div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
-      <Title className="tablet:block mobile:max-tablet:hidden">
-        <span
-          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-          style={{
-            backgroundClip: 'text',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-          }}
-        >
-          Достигайте положительный эффект
-        </span>
+    <div className="lg:py-[70px] mobile:py-14 lg:px-10 sm:px-6 mobile:px-4">
+      <Title className="sm:block mobile:max-sm:hidden">
+        <span className="text-gradient">Достигайте положительный эффект</span>
         <br /> за счет снижения издержек
       </Title>
-      <Title className="tablet:hidden">
+      <Title className="sm:hidden">
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
           style={{
@@ -31,8 +22,8 @@ export function Decreasing() {
         сократить затраты на обучение, повысить безопасность и
         производительность
       </Title>
-      <div className="flex tablet-figma:flex-row mobile:max-tablet-figma:flex-col justify-normal desktop-figma:gap-x-[10vw] tablet-figma:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between tablet:items-end xl:pl-64 desktop-figma:mt-[77px] desktop:mt-14 mobile:mt-6">
-        <ul className="xl:max-w-[47vw] w-full tablet:min-w-[318px] mobile:mb-6">
+      <div className="flex tablet-figma:flex-row mobile:max-tablet-figma:flex-col justify-normal desktop-figma:gap-x-[10vw] tablet-figma:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between sm:items-end xl:pl-64 desktop-figma:mt-[77px] lg:mt-14 mobile:mt-6">
+        <ul className="xl:max-w-[47vw] w-full sm:min-w-[318px] mobile:mb-6">
           <AppearanceHr />
           <li className="flex justify-between py-5 gap-x-4">
             <Plus text="снижение количества несчастных случаев" />
diff --git a/src/components/Main/Distance.tsx b/src/components/Main/Distance.tsx
index ac3ac6f..9231cd5 100644
--- a/src/components/Main/Distance.tsx
+++ b/src/components/Main/Distance.tsx
@@ -2,24 +2,15 @@ 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">
-      <Title className="desktop-figma:mb-[77px] desktop:mb-14 tablet:mb-6 mobile:mb-4">
+    <div className="lg:py-[70px] lg:px-10 mobile:py-14 sm:px-6 mobile:px-4">
+      <Title className="desktop-figma:mb-[77px] lg:mb-14 sm:mb-6 mobile:mb-4">
         Платформа GRAFF.training поволяет осуществлять{' '}
-        <span
-          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-          style={{
-            backgroundClip: 'text',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-          }}
-        >
-          дистанционное обучение
-        </span>{' '}
-        с любого устройства
+        <span className="text-gradient">дистанционное обучение</span> с любого
+        устройства
       </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="text-[#ffffff] row-start-1 mobile:max-tablet:mb-6 l-text">
+        <div className="sm:grid lg:gap-x-4 lg:gap-y-6 sm:gap-x-3 sm:gap-y-4 lg:grid-cols-2 tablet-figma:max-[956px]:grid-cols-[446px_1fr]">
+          <p className="text-[#ffffff] row-start-1 mobile:max-sm:mb-6 l-text">
             Обучающиеся будут получать доступ к системе с высоко
             детализированной 3D графикой для прохождения сценариев на любом
             устройстве, без необходимости установки дополнительного ПО.
@@ -27,7 +18,7 @@ export function Distance() {
           <img
             src="src/assets/datamining_2.png"
             alt=""
-            className="row-start-2 mobile:max-tablet:mb-4 w-full"
+            className="row-start-2 mobile:max-sm:mb-4 w-full"
           />
           <img
             src="src/assets/datamining_1.png"
diff --git a/src/components/Main/Efficiency.tsx b/src/components/Main/Efficiency.tsx
index f47ab37..0003571 100644
--- a/src/components/Main/Efficiency.tsx
+++ b/src/components/Main/Efficiency.tsx
@@ -5,12 +5,12 @@ import AppearanceHr from '../../ui/AppearanceHr';
 
 export function Effeciency() {
   return (
-    <div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
-      <AppearanceHr className="mobile:max-tablet:hidden" />
-      <div className="flex mobile:max-desktop:flex-col pt-5 tablet:max-desktop:gap-4">
+    <div className="lg:py-[70px] mobile:py-14 lg:px-10 sm:px-6 mobile:px-4">
+      <AppearanceHr className="mobile:max-sm:hidden" />
+      <div className="flex mobile:max-lg:flex-col pt-5 sm:max-lg:gap-4">
         <MiniTitle text={'экономическая эффективность'} />
-        <div className="mobile:max-tablet:mt-4">
-          <div className="flex mobile:max-tablet:flex-col desktop:max-desktop-figma:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5">
+        <div className="mobile:max-sm:mt-4">
+          <div className="flex mobile:max-sm:flex-col lg:max-desktop-figma:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch gap-x-4 gap-y-2 mobile:max-sm:py-5 sm:pb-5">
             <Figure
               percents={50}
               title={'сокращение бюджета на обучение сотрудников'}
@@ -78,8 +78,8 @@ function Figure({
       transition={{ duration: 0.075 }}
       className="bg-[url(src/assets/left_variance_figure.svg)] hover:bg-[url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:hover:bg-[url(src/assets/right_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:bg-[url(src/assets/right_variance_figure.svg)] flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[position:bottom_right_24px,bottom_right] h-[262px]"
     >
-      <div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-tablet:max-w-[50vw]">
-        <h6 className="desktop:font-medium l-text desktop-figma:max-w-[70%]">
+      <div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-sm:max-w-[50vw]">
+        <h6 className="lg:font-medium l-text desktop-figma:max-w-[70%]">
           {title}
         </h6>
         <h1 className="font-medium flex items-center tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
diff --git a/src/components/Main/Events.tsx b/src/components/Main/Events.tsx
index 13428b3..09744c4 100644
--- a/src/components/Main/Events.tsx
+++ b/src/components/Main/Events.tsx
@@ -8,20 +8,20 @@ import { AnimatePresence } from 'framer-motion';
 export function Events() {
   return (
     <div
-      className="desktop:py-[70px] desktop:px-10 tablet:py-14 tablet:px-6 mobile:px-4"
+      className="lg:py-[70px] lg:px-10 sm:py-14 sm:px-6 mobile:px-4"
       id="events"
     >
-      <AppearanceHr className="mobile:max-desktop:hidden" />
-      <div className="flex mobile:max-desktop:flex-col pt-5 gap-x-4 w-full">
-        <MiniTitle text="события" className="mobile:max-tablet:mb-2" />
-        <div className="desktop:max-desktop-figma:min-w-[clamp(688px,688px+(100vw-1024px)/576*425,1133px)] desktop-figma:min-w-[70.9vw]">
-          <AppearanceHr className="tablet:hidden" />
-          <div className="desktop:py-7 tablet:max-desktop:py-6 mobile:max-tablet:py-5 flex justify-between mobile:max-tablet:flex-col items-start gap-x-4">
+      <AppearanceHr className="mobile:max-lg:hidden" />
+      <div className="flex mobile:max-lg:flex-col pt-5 gap-x-4 w-full">
+        <MiniTitle text="события" className="mobile:max-sm:mb-2" />
+        <div className="lg:max-desktop-figma:min-w-[clamp(688px,688px+(100vw-1024px)/576*425,1133px)] desktop-figma:min-w-[70.9vw]">
+          <AppearanceHr className="sm:hidden" />
+          <div className="lg:py-7 sm:max-lg:py-6 mobile:max-sm:py-5 flex justify-between mobile:max-sm:flex-col items-start gap-x-4">
             <div className="w-fit">
-              <EventTitle className="tablet:mb-8 w-fit">
+              <EventTitle className="sm:mb-8 w-fit">
                 Макет кабины машиниста «Иволга» на выставке ВДНХ
               </EventTitle>
-              <div className="flex items-start gap-2 mobile:max-tablet:mt-5 w-fit">
+              <div className="flex items-start gap-2 mobile:max-sm:mt-5 w-fit">
                 <img
                   src="src/assets/ivolga.png"
                   className="rounded-2xl w-[calc(584/1133*100%)]"
@@ -37,12 +37,12 @@ export function Events() {
             <LinkButton href="/" />
           </div>
           <AppearanceHr />
-          <div className="py-7 flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-x-4">
+          <div className="py-7 flex mobile:max-sm:flex-col sm:items-center justify-between gap-x-4">
             <EventTitle>Победа на BuildUP 2023 в номинации IT</EventTitle>
             <LinkButton href="/" />
           </div>
           <AppearanceHr />
-          <div className="py-7 flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-x-4">
+          <div className="py-7 flex mobile:max-sm:flex-col sm:items-center justify-between gap-x-4">
             <EventTitle>
               Транспортное и специальное тренажеростроение — 2023
             </EventTitle>
@@ -73,7 +73,7 @@ function LinkButton({ href }: { href: string }) {
       <Link
         to={href}
         ref={ref}
-        className="text-[#ffffff] text-nowrap opacity-60 uppercase flex items-center w-fit desktop:min-w-[min(133px,fit)] gap-x-2 tablet:max-desktop:min-w-[140px] mobile:max-tablet:self-end link mobile:max-tablet:mt-4"
+        className="text-[#ffffff] text-nowrap opacity-60 uppercase flex items-center w-fit lg:min-w-[min(133px,fit)] gap-x-2 sm:max-lg:min-w-[140px] mobile:max-sm:self-end link mobile:max-sm:mt-4"
       >
         как это было <img src="src/assets/arrow_insert.svg" alt="" />
       </Link>
diff --git a/src/components/Main/Marquee.tsx b/src/components/Main/Marquee.tsx
index 208b222..fcea4f4 100644
--- a/src/components/Main/Marquee.tsx
+++ b/src/components/Main/Marquee.tsx
@@ -1,9 +1,9 @@
 export function Marquee() {
   return (
-    <div className="flex flex-nowrap w-full overflow-hidden desktop:max-h-[100px] tablet:max-h-[82px] mobile:max-h-20">
-      <div className="flex absolute z-40 right-0 mobile:max-tablet:hidden">
-        <div className="w-0 h-0 desktop:border-b-[100px] desktop:border-l-[100px] tablet:border-b-[82px] tablet:border-l-[82px] border-[transparent_transparent_#D0D6DF_transparent]" />
-        <div className="desktop:w-[260px] tablet:w-[216px] bg-[#D0D6DF]" />
+    <div className="flex flex-nowrap w-full overflow-hidden lg:max-h-[100px] sm:max-h-[82px] mobile:max-h-20">
+      <div className="flex absolute z-40 right-0 mobile:max-sm:hidden">
+        <div className="w-0 h-0 lg:border-b-[100px] lg:border-l-[100px] sm:border-b-[82px] sm:border-l-[82px] border-[transparent_transparent_#D0D6DF_transparent]" />
+        <div className="lg:w-[260px] sm:w-[216px] bg-[#D0D6DF]" />
       </div>
       <MarqueeHalf />
       <MarqueeHalf />
@@ -38,7 +38,7 @@ function MarqueeHalf() {
 
 function MarqueeItem({ src }: { src: string }) {
   return (
-    <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border-l border-y border-[#3D425C] desktop:first:py-[30px]">
+    <div className="lg:min-w-[212px] sm:min-w-[180px] mobile:min-w-[170px] flex border-l border-y border-[#3D425C] lg:first:py-[30px]">
       <img src={src} className="m-auto" alt="" />
     </div>
   );
diff --git a/src/components/Main/ProductTabs/ForTeachingTab.tsx b/src/components/Main/ProductTabs/ForTeachingTab.tsx
index 22a1610..fa0873a 100644
--- a/src/components/Main/ProductTabs/ForTeachingTab.tsx
+++ b/src/components/Main/ProductTabs/ForTeachingTab.tsx
@@ -1,65 +1,61 @@
 export function ForTeachingTab() {
   return (
-    <div className="desktop:bg-[url('src/assets/mask_group2.png')] desktop:aspect-[1520/546] tablet:max-desktop:aspect-[720/460] w-full desktop:h-[max(534px,34vw)] tablet-figma:max-desktop:h-[min(460px,60vw)] tablet:max-tablet-figma:h-[max(460px,60vw)] mobile:max-tablet:min-h-[746pxsdf] bg-[#3D425C4D] bg-no-repeat desktop:p-10 tablet:p-7 mobile:p-5 rounded-xl 2xl:bg-contain bg-right desktop:max-2xl:bg-[length:50%]">
-      <div className='tablet:max-desktop:bg-[url("src/assets/mask_group2.png")] bg-no-repeat bg-right bg-[length:50%] tablet:max-desktop:pb-[55px] mobile:max-desktop:border-b border-[#3D425C] tablet:mb-8 mobile:mb-4'>
-        <h3 className="text-[#ffffff] font-medium desktop:max-w-[455px] tablet:max-w-[326px] mobile:max-tablet:mb-0 h3">
+    <div className="lg:bg-[url('src/assets/mask_group2.png')] lg:aspect-[1520/546] sm:max-lg:aspect-[720/460] w-full lg:h-[max(534px,34vw)] tablet-figma:max-lg:h-[min(460px,60vw)] sm:max-tablet-figma:h-[max(460px,60vw)] mobile:max-sm:min-h-[746pxsdf] bg-[#3D425C4D] bg-no-repeat lg:p-10 sm:p-7 mobile:p-5 rounded-xl 2xl:bg-contain bg-right lg:max-2xl:bg-[length:50%]">
+      <div className='sm:max-lg:bg-[url("src/assets/mask_group2.png")] bg-no-repeat bg-right bg-[length:50%] sm:max-lg:pb-[55px] mobile:max-lg:border-b border-[#3D425C] sm:mb-8 mobile:mb-4'>
+        <h3 className="text-[#ffffff] font-medium lg:max-w-[455px] sm:max-w-[326px] mobile:max-sm:mb-0 h3">
           Интерактивные тренажеры для учебных заведений
         </h3>
-        <img
-          src="src/assets/mask_group2.png"
-          className="tablet:hidden"
-          alt=""
-        />
+        <img src="src/assets/mask_group2.png" className="sm:hidden" alt="" />
       </div>
-      <div className="flex desktop:flex-col mobile:max-tablet:flex-col desktop:gap-y-6 mobile:gap-y-4 desktop:mb-12 tablet:max-desktop:mb-8 mobile:max-tablet:mb-4 tablet:max-desktop:border-b border-[#3D425C] tablet:max-desktop:pb-8">
-        <div className="flex gap-x-7 items-start desktop:max-w-[437px] tablet:w-fit tablet:max-desktop:pr-3 mobile:max-tablet:pb-4 mobile:max-tablet:border-b border-[#3D425C]">
+      <div className="flex lg:flex-col mobile:max-sm:flex-col lg:gap-y-6 mobile:gap-y-4 lg:mb-12 sm:max-lg:mb-8 mobile:max-sm:mb-4 sm:max-lg:border-b border-[#3D425C] sm:max-lg:pb-8">
+        <div className="flex gap-x-7 items-start lg:max-w-[437px] sm:w-fit sm:max-lg:pr-3 mobile:max-sm:pb-4 mobile:max-sm:border-b border-[#3D425C]">
           <img
             src="src/assets/service_icon.svg"
-            className="mobile:max-desktop:hidden"
+            className="mobile:max-lg:hidden"
             alt=""
           />
-          <div className="desktop:pl-4 tablet:pl-[13px] tablet:border-l border-[#3D425C]">
-            <div className="flex mobile:max-tablet:items-center tablet:items-start tablet:max-desktop:flex-col gap-x-2 mb-2">
+          <div className="lg:pl-4 sm:pl-[13px] sm:border-l border-[#3D425C]">
+            <div className="flex mobile:max-sm:items-center sm:items-start sm:max-lg:flex-col gap-x-2 mb-2">
               <img
                 src="src/assets/service_icon.svg"
-                className="desktop:hidden"
+                className="lg:hidden"
                 alt=""
               />
               <h4 className="text-[#ffffff] font-medium l-text">
                 cоздание обучающих VR систем
               </h4>
             </div>
-            <p className="text-[#ffffff] opacity-60 desktop:font-medium m-text">
+            <p className="text-[#ffffff] opacity-60 lg:font-medium m-text">
               Проведение виртуальных практических работ, создание учебных
               мастерских и стендов
             </p>
           </div>
         </div>
-        <div className="flex gap-x-7 items-start desktop:max-w-[437px] tablet:w-fit tablet:max-desktop:pr-3 mobile:max-tablet:pb-4 mobile:max-tablet:border-b border-[#3D425C]">
+        <div className="flex gap-x-7 items-start lg:max-w-[437px] sm:w-fit sm:max-lg:pr-3 mobile:max-sm:pb-4 mobile:max-sm:border-b border-[#3D425C]">
           <img
             src="src/assets/service_icon.svg"
-            className="mobile:max-desktop:hidden"
+            className="mobile:max-lg:hidden"
             alt=""
           />
-          <div className="desktop:pl-4 tablet:pl-[13px] tablet:border-l border-[#3D425C]">
-            <div className="flex mobile:max-tablet:items-center tablet:items-start tablet:max-desktop:flex-col gap-x-2 mb-2">
+          <div className="lg:pl-4 sm:pl-[13px] sm:border-l border-[#3D425C]">
+            <div className="flex mobile:max-sm:items-center sm:items-start sm:max-lg:flex-col gap-x-2 mb-2">
               <img
                 src="src/assets/service_icon.svg"
-                className="desktop:hidden"
+                className="lg:hidden"
                 alt=""
               />
               <h4 className="text-[#ffffff] font-medium l-text">
                 cоздание VR лабораторий
               </h4>
             </div>
-            <p className="text-[#ffffff] opacity-60 desktop:font-medium m-text">
+            <p className="text-[#ffffff] opacity-60 lg:font-medium m-text">
               Тренажер для проведения лабораториных работ позволит избежать
               поломки оборудования, а также экономить на расходных средствах
             </p>
           </div>
         </div>
       </div>
-      <h4 className="text-[#ffffff] font-medium desktop:max-w-[408px] l-text">
+      <h4 className="text-[#ffffff] font-medium lg:max-w-[408px] l-text">
         Оснащение учебных классов и центров всем необходимым для современного
         обучения под «ключ»
       </h4>
diff --git a/src/components/Main/ProductTabs/SimulatorsTab.tsx b/src/components/Main/ProductTabs/SimulatorsTab.tsx
index d8f25a7..5099dc1 100644
--- a/src/components/Main/ProductTabs/SimulatorsTab.tsx
+++ b/src/components/Main/ProductTabs/SimulatorsTab.tsx
@@ -49,14 +49,14 @@ export function SimulatorsTab() {
   });
 
   return (
-    <div className="bg-[#3D425C4D] rounded-xl flex desktop:aspect-[1520/546] tablet:max-desktop:aspect-[720/460] mobile:max-tablet:min-h-[746psfgx] w-full desktop:h-[max(534px,34vw)] tablet-figma:max-desktop:h-[min(460px,60vw)] tablet:max-tablet-figma:h-[max(460px,60vw)] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 select-none mobile:max-tablet:overflow-hidden">
-      <div className="flex tablet:justify-between w-full h-full mobile:max-tablet:flex-col mobile:max-tablet:justify-between items-center gap-x-2">
-        <div className="desktop:max-w-[539px] tablet:max-w-[50vw] self-start flex flex-col tablet:max-desktop:justify-between tablet:max-desktop:h-full">
+    <div className="bg-[#3D425C4D] rounded-xl flex lg:aspect-[1520/546] sm:max-lg:aspect-[720/460] mobile:max-sm:min-h-[746psfgx] w-full lg:h-[max(534px,34vw)] tablet-figma:max-lg:h-[min(460px,60vw)] sm:max-tablet-figma:h-[max(460px,60vw)] lg:p-10 sm:max-lg:p-7 mobile:max-sm:p-5 select-none mobile:max-sm:overflow-hidden">
+      <div className="flex sm:justify-between w-full h-full mobile:max-sm:flex-col mobile:max-sm:justify-between items-center gap-x-2">
+        <div className="lg:max-w-[539px] sm:max-w-[50vw] self-start flex flex-col sm:max-lg:justify-between sm:max-lg:h-full">
           <div className="flex flex-col">
-            <h3 className="tablet:max-desktop:max-w-[455px] text-[#ffffff] font-medium h3 desktop:mb-8 tablet:mb-6 mobile:mb-5">
+            <h3 className="sm:max-lg:max-w-[455px] text-[#ffffff] font-medium h3 lg:mb-8 sm:mb-6 mobile:mb-5">
               Интерактивные симуляторы управления техникой
             </h3>
-            <ul className="flex flex-wrap mobile:max-tablet:grid desktop:gap-2 mobile:max-desktop:gap-1 desktop:mb-12 mobile:max-tablet:mb-5 tablet:max-desktop:max-w-[325px]">
+            <ul className="flex flex-wrap mobile:max-sm:grid lg:gap-2 mobile:max-lg:gap-1 lg:mb-12 mobile:max-sm:mb-5 sm:max-lg:max-w-[325px]">
               <SimulatorsItem text="авиационные симуляторы" />
               <SimulatorsItem text="погрузчики – ричстракеры" />
               <SimulatorsItem text="тяговые составы железной дороги" />
@@ -65,22 +65,22 @@ export function SimulatorsTab() {
               <SimulatorsItem text="горные самосвалы и экскаваторы" />
             </ul>
           </div>
-          <div className="tablet:max-desktop:max-w-[455px]">
-            <h4 className="text-[#ffffff] font-medium l-text desktop:mb-2 mobile:max-tablet:mb-3">
+          <div className="sm:max-lg:max-w-[455px]">
+            <h4 className="text-[#ffffff] font-medium l-text lg:mb-2 mobile:max-sm:mb-3">
               В основу симуляторов заложена математическая модель, полностью
               соответствующая работе настоящего оборудования
             </h4>
-            <p className="tablet:max-desktop:hidden text-[#ffffff] mb-5 opacity-60 m-text">
+            <p className="sm:max-lg:hidden text-[#ffffff] mb-5 opacity-60 m-text">
               модель позволяет производить расчеты характеристик работы,
               отслеживать безопасность работы устройств и симулировать
               внештатные ситуации.
             </p>
           </div>
         </div>
-        <div className="self-center tablet:max-desktop:max-w-[234px]">
+        <div className="self-center sm:max-lg:max-w-[234px]">
           <div {...handlers}>
             <div
-              className="flex h-full desktop:justify-end select-none mobile:max-tablet:relative xl:max-desktop-figma:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] desktop-figma:max-w-[calc((100vw-256px)*0.53)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10 mobile:max-tablet:duration-1000"
+              className="flex h-full lg:justify-end select-none mobile:max-sm:relative xl:max-desktop-figma:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] desktop-figma:max-w-[calc((100vw-256px)*0.53)] lg:max-xl:max-w-[300px] sm:max-lg:flex-col sm:flex-wrap gap-2 sm:max-lg:mb-10 mobile:max-sm:duration-1000"
               style={
                 width < 640
                   ? {
@@ -113,17 +113,17 @@ export function SimulatorsTab() {
                 <>
                   <img
                     src="src/assets/train.png"
-                    className="rounded-lg xl:max-desktop-figma:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] desktop-figma:w-[calc((100vw-256px)*0.145)] tablet:max-xl:hidden"
+                    className="rounded-lg xl:max-desktop-figma:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] desktop-figma:w-[calc((100vw-256px)*0.145)] sm:max-xl:hidden"
                     alt=""
                   />
                   <img
                     src="src/assets/dispatcher.png"
-                    className="xl:max-desktop-figma:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] desktop-figma:w-[calc((100vw-256px)*0.145)] tablet:max-xl:hidden"
+                    className="xl:max-desktop-figma:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] desktop-figma:w-[calc((100vw-256px)*0.145)] sm:max-xl:hidden"
                     alt=""
                   />
                   <img
                     src="src/assets/winda.png"
-                    className="xl:max-desktop-figma:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] desktop-figma:w-[calc((100vw-256px)*0.145)] tablet:max-xl:hidden"
+                    className="xl:max-desktop-figma:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] desktop-figma:w-[calc((100vw-256px)*0.145)] sm:max-xl:hidden"
                     alt=""
                   />
                   <img
@@ -140,7 +140,7 @@ export function SimulatorsTab() {
               )}
             </div>
           </div>
-          <p className="desktop:hidden mobile:max-tablet:hidden text-[#ffffff] opacity-60 m-text">
+          <p className="lg:hidden mobile:max-sm:hidden text-[#ffffff] opacity-60 m-text">
             модель позволяет производить расчеты характеристик работы,
             отслеживать безопасность работы устройств и симулировать внештатные
             ситуации.
@@ -153,7 +153,7 @@ export function SimulatorsTab() {
 
 function SimulatorsItem({ text }: { text: string }) {
   return (
-    <li className="text-[#ffffff] l-text bg-[#3D425C4D] rounded-[44px] w-fit desktop:px-5 desktop:py-2 mobile:px-4 mobile:py-[6px]">
+    <li className="text-[#ffffff] l-text bg-[#3D425C4D] rounded-[44px] w-fit lg:px-5 lg:py-2 mobile:px-4 mobile:py-[6px]">
       {text}
     </li>
   );
diff --git a/src/components/Main/ProductTabs/TrainingsTab.tsx b/src/components/Main/ProductTabs/TrainingsTab.tsx
index 21e3942..4c2693e 100644
--- a/src/components/Main/ProductTabs/TrainingsTab.tsx
+++ b/src/components/Main/ProductTabs/TrainingsTab.tsx
@@ -1,20 +1,20 @@
 export function TrainingsTab() {
   return (
-    <div className="bg-[#3D425C4D] rounded-xl desktop:aspect-[1520/546] tablet:aspect-[720/460] desktop:h-[max(534px,34vw)] tablet-figma:max-desktop:h-[min(460px,60vw)] tablet:max-tablet-figma:h-[max(460px,60vw)] mobile:max-tablet: w-full desktop:bg-[url('src/assets/mask_group.png')] desktop-figma:bg-[length:70%] bg-right-bottom desktop:bg-[length:55%] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat">
-      <div className="desktop:max-w-[max(455px,28vw)]">
-        <div className="tablet:max-desktop:border-b border-[#3D425C] tablet:max-desktop:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom tablet:max-tablet-figma:bg-[length:40%]">
-          <div className="tablet:max-desktop:max-w-[51vw] mobile:max-tablet:border-b border-[#3D425C]">
-            <h3 className="text-[#ffffff] font-medium desktop:mb-8 tablet:max-desktop:mb-28 h3">
+    <div className="bg-[#3D425C4D] rounded-xl lg:aspect-[1520/546] sm:aspect-[720/460] lg:h-[max(534px,34vw)] tablet-figma:max-lg:h-[min(460px,60vw)] sm:max-tablet-figma:h-[max(460px,60vw)] mobile:max-sm: w-full lg:bg-[url('src/assets/mask_group.png')] desktop-figma:bg-[length:70%] bg-right-bottom lg:bg-[length:55%] lg:p-10 sm:max-lg:p-7 mobile:max-sm:p-5 bg-no-repeat">
+      <div className="lg:max-w-[max(455px,28vw)]">
+        <div className="sm:max-lg:border-b border-[#3D425C] sm:max-lg:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom sm:max-tablet-figma:bg-[length:40%]">
+          <div className="sm:max-lg:max-w-[51vw] mobile:max-sm:border-b border-[#3D425C]">
+            <h3 className="text-[#ffffff] font-medium lg:mb-8 sm:max-lg:mb-28 h3">
               Промышленные тренажеры виртуальной реальности
             </h3>
             <img
               src="src/assets/mask_group_big.svg"
-              className="tablet:hidden mt-4 object-cover w-full"
+              className="sm:hidden mt-4 object-cover w-full"
               alt=""
             />
           </div>
         </div>
-        <div className="desktop:flex mobile:max-tablet:flex desktop:flex-col tablet:grid grid-cols-3 desktop:gap-y-6 tablet:max-desktop:mt-8 mobile:max-tablet:mt-4 h-full mobile:max-tablet:flex-col mobile:max-tablet:gap-y-4 tablet:max-desktop:gap-x-3">
+        <div className="lg:flex mobile:max-sm:flex lg:flex-col sm:grid grid-cols-3 lg:gap-y-6 sm:max-lg:mt-8 mobile:max-sm:mt-4 h-full mobile:max-sm:flex-col mobile:max-sm:gap-y-4 sm:max-lg:gap-x-3">
           <TeachingItem
             iconType="danger"
             text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
@@ -46,18 +46,18 @@ function TeachingItem({
   iconType: 'danger' | 'service' | 'safety';
 }) {
   return (
-    <div className="desktop:border-l-0 tablet:border-l mobile:max-tablet:first:border-t-0 mobile:max-tablet:border-t border-[#3D425C] desktop:flex desktop:items-start desktop:gap-x-7 tablet:max-desktop:pl-3 mobile:max-tablet:first:pt-0 mobile:max-tablet:pt-4">
+    <div className="lg:border-l-0 sm:border-l mobile:max-sm:first:border-t-0 mobile:max-sm:border-t border-[#3D425C] lg:flex lg:items-start lg:gap-x-7 sm:max-lg:pl-3 mobile:max-sm:first:pt-0 mobile:max-sm:pt-4">
       <img
         src={`src/assets/${iconType}_icon.svg`}
         alt=""
-        className="mobile:max-tablet:hidden tablet:max-desktop:mb-[14px]"
+        className="mobile:max-sm:hidden sm:max-lg:mb-[14px]"
       />
-      <div className="desktop:border-l border-[#3D425C] desktop:pl-4">
+      <div className="lg:border-l border-[#3D425C] lg:pl-4">
         <h4 className="text-[#ffffff] flex items-center gap-x-2 font-medium l-text mb-2">
           <img
             src={`src/assets/${iconType}_icon.svg`}
             alt=""
-            className="tablet:hidden"
+            className="sm:hidden"
           />
           {title}
         </h4>
diff --git a/src/components/Main/Products.tsx b/src/components/Main/Products.tsx
index 78a8c8e..bd877e3 100644
--- a/src/components/Main/Products.tsx
+++ b/src/components/Main/Products.tsx
@@ -25,17 +25,17 @@ export function Products() {
   return (
     <div
       id="products"
-      className="desktop:py-[70px] tablet:max-desktop:pt-14 tablet:max-desktop:pb-8 mobile:max-tablet:py-14 desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4"
+      className="lg:py-[70px] sm:max-lg:pt-14 sm:max-lg:pb-8 mobile:max-sm:py-14 lg:px-10 sm:max-lg:px-6 mobile:max-sm:px-4"
     >
-      <Title className="desktop-figma:mb-[77px] mb-14 desktop:block mobile:hidden">
+      <Title className="desktop-figma:mb-[77px] mb-14 lg:block mobile:hidden">
         Процесс обучения сотрудников станет безопасней и эффективней с
         <span className="text-gradient"> продуктами GRAFF.training</span>
       </Title>
       <div className="">
-        <MiniTitle className="desktop:hidden" text="Продукты" />
+        <MiniTitle className="lg:hidden" text="Продукты" />
         <div
           className={
-            'flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar-none rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto tablet:max-desktop:mt-[13px] mobile:mt-6' +
+            'flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar-none rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto sm:max-lg:mt-[13px] mobile:mt-6' +
             (curTab !== 2
               ? ' mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]'
               : '')
diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx
index d1770d7..cd08403 100644
--- a/src/components/Main/Projects.tsx
+++ b/src/components/Main/Projects.tsx
@@ -8,20 +8,11 @@ export function Projects() {
   return (
     <div
       id="projects"
-      className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-5 overflow-hidden select-none"
+      className="lg:py-[70px] lg:px-10 mobile:py-14 sm:px-6 mobile:px-5 overflow-hidden select-none"
     >
-      <Title className="desktop-figma:mb-[77px] desktop:mb-14 mobile:mb-6">
-        <span
-          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-          style={{
-            backgroundClip: 'text',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-          }}
-        >
-          Большой опыт в работе
-        </span>{' '}
-        с промышленными предприятиями и учебными заведениями
+      <Title className="desktop-figma:mb-[77px] lg:mb-14 mobile:mb-6">
+        <span className="text-gradient">Большой опыт в работе</span> с
+        промышленными предприятиями и учебными заведениями
       </Title>
       <MiniTitle text="реализованные проекты" />
       <Slider
@@ -57,7 +48,7 @@ function Project({
   tags: string[];
 }) {
   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 desktop:translate-x-[264px] pointer-events-none">
+    <div className="bg-[#3D425C] bg-opacity-50 rounded-2xl box-border lg:min-w-[624px] sm:min-w-[520px] mobile:min-w-[328px] duration-1000 lg:translate-x-[264px] pointer-events-none">
       <div
         className="bg-cover bg-center bg-no-repeat h-[340px] rounded-2xl"
         style={{ backgroundImage: `url(${src})` }}
@@ -126,7 +117,7 @@ function Slider({
   }, [order, baseOffset, slide]);
 
   return (
-    <div className="flex flex-col desktop:mt-4 tablet:mt-3 mobile:mt-2">
+    <div className="flex flex-col lg:mt-4 sm:mt-3 mobile:mt-2">
       <div className="" {...handlers}>
         <div
           className="flex gap-2 overflow-visible relative mb-[18px] -mr-10 select-none"
@@ -140,13 +131,13 @@ function Slider({
           ))}
         </div>
       </div>
-      <div className="flex items-center gap-4 desktop:max-desktop-figma:w-[clamp(720px,100vw-465px,1135px)] desktop-figma:w-[70.9vw] mobile:w-full self-start desktop:ml-64">
+      <div className="flex items-center gap-4 lg:max-desktop-figma:w-[clamp(720px,100vw-465px,1135px)] desktop-figma:w-[70.9vw] mobile:w-full self-start lg:ml-64">
         <button
           onClick={() => {
             setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
             dispatch('prev');
           }}
-          className="mobile:max-tablet:hidden"
+          className="mobile:max-sm:hidden"
         >
           <img src="src/assets/left_slide.svg" alt="" />
         </button>
@@ -161,7 +152,7 @@ function Slider({
             setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
             dispatch('next');
           }}
-          className="mobile:max-tablet:hidden"
+          className="mobile:max-sm:hidden"
         >
           <img src="src/assets/right_slide.svg" alt="" />
         </button>
diff --git a/src/components/Main/Teaching.tsx b/src/components/Main/Teaching.tsx
index 01be0f3..561673f 100644
--- a/src/components/Main/Teaching.tsx
+++ b/src/components/Main/Teaching.tsx
@@ -3,23 +3,14 @@ import { Title } from '../../ui/Title';
 
 export function Teaching() {
   return (
-    <div className="desktop:py-[70px] desktop:mb-[60px] desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 mobile:max-desktop:py-14 desktop:flex gap-x-4">
-      <Title className="mobile:max-desktop:hidden desktop-figma:mb-[38px] mb-8 desktop:sticky top-14 h-fit max-w-[45vw]">
-        <span
-          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-          style={{
-            backgroundClip: 'text',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-          }}
-        >
-          Тренинг модуль
-        </span>
-        <br className="mobile:max-desktop:hidden" />
-        <span className="desktop:hidden">&nbsp;</span>помогает осуществлять
+    <div className="lg:py-[70px] lg:mb-[60px] lg:px-10 sm:max-lg:px-6 mobile:max-sm:px-4 mobile:max-lg:py-14 lg:flex gap-x-4">
+      <Title className="mobile:max-lg:hidden desktop-figma:mb-[38px] mb-8 lg:sticky top-14 h-fit max-w-[45vw]">
+        <span className="text-gradient">Тренинг модуль</span>
+        <br className="mobile:max-lg:hidden" />
+        <span className="lg:hidden">&nbsp;</span>помогает осуществлять
         координацию между всеми участниками процесса
       </Title>
-      <Title className="desktop-figma:mb-[29px] desktop:hidden mobile:mb-6">
+      <Title className="desktop-figma:mb-[29px] lg:hidden mobile:mb-6">
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
           style={{
@@ -40,8 +31,8 @@ export function Teaching() {
 
 function TeachingFeaturesForDesktop() {
   return (
-    <div className="mobile:max-desktop:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
-      <div className="p-10 bg-[#3D425C4D] flex flex-col pr-20 rounded-2xl desktop:min-h-[400px] bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-[right_bottom] bg-[length:50%] desktop:max-desktop-figma:min-w-[clamp(614px,614px+(100vw-1024px)/576*266,880px)] desktop-figma:min-w-[55vw]">
+    <div className="mobile:max-lg:hidden lg:flex-col gap-y-4 flex-wrap lg:flex">
+      <div className="p-10 bg-[#3D425C4D] flex flex-col pr-20 rounded-2xl lg:min-h-[400px] bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-[right_bottom] bg-[length:50%] lg:max-desktop-figma:min-w-[clamp(614px,614px+(100vw-1024px)/576*266,880px)] desktop-figma:min-w-[55vw]">
         <div className="mb-[85px] max-w-[380px]">
           <TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
           <TeachingFeatureDescription className="max-w-[361px]">
@@ -57,7 +48,7 @@ function TeachingFeaturesForDesktop() {
         />
       </div>
 
-      <div className="p-10 bg-[#3D425C4D] rounded-2xl desktop:flex min-h-[400px]">
+      <div className="p-10 bg-[#3D425C4D] rounded-2xl lg:flex min-h-[400px]">
         <div className="w-fit">
           <TeachingFeatureTitle className="w-fit">
             Управление пользователями
@@ -89,7 +80,7 @@ function TeachingFeaturesForDesktop() {
         />
       </div>
 
-      <div className="p-10 bg-[#3D425C4D] rounded-2xl desktop:flex min-h-[400px] flex">
+      <div className="p-10 bg-[#3D425C4D] rounded-2xl lg:flex min-h-[400px] flex">
         <div className="max-w-[351px]">
           <TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
           <TeachingFeatureDescription>
@@ -117,23 +108,23 @@ function TeachingFeaturesForDesktop() {
 
 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] 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">
+    <div className="mobile:max-sm:flex mobile:max-sm:flex-col mobile:max-sm:gap-y-2 tablet-figma:max-lg:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 lg:hidden sm:max-tablet-figma:flex sm:max-tablet-figma:flex-col">
+      <div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-sm:flex mobile:max-sm:flex-col">
         <TeachingFeatureTitle>
           Управление
           <br /> пользователями
         </TeachingFeatureTitle>
-        <TeachingFeatureDescription className="tablet:max-desktop:-mb-[18px]">
+        <TeachingFeatureDescription className="sm:max-lg:-mb-[18px]">
           Добавление, удаление и назначение ролей
         </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"
+          className="relative mobile:max-sm:w-[351px] tablet-figma:max-lg:top-7 sm:max-tablet-figma:top-11 mobile:max-sm:top-5 mobile:max-sm:left-[92px] self-end sm:max-tablet-figma:m-auto"
           alt=""
         />
       </div>
 
-      <div className="bg-[#3D425C4D] 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_150px] tablet:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-desktop:bg-[73px_130px] tablet:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
+      <div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-lg:bg-contain mobile:max-sm:bg-contain mobile:max-sm:bg-[140px_150px] sm:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-lg:bg-[73px_130px] sm:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
         <TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
         <TeachingFeatureDescription>
           Назначение сценария обучения
@@ -142,12 +133,12 @@ function TeachingFeaturesForOtherScreens() {
         </TeachingFeatureDescription>
         <img
           src="src/assets/master_card.svg"
-          className="rounded-lg mb-11 h-[92px] mt-[166px] tablet:max-tablet-figma:mx-auto"
+          className="rounded-lg mb-11 h-[92px] mt-[166px] sm:max-tablet-figma:mx-auto"
           alt=""
         />
       </div>
 
-      <div className="bg-[#3D425C4D] 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%_100px] tablet-figma:max-desktop:bg-contain bg-no-repeat tablet-figma:max-desktop:bg-[67px_150px] mobile:max-tablet:bg-[100%_120px] mobile:max-tablet:flex mobile:max-tablet:flex-col row-start-2 row-span-2 col-start-1">
+      <div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] sm:max-tablet-figma:bg-[100%_100px] tablet-figma:max-lg:bg-contain bg-no-repeat tablet-figma:max-lg:bg-[67px_150px] mobile:max-sm:bg-[100%_120px] mobile:max-sm:flex mobile:max-sm:flex-col row-start-2 row-span-2 col-start-1">
         <TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
         <TeachingFeatureDescription>
           Фиксация и хранение сессий обучения, тренировки и тестирования.
@@ -155,27 +146,27 @@ function TeachingFeaturesForOtherScreens() {
         </TeachingFeatureDescription>
         <img
           src="src/assets/manage_video.svg"
-          className="rounded-lg h-[94px] mt-[120px] tablet:max-tablet-figma:mx-auto tablet:max-tablet-figma:mr-[200px] self-end mr-[168px]"
+          className="rounded-lg h-[94px] mt-[120px] sm:max-tablet-figma:mx-auto sm:max-tablet-figma:mr-[200px] self-end mr-[168px]"
           alt=""
         />
       </div>
 
-      <div className="bg-[#3D425C4D] 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">
+      <div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 sm:max-tablet-figma:pb-6 mobile:max-sm:pb-5 overflow-hidden row-start-3 col-start-2">
         <TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
         <TeachingFeatureDescription className="mobile:max-tablet-figma:mb-5">
           Фиксация правильных и неправильных действий. <br />
           Отчет об ошибках
         </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">
+          <div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-lg:overflow-hidden mt-0.5 mobile:max-sm:pl-11 mx-auto">
             <img
               src="src/assets/schedule.svg"
-              className="rounded-lg mobile:max-desktop:w-[166px] tablet:max-desktop:relative z-10"
+              className="rounded-lg mobile:max-lg:w-[166px] sm:max-lg:relative z-10"
               alt=""
             />
             <img
               src="src/assets/stats.svg"
-              className="rounded-lg relative tablet-figma:max-desktop:right-[27px] tablet:max-tablet-figma:right-[31px] mobile:max-desktop:w-[166px] tablet:max-tablet-figma:bottom-[27px] mobile:max-tablet:bottom-[14px] mobile:max-tablet:right-11"
+              className="rounded-lg relative tablet-figma:max-lg:right-[27px] sm:max-tablet-figma:right-[31px] mobile:max-lg:w-[166px] sm:max-tablet-figma:bottom-[27px] mobile:max-sm:bottom-[14px] mobile:max-sm:right-11"
               alt=""
             />
           </div>
diff --git a/src/components/Main/Trainings.tsx b/src/components/Main/Trainings.tsx
index b8fe98d..7857a7f 100644
--- a/src/components/Main/Trainings.tsx
+++ b/src/components/Main/Trainings.tsx
@@ -8,9 +8,9 @@ export function Trainings() {
   return (
     <div
       id="trainings"
-      className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-7 mobile:px-4"
+      className="lg:py-[70px] lg:px-10 mobile:py-14 sm:px-7 mobile:px-4"
     >
-      <Title className="desktop-figma:mb-[77px] desktop:mb-14 mobile:mb-6">
+      <Title className="desktop-figma:mb-[77px] lg:mb-14 mobile:mb-6">
         Предлагаем различные{' '}
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -68,15 +68,15 @@ function TrainingsFeature({
       <AppearanceHr />
       <div
         ref={ref}
-        className="desktop:first:h-[200px] desktop:last:h-[200px] desktop:h-[176px] tablet:flex items-stretch justify-between tablet:py-10 mobile:max-tablet:pt-5"
+        className="lg:first:h-[200px] lg:last:h-[200px] lg:h-[176px] sm:flex items-stretch justify-between sm:py-10 mobile:max-sm:pt-5"
       >
-        <div className="tablet:flex flex-col gap-y-4 mobile:max-tablet:mb-[42px] tablet-figma:w-[43.7%] tablet:max-tablet-figma:min-w-[76%]">
-          <h3 className="font-medium text-[#ffffff] mobile:max-tablet:mb-2 h3">
+        <div className="sm:flex flex-col gap-y-4 mobile:max-sm:mb-[42px] tablet-figma:w-[43.7%] sm:max-tablet-figma:min-w-[76%]">
+          <h3 className="font-medium text-[#ffffff] mobile:max-sm:mb-2 h3">
             {title}
           </h3>
           <p className="text-[#ffffff] opacity-60 l-text">{text}</p>
         </div>
-        <div className="mobile:max-tablet:flex tablet:hidden justify-between items-end">
+        <div className="mobile:max-sm:flex sm:hidden justify-between items-end">
           <p className="text-[#52587A] m-text mb-5">{order}</p>
           <img src={src} alt="" className="w-[50vw]" />
         </div>
@@ -87,7 +87,7 @@ function TrainingsFeature({
             transition={{
               duration: 0.4,
             }}
-            className="-my-10 mobile:max-desktop:hidden flex items-center justify-center "
+            className="-my-10 mobile:max-lg:hidden flex items-center justify-center "
           >
             <img
               src={src}
@@ -100,7 +100,7 @@ function TrainingsFeature({
               alt=""
             />
           </motion.div>
-          <div className="desktop:hidden flex items-center justify-center">
+          <div className="lg:hidden flex items-center justify-center">
             <img
               src={src}
               alt=""
@@ -112,9 +112,9 @@ function TrainingsFeature({
               alt=""
             />
           </div>
-          <p className="text-[#52587A] desktop:font-medium m-text">{order}</p>
+          <p className="text-[#52587A] lg:font-medium m-text">{order}</p>
         </div>
-        <div className="w-[calc(280/768*100%)] mobile:max-tablet:hidden tablet-figma:hidden flex justify-center items-center">
+        <div className="w-[calc(280/768*100%)] mobile:max-sm:hidden tablet-figma:hidden flex justify-center items-center">
           <img src={src} className="relative z-20" alt="" />
           <img
             src="src/assets/vr_backlight.svg"
@@ -122,7 +122,7 @@ function TrainingsFeature({
             alt=""
           />
         </div>
-        <p className="text-[#52587A] desktop:font-medium m-text mobile:max-tablet:hidden tablet-figma:hidden">
+        <p className="text-[#52587A] lg:font-medium m-text mobile:max-sm:hidden tablet-figma:hidden">
           {order}
         </p>
       </div>
diff --git a/src/components/Main/Video.tsx b/src/components/Main/Video.tsx
index 1273cd9..b202059 100644
--- a/src/components/Main/Video.tsx
+++ b/src/components/Main/Video.tsx
@@ -13,18 +13,18 @@ export function Video() {
 
   return (
     <>
-      <div className="flex bg-[url(src/assets/video.png)] desktop:h-[836px] tablet:h-[561px] mobile:h-[400px] bg-cover bg-right bg-no-repeat justify-center">
+      <div className="flex bg-[url(src/assets/video.png)] lg:h-[836px] sm:h-[561px] mobile:h-[400px] bg-cover bg-right bg-no-repeat justify-center">
         <button className="self-center">
           <img
             src="src/assets/play.svg"
-            className="desktop:w-[114px] tablet:w-[94px]"
+            className="lg:w-[114px] sm:w-[94px]"
             alt=""
             onClick={() => setOpen(true)}
           />
         </button>
-        <div className="flex self-end absolute right-0 mobile:max-tablet:hidden">
-          <div className="w-0 h-0 desktop:border-b-[100px] desktop:border-l-[100px] tablet:border-b-[82px] tablet:border-l-[82px] border-[transparent_transparent_#14161F_transparent]" />
-          <div className="desktop:w-[260px] tablet:w-[216px] mobile bg-[#14161F]" />
+        <div className="flex self-end absolute right-0 mobile:max-sm:hidden">
+          <div className="w-0 h-0 lg:border-b-[100px] lg:border-l-[100px] sm:border-b-[82px] sm:border-l-[82px] border-[transparent_transparent_#14161F_transparent]" />
+          <div className="lg:w-[260px] sm:w-[216px] mobile bg-[#14161F]" />
         </div>
       </div>
       {open && (
diff --git a/src/index.css b/src/index.css
index d1d85bf..f6e98b9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,38 +15,38 @@ body {
 
 @layer components {
   .h1 {
-    @apply -tracking-[.02em] leading-[90%] desktop-figma:text-[clamp(96px,6vw,128px)] desktop:max-desktop-figma:text-[clamp(76px,76px+(100vw-1024px)/576*20,96px)] tablet-figma:max-desktop:text-[clamp(64px,64px+(100vw-768px)/256*16,80px)] tablet:max-tablet-figma:text-[clamp(56px,56px+(100vw-640px)/128*8,64px)] mobile:max-tablet:text-[clamp(40px,40px+(100vw-360px)/280*4,44px)];
+    @apply -tracking-[.02em] leading-[90%] desktop-figma:text-[clamp(96px,6vw,128px)] lg:max-desktop-figma:text-[clamp(76px,76px+(100vw-1024px)/576*20,96px)] tablet-figma:max-lg:text-[clamp(64px,64px+(100vw-768px)/256*16,80px)] sm:max-tablet-figma:text-[clamp(56px,56px+(100vw-640px)/128*8,64px)] mobile:max-sm:text-[clamp(40px,40px+(100vw-360px)/280*4,44px)];
   }
   .h2 {
-    @apply -tracking-[.02em] desktop:leading-[90%] mobile:max-desktop:leading-[100%] desktop-figma:text-[clamp(64px,4vw,80px)] desktop:max-desktop-figma:text-[clamp(56px,56px+(100vw-1024px)/576*8,64px)] tablet-figma:max-desktop:text-[clamp(40px,40px+(100vw-768px)/256*12,52px)] tablet:max-tablet-figma:text-[clamp(32px,32px+(1000vw-640px)/128*8,40px)] mobile:max-tablet:text-[clamp(28px,28px+(100vw-360px)/280*4,32px)];
+    @apply -tracking-[.02em] lg:leading-[90%] mobile:max-lg:leading-[100%] desktop-figma:text-[clamp(64px,4vw,80px)] lg:max-desktop-figma:text-[clamp(56px,56px+(100vw-1024px)/576*8,64px)] tablet-figma:max-lg:text-[clamp(40px,40px+(100vw-768px)/256*12,52px)] sm:max-tablet-figma:text-[clamp(32px,32px+(1000vw-640px)/128*8,40px)] mobile:max-sm:text-[clamp(28px,28px+(100vw-360px)/280*4,32px)];
   }
 
   .h3 {
-    @apply leading-[100%] desktop-figma:text-[clamp(32px,2vw,40px)] desktop:max-desktop-figma:text-[clamp(28px,28px+(100vw-1024px)/576*4,32px)] tablet-figma:max-desktop:text-[clamp(24px,24px+(100vw-768px)/256*4,28px)] tablet:max-tablet-figma:text-[clamp(20px,20px+(100vw-640px)/128*4,24px)] mobile:max-tablet:text-[clamp(20px,20px+(100vw-360px)/280*4,24px)];
+    @apply leading-[100%] desktop-figma:text-[clamp(32px,2vw,40px)] lg:max-desktop-figma:text-[clamp(28px,28px+(100vw-1024px)/576*4,32px)] tablet-figma:max-lg:text-[clamp(24px,24px+(100vw-768px)/256*4,28px)] sm:max-tablet-figma:text-[clamp(20px,20px+(100vw-640px)/128*4,24px)] mobile:max-sm:text-[clamp(20px,20px+(100vw-360px)/280*4,24px)];
   }
 
   .h4 {
-    @apply leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-sm tablet-figma:max-desktop:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] tablet:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-tablet:text-[clamp(14px,14px+(100vw-360px)/280*2,16px,18px)];
+    @apply leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-sm tablet-figma:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px,18px)];
   }
 
   .l-text {
-    @apply leading-[135%] desktop-figma:text-[clamp(18px,1.125vw,20px)] desktop:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-desktop:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] tablet:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-tablet:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
+    @apply leading-[135%] desktop-figma:text-[clamp(18px,1.125vw,20px)] lg:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
   }
 
   .m-text {
-    @apply leading-[140%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-sm tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-768px)/576*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
+    @apply leading-[140%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-sm tablet-figma:max-lg:text-[clamp(12px,12px+(100vw-768px)/576*2,14px)] sm:max-tablet-figma:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
   }
 
   .btn-text {
-    @apply -tracking-[.02em] leading-[100%] desktop-figma:text-[clamp(18px,1.125vw,20px)] desktop:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-desktop:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] tablet:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-tablet:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
+    @apply -tracking-[.02em] leading-[100%] desktop-figma:text-[clamp(18px,1.125vw,20px)] lg:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
   }
 
   .link {
-    @apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
+    @apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-lg:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] sm:max-tablet-figma:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
   }
 
   .descriptor {
-    @apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-640px)/256*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
+    @apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-lg:text-[clamp(12px,12px+(100vw-640px)/256*2,14px)] sm:max-tablet-figma:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
   }
 
   .feedback-field:focus ~ .feedback-placeholder {
diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx
index d285caf..f46f648 100644
--- a/src/ui/Button.tsx
+++ b/src/ui/Button.tsx
@@ -30,10 +30,12 @@ function Button({
         (color === 'secondary' ? 'outline outline-1 outline-[#3D425C]' : '')
       } ${
         icon ? 'pr-4' : ''
-      } flex gap-1 items-center overflow-hidden w-${width} ${className}`}
+      } flex gap-1 items-center overflow-hidden w-${width} ${className} justify-between`}
     >
       <span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span>
-      <span className="relative font-medium m-auto">{children}</span>
+      <span className={'relative font-medium' + (icon ? '' : ' m-auto')}>
+        {children}
+      </span>
       <span className="relative">{icon}</span>
     </button>
   );
diff --git a/src/ui/MiniTitle.tsx b/src/ui/MiniTitle.tsx
index 45a465b..f8f4ca2 100644
--- a/src/ui/MiniTitle.tsx
+++ b/src/ui/MiniTitle.tsx
@@ -8,7 +8,7 @@ export function MiniTitle({
   return (
     <h2
       className={
-        'flex gap-1 items-start self-start text-[#ffffff] uppercase opacity-80 font-medium link desktop:max-w-64 xl:w-full ' +
+        'flex gap-1 items-start self-start text-[#ffffff] uppercase opacity-80 font-medium link lg:max-w-64 xl:w-full ' +
         className
       }
     >
diff --git a/tailwind.config.js b/tailwind.config.js
index 08ad12c..d1b66ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,9 +7,7 @@ export default {
     extend: {
       screens: {
         mobile: '360px',
-        tablet: '640px',
         'tablet-figma': '768px',
-        desktop: '1024px',
         'desktop-figma': '1600px',
       },
       animation: {