upd

src/components/Layout/Header.tsx

@@ -13,6 +13,8 @@ import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { useRef, useState } from 'react';
 import { useOnClickOutside } from 'usehooks-ts';
+import { BurgerIcon } from '../icons/BurgerIcon';
+import { CloseIcon } from '../icons/CloseIcon';
 import { ProductsList } from './ProductsList';
 
 export function Header() {
@@ -34,8 +36,13 @@ export function Header() {
         <div className="flex">
           <div className="w-[25vw] sm:pl-6 flex items-center">
             <Link href={'/'}>
-              <ClassNameWrapper className="lg:hidden" element={<LogoIcon />} />
-              {width >= 1024 && <LogoWithTextIcon />}
+              <ClassNameWrapper className="sm:hidden" element={<LogoIcon />} />
+              {width >= 640 && (
+                <ClassNameWrapper
+                  className="lg:w-[113px] w-[93px]"
+                  element={<LogoWithTextIcon />}
+                />
+              )}
             </Link>
           </div>
           <div className="flex border-x border-[#3D425C] max-lg:hidden relative">
@@ -48,10 +55,20 @@ export function Header() {
         <div className="flex">
           <Button
             onClick={() => setModal(<ModalWithForm />, 'form')}
-            className="px-10 font-bold rounded-none outline-none btn-text max-sm:hidden"
+            className="px-10 font-bold rounded-none outline-none btn-text max-sm:hidden min-h-12 mr-0"
           >
             Оставить заявку
           </Button>
+          <button
+            ref={menuBtnRef}
+            className="h-full p-3 mr-0 aspect-square lg:hidden"
+            onClick={() => setMenuOpen(prev => !prev)}
+          >
+            <ClassNameWrapper
+              element={!menuOpen ? <BurgerIcon /> : <CloseIcon />}
+              className={'mx-auto'}
+            />
+          </button>
         </div>
       </nav>
       {menuOpen && (
@@ -69,8 +86,8 @@ export function Header() {
             (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '')
           }
         >
-          <ProductsList />
-          <BurgerLink href="/about">О компании</BurgerLink>
+          <ProductsList inBurger />
+          <BurgerLink href="/about">О нас</BurgerLink>
           <BurgerLink href="/blog">Блог</BurgerLink>
           <BurgerLink href="/projects">Проекты</BurgerLink>
           <div className="grid grid-cols-[2fr_1fr_1fr] sm:grid-cols-2">

src/components/Layout/ModalWithProducts.tsx

@@ -51,7 +51,7 @@ export function ModalWithProducts({
           exit={{
             opacity: 0,
           }}
-          className="pt-10 p-6 bg-[#14161F] bg-opacity-90 z-100 aspect-[1600/720] top-16 relative space-y-6 backdrop-blur-3xl"
+          className="pt-10 p-6 bg-[#14161F] bg-opacity-90 z-100 aspect-[1600/720] lg:top-16 top-12 relative space-y-6 backdrop-blur-3xl"
         >
           <motion.h4
             initial={{ y: -76 }}

src/components/Layout/ProductsList.tsx

@@ -7,7 +7,7 @@ import { ChevronDownIcon } from '../icons/ChevronDownIcon';
 import { ChevronUpIcon } from '../icons/ChevronUpIcon';
 import { ModalWithProducts } from './ModalWithProducts';
 
-export function ProductsList() {
+export function ProductsList({ inBurger = false }: { inBurger?: boolean }) {
   const { setModal, name } = useModalStore();
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -18,8 +18,11 @@ export function ProductsList() {
         setModal(<ModalWithProducts buttonRef={ref} />, 'products');
       }}
       className={
-        'btn-text font-medium px-8 flex gap-x-2 items-center text-[#9299BD] border-r border-[#3D425C] hover:bg-[#3D425C] outline-none' +
-        (name === 'products' ? ' relative z-[101]' : '')
+        'btn-text font-medium flex gap-x-2 items-center border-[#3D425C] outline-none' +
+        (name === 'products' ? ' relative z-[101]' : '') +
+        (inBurger
+          ? ' py-6 w-full active:bg-[#3D425C] justify-between px-10 bg-[#14161F] border-b border-l'
+          : ' hover:bg-[#3D425C] px-8 text-[#9299BD] border-r')
       }
     >
       Продукты

src/components/icons/BurgerIcon.tsx

@@ -1,19 +1,15 @@
 export function BurgerIcon() {
   return (
     <svg
-      width="24"
-      height="24"
+      width={24}
+      height={24}
       viewBox="0 0 24 24"
       fill="none"
-      color="currentColor"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M19 8H5C4.44772 8 4 7.55228 4 7C4 6.44772 4.44772 6 5 6L19 6C19.5523 6 20 6.44772 20 7C20 7.55228 19.5523 8 19 8ZM4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12ZM4 17C4 16.4477 4.44772 16 5 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H5C4.44772 18 4 17.5523 4 17Z"
-        fill="white"
-      />
+      <path d="M19 8H5V6H17L19 8Z" fill="#9299BD" />
+      <path d="M5 11H19V13H5V11Z" fill="#9299BD" />
+      <path d="M5 16H19V18H7L5 16Z" fill="#9299BD" />
     </svg>
   );
 }

src/components/pages/MainPage/Availables/AvailableItem.tsx

@@ -10,7 +10,7 @@ export interface IAvailable {
 export const AvailableItem = forwardRef<HTMLDivElement, IAvailable>(
   ({ img, text, title }, ref) => (
     <div
-      className="bg-no-repeat bg-cover flex flex-col items-stretch justify-end gap-y-4 p-6 container"
+      className="bg-no-repeat bg-cover flex flex-col items-stretch justify-end gap-y-4 p-6 w-full"
       style={{ backgroundImage: `url(${img})` }}
     >
       <AnimatePresence>

src/components/pages/MainPage/Availables/AvailablesSlider.tsx

@@ -1,28 +1,37 @@
 'use client';
 
+import { useWindowWidth } from '@/hooks/useWindowWidth';
 import { SliderWithScaling } from '@/ui/SliderWithScaling';
 import { Title } from '@/ui/Title';
 import { AvailableItem, IAvailable } from './AvailableItem';
 
 export function AvailablesSlider({ availables }: { availables: IAvailable[] }) {
+  const width = useWindowWidth();
+
   return (
-    <div className="pt-[200px] pb-16">
-      <Title className="mb-20">
+    <div className="lg:pt-[200px] sm:pt-[120px] pt-20 lg:pb-16 pb-8">
+      <Title className="lg:mb-20 sm:mb-12 mb-8">
         Интерактивная презентация увлекает покупателей,
         <span className="text-gradient">
           {' '}
           показывает актуальные особенности и преимущества объекта
         </span>
       </Title>
-      <p className="h3 font-medium mb-8">Функциональные возможности</p>
+      <p className="h3 font-medium sm:mb-8 mb-4">Функциональные возможности</p>
       <SliderWithScaling
         SlideElement={AvailableItem}
         slides={availables}
         alignItems="end"
-        className="min-h-[4vw]"
-        slideSizes={['31.6vw', '17.6vw', '64.3125vw', '35.5vw']}
-        childClassName="flex container h-full w-full"
-        controlsPosition="top"
+        className="min-h-[4vw] max-sm:pb-28 sm:max-lg:pb-32"
+        slideSizes={
+          width >= 1024
+            ? ['31.6vw', '17.6vw', '64.3125vw', '35.5vw']
+            : width >= 640
+              ? ['66vw', '36.72vw', '93.75vw', '51.82vw']
+              : ['96.47vw', '58.82vw', '96.47vw', '58.82vw']
+        }
+        childClassName="flex h-full w-full"
+        controlsPosition={width >= 1024 ? 'top' : 'bottom'}
       />
     </div>
   );

src/components/pages/MainPage/Calculator/Calculator.tsx

@@ -2,6 +2,7 @@
 
 import { api } from '@/api';
 import regionsData from '@/consts/regionsData.json';
+import { useWindowWidth } from '@/hooks/useWindowWidth';
 import { Descriptor } from '@/ui/Descriptor';
 import { useEffect, useState } from 'react';
 import Slider from 'react-rangeslider';
@@ -18,6 +19,8 @@ interface Region {
 }
 
 export function Calculator() {
+  const width = useWindowWidth();
+
   const [selectedRegion, setSelectedRegion] = useState<Region>();
   const [consultations, setConsultations] = useState<number>(100);
   const [implementationPeriod, setImplementationPeriod] = useState<number>(
@@ -35,6 +38,7 @@ export function Calculator() {
   const [oldReservation, setOldReservation] = useState<number>();
   const [sales, setSales] = useState<number>();
   const [oldSales, setOldSales] = useState<number>();
+  const [calculated, setCalculated] = useState(width >= 1024);
 
   async function getRegionName() {
     const result: any = await api.get('getRegionName').json();
@@ -134,18 +138,18 @@ export function Calculator() {
   }, [oldImplementationPeriod]);
 
   return (
-    <div className="grid grid-cols-12 space-y-6">
+    <div className="grid lg:grid-cols-12 sm:grid-cols-8 space-y-6">
       <Descriptor title="калькулятор эффективности" className="col-span-3" />
-      <p className="col-span-6 row-start-2 font-medium accent">
+      <p className="lg:col-span-6 col-span-full row-start-2 font-medium accent">
         Мы изучили отчеты об использовании приложения, отраслевую аналитику и на
         основе данных собрали 
         <span className="text-gradient">
           калькулятор эффективности продукта
         </span>
       </p>
-      <div className="grid grid-cols-12 bg-[#14161F] -mx-6 px-6 col-span-full">
-        <div className="col-span-3 row-span-full py-6 pr-6 border-y border-[#3D425C] flex flex-col justify-between bg-[url(/img/pages/home/calculator/Ellipse.png)] bg-cover bg-no-repeat bg-center">
-          <div className="space-y-4">
+      <div className="grid lg:grid-cols-12 sm:grid-cols-8 bg-[#14161F] -mx-6 px-6 col-span-full">
+        <div className="lg:col-span-3 col-span-full lg:row-span-full py-6 pr-6 border-y border-[#3D425C] flex lg:flex-col gap-x-6 justify-between bg-[url(/img/pages/home/calculator/Ellipse.png)] bg-cover bg-no-repeat bg-center">
+          <div className="space-y-4 w-full">
             {selectedRegion && (
               <RegionSelector
                 label="Регион"
@@ -181,7 +185,7 @@ export function Calculator() {
               className="bottom-4 max-w-[calc(100%-32px)] left-4"
             />
           </div>
-          <div className="space-y-[25px]">
+          <div className="space-y-[25px] sm:max-lg:min-w-[45.31vw]">
             <div className="space-y-4">
               <p className="font-medium">Усредненные параметры ЖК</p>
               <hr className="border-[#3D425C]" />
@@ -214,7 +218,7 @@ export function Calculator() {
           </div>
         </div>
 
-        <div className="col-start-4 row-start-1 col-span-2 py-6 pl-6 space-y-4 border-y border-x border-[#3D425C]">
+        <div className="col-start-4 lg:row-start-1 sm:col-span-2 py-6 pl-6 space-y-4 border-y border-x border-[#3D425C]">
           <p className="font-medium h4">Расчет</p>
           <div>
             <div className="pt-10 pb-[39px] space-y-[39px] border-t border-[#3D425C]">

src/components/pages/MainPage/Datamining.tsx

@@ -5,32 +5,38 @@ import Image from 'next/image';
 
 export function Datamining() {
   return (
-    <div className="mb-40 pt-[200px] space-y-20">
+    <div className="lg:mb-20 sm:mb-16 mb-12 lg:pt-[200px] sm:pt-[120px] pt-20 lg:space-y-20 sm:space-y-16">
       <Title>
         Graff.estate имеет интеграцию с CRM-системой застройщика{' '}
         <span className="text-gradient">
-          и собирает данные о пользователе и его поведении
+          и&nbsp;собирает данные о пользователе и его поведении
         </span>
       </Title>
-      <div className="grid xl:grid-cols-4 lg:grid-cols-3 gap-x-4 border-y border-[#3D425C] aspect-[1600/408]">
-        <p className="xl:col-span-1 lg:col-span-full xl:pt-10 lg:py-8 pr-4 text-left accent font-medium xl:border-r lg:border-b border-[#3D425C]">
-          Graff.estate легко встраивается в существующую цепочку продаж
-        </p>
-        <div className="p-6 my-4 w-full bg-[url(/img/pages/home/projectmanagment/Ellipse.png)] flex flex-col justify-between col-span-1">
+      <div className="grid xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-x-4 border-y border-[#3D425C]">
+        <div className="xl:col-span-1 lg:col-span-full sm:max-lg:col-span-full max-xl:border-b border-[#3D425C] xl:border-r">
+          <p className="xl:pt-10 sm:py-8 pr-4 text-left accent font-medium sm:max-lg:w-3/4">
+            Graff.estate легко встраивается в существующую цепочку продаж
+          </p>
+        </div>
+        <div className="p-6 my-4 w-full bg-[url(/img/pages/home/projectmanagment/Ellipse.png)] lg:flex flex-col justify-between sm:max-lg:col-start-1 col-span-1 sm:space-y-[138px]">
           <ListIcon />
           <div className="space-y-6">
-            <p className="font-medium h4">Актуальная информация о квартирах</p>
-            <p className="font-medium m-text">
+            <p className="font-medium sm:max-lg:h3 h4">
+              Актуальная информация о квартирах
+            </p>
+            <p className="lg:m-text sm:l-text">
               Клиент всегда видит актуальные данные об интересующем его лоте,
               включая статус и стоимость
             </p>
           </div>
         </div>
-        <div className="p-6 my-4 w-full bg-[url(/img/pages/home/projectmanagment/Ellipse.png)] flex flex-col justify-between col-span-1">
+        <div className="p-6 my-4 w-full bg-[url(/img/pages/home/projectmanagment/Ellipse.png)] flex flex-col justify-between sm:max-lg:col-start-2 col-span-1 sm:space-y-[138px]">
           <ClientIcon />
           <div className="space-y-6">
-            <p className="font-medium h4">Создание карточки клиента </p>
-            <p className="font-medium m-text">
+            <p className="font-medium sm:max-lg:h3 h4">
+              Создание карточки клиента
+            </p>
+            <p className="lg:m-text sm:l-text">
               Инструмент продаж сам создаст карточку клиента в вашей CRM-системе
               и назначит ответственного менеджера
             </p>
@@ -38,7 +44,7 @@ export function Datamining() {
         </div>
         <Image
           fill
-          className="!relative w-full col-span-1 py-4"
+          className="!relative w-full lg:col-span-1 sm:max-lg:col-span-full lg:py-4 sm:max-lg:pb-4 object-cover"
           src={'/img/pages/home/projectmanagment/Datamining 1.png'}
           alt="Datamining"
         />

src/components/pages/MainPage/Integrations/IntegrationsSlider.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useWindowWidth } from '@/hooks/useWindowWidth';
 import { SliderWithScaling } from '@/ui/SliderWithScaling';
 import { IIntegration, IntegrationItem } from './IntegrationItem';
 
@@ -8,15 +9,23 @@ export function IntegrationsSlider({
 }: {
   integrations: IIntegration[];
 }) {
+  const width = useWindowWidth();
+
   return (
-    <div className="pt-[120px] space-y-8">
+    <div className="lg:pt-[120px] pt-12 space-y-8">
       <p className="h3 font-medium">Интеграции в офисы продаж</p>
       <SliderWithScaling
         slides={integrations}
         SlideElement={IntegrationItem}
-        className="pb-10 border-b border-[#3D425C]"
+        className="lg:pb-10 sm:pb-[141px] pb-[98px] border-b border-[#3D425C]"
         childClassName="flex flex-col justify-stretch h-full"
-        slideSizes={['31.6vw', '31.8vw', '48vw', '48vw']}
+        slideSizes={
+          width >= 1024
+            ? ['31.69vw', '31.56vw', '48vw', '48vw']
+            : width >= 640
+              ? ['66.01vw', '66vw', '93.75vw', '93.75vw']
+              : ['91.11vw', '91.11vw', '91.11vw', '91.11vw']
+        }
         controlsPosition="bottom"
       />
     </div>

src/components/pages/MainPage/Motivation.tsx

@@ -7,9 +7,8 @@ export function Motivation() {
       <div className="flex justify-between mb-12 gap-x-4">
         <h1 className="h1 font-medium">
           Интерактивный инструмент
-          <br />
-          продаж
-          <span className="text-gradient"> для застройщиков</span>
+          <br className="max-lg:hidden" /> продаж
+          <span className="text-gradient"> для&nbsp;застройщиков</span>
         </h1>
         <ClassNameWrapper className="mt-4 mr-2" element={<SkolkovoIcon />} />
       </div>

src/components/pages/MainPage/ProjectsMap.tsx

@@ -10,7 +10,7 @@ export function ProjectsMap() {
   const width = useWindowWidth();
 
   return (
-    <div className="relative w-fit h-fit origin-top-left max-lg:hidden">
+    <div className="relative w-fit h-fit origin-top-left">
       <Image
         src={'/img/pages/home/stats/map.jpg'}
         alt={'Карта проектов'}

src/components/pages/MainPage/Reviews.tsx

@@ -13,20 +13,14 @@ export function Reviews() {
   const [tab, setTab] = useState(0);
 
   return (
-    <div className="pt-[200px] space-y-20">
-      <Title>
+    <div className="lg:pt-[200px] sm:pt-[120px] pt-20 lg:space-y-20">
+      <Title className="sm:max-lg:mb-16 max-sm:mb-8">
         Наша цель — разработать эффективный продукт,
         <span className="text-gradient"> которым будут пользоваться</span>
       </Title>
+      <Descriptor title="отзывы клиентов" className="lg:hidden sm:mb-8 mb-6" />
       <div className="relative w-full xl:aspect-[1552/616] sm:aspect-[720/412]">
-        {reviewsData.map((review, index) => (
-          <ReviewContent
-            key={review.author}
-            {...review}
-            active={tab === index}
-          />
-        ))}
-        <div className="absolute flex bottom-10 left-10 gap-x-2">
+        <div className="lg:absolute flex bottom-10 left-10 gap-x-2 z-10 sm:max-lg:mb-6">
           <ReviewTab
             onClick={() => setTab(0)}
             active={tab === 0}
@@ -43,6 +37,13 @@ export function Reviews() {
             title="ЖК «Айвазовский»"
           />
         </div>
+        {reviewsData.map((review, index) => (
+          <ReviewContent
+            key={review.author}
+            {...review}
+            active={tab === index}
+          />
+        ))}
       </div>
     </div>
   );
@@ -86,18 +87,29 @@ function ReviewContent({
           animate={{ opacity: 1 }}
           transition={{ duration: 1 }}
           className={
-            'bg-cover bg-top bg-no-repeat h-full flex justify-center items-center '
+            'bg-cover bg-top bg-no-repeat h-full flex justify-center items-center'
           }
           style={{ backgroundImage: `url(${image})` }}
         >
-          <div className="space-y-6 max-w-[33%] absolute left-10 top-10">
-            <Descriptor title="отзывы клиентов" className="mb-2" />
-            <div className="font-medium accent">{text}</div>
-            <div className="m-caption max-w-[50%] font-medium">{author}</div>
+          <div className="h-full flex justify-center items-center">
+            <div className="space-y-6 max-w-[33%] absolute left-10 top-10">
+              <Descriptor
+                title="отзывы клиентов"
+                className="mb-2 max-lg:hidden"
+              />
+              <div className="font-medium accent max-lg:hidden">{text}</div>
+              <div className="m-caption max-w-[50%] font-medium max-lg:hidden">
+                {author}
+              </div>
+            </div>
+            <button className="absolute border rounded-full p-8 bg-[#14161F33] hover:bg-transparent">
+              <ClassNameWrapper className="w-10 h-10" element={<PlayIcon />} />
+            </button>
+          </div>
+          <div className="lg:hidden space-y-4">
+            <p className="accent font-medium">{text}</p>
+            <p className="m-caption font-medium">{text}</p>
           </div>
-          <button className="absolute border rounded-full p-8 bg-[#14161F33] hover:bg-transparent">
-            <ClassNameWrapper className="w-10 h-10" element={<PlayIcon />} />
-          </button>
         </motion.div>
       )}
     </>

src/components/pages/MainPage/Showreel.tsx

@@ -8,13 +8,13 @@ export function Showreel() {
   const { setModal } = useModalStore();
 
   return (
-    <div className="lg:mb-[200px] w-full relative aspect-[1551/616] flex justify-center items-center group">
+    <div className="lg:mb-[200px] sm:mb-[120px] w-full relative lg:aspect-[1551/616] flex justify-center items-center group">
       <video
         src="/videos/pages/home/showreel.mp4"
         autoPlay
         loop
         muted
-        className="w-full aspect-[1552/616] object-cover self-stretch"
+        className="w-full lg:aspect-[1552/616] object-cover self-stretch"
       />
       <button
         className="absolute z-10 p-8 rounded-full border group-hover:block hidden bg-[#14161F33]"

src/components/pages/MainPage/Statistics.tsx

@@ -32,8 +32,8 @@ export function Statistics() {
   }, []);
 
   return (
-    <section>
-      <Title className="mb-20 leading-[-2em]">
+    <section className="lg:space-y-20 sm:space-y-12">
+      <Title className="leading-[-2em]">
         Продавайте недвижимость <br />
         <span className="text-gradient">проще и </span>
         <span className="relative">
@@ -42,25 +42,22 @@ export function Statistics() {
         </span>
         <span className="text-gradient"> дороже</span>
       </Title>
-      <div className="grid grid-cols-12 border-t border-[#3D425C]">
-        <div className="col-span-3 pt-10 border-r border-b border-[#3D425C] accent font-medium">
+      <div className="grid lg:grid-cols-12 sm:grid-cols-2 border-t border-[#3D425C]">
+        <div className="lg:col-span-3 sm:col-span-2 lg:pt-10 sm:py-8 lg:border-r border-b border-[#3D425C] accent font-medium">
           Мы собрали статистику за 13 лет работы с застройщиками, реализовав 
           {getProjectsCount(projects.length)}
         </div>
-        <div className="col-start-4 col-span-full py-10 pl-4 border-b border-[#3D425C] aspect-[1176/570]">
+        <div className="lg:col-start-4 lg:col-span-full sm:col-span-2 py-10 pl-4 border-b border-[#3D425C] lg:aspect-[1176/570]">
           <ProjectsMap />
         </div>
-        <div className="col-span-3 py-10 flex flex-col justify-between border-b border-r border-[#3D425C]">
-          <Descriptor
-            title="экономическая эффективность"
-            className="col-span-3"
-          />
-          <p className="m-text">
+        <div className="lg:col-span-3 sm:col-span-1 lg:py-10 sm:max-lg:pt-8 lg:flex flex-col justify-between sm:max-lg:space-y-5 lg:border-b lg:border-r border-[#3D425C]">
+          <Descriptor title="экономическая эффективность" className="" />
+          <p className="l-text">
             Экономьте на стоимости проектного финансирования сократив время
             реализации проекта с помощью интерактивной презентации
           </p>
         </div>
-        <div className="col-span-9 py-4 pl-4 gap-4 border-b border-[#3D425C] flex flex-wrap">
+        <div className="lg:col-span-9 sm:col-start-1 col-span-2 lg:py-4 sm:py-8 lg:pl-4 gap-4 border-b border-[#3D425C] flex flex-wrap sm:max-lg:justify-between">
           <Figure
             figures={[30, 48]}
             percent={18}
@@ -71,7 +68,7 @@ export function Statistics() {
             percent={12}
             title={'Конверсия из консультации в бронирование увеличивается на'}
           />
-          <div className="p-6 w-[376px] h-[250px] [background:center/cover_url(/img/pages/home/stats/highlight.svg)_no-repeat,#14161F] overflow-hidden flex flex-col">
+          <div className="p-6 lg:w-[376px] sm:w-[350px] h-[250px] [background:center/cover_url(/img/pages/home/stats/highlight.svg)_no-repeat,#14161F] overflow-hidden flex flex-col">
             <p className="m-text">Время реализации проекта сокращается до</p>
             <div className="relative aspect-[328/158] flex items-end flex-1">
               <Image
@@ -94,7 +91,7 @@ export function Statistics() {
             </div>
           </div>
 
-          <div className="p-6 w-[376px] h-[250px] [background:center/cover_url(/img/pages/home/stats/highlight.svg)_no-repeat,left_bottom/65%_65%_url(/img/pages/home/stats/adv.png)_no-repeat,#14161F] flex flex-col">
+          <div className="p-6 lg:w-[376px] sm:w-[350px] h-[250px] [background:center/cover_url(/img/pages/home/stats/highlight.svg)_no-repeat,left_bottom/65%_65%_url(/img/pages/home/stats/adv.png)_no-repeat,#14161F] flex flex-col">
             <p className="m-text">
               Время на подготовку рекламных материалов сокращается до
             </p>
@@ -159,7 +156,7 @@ function Figure({
   return (
     <motion.div
       ref={root}
-      className="p-6 aspect-[376/250] w-[376px] [background:center/cover_url(/img/pages/home/stats/highlight.svg)_no-repeat,#14161F] flex flex-col"
+      className="p-6 lg:w-[376px] lg:h-[250px] sm:w-[350px] w-full [background:center/cover_url(/img/pages/home/stats/highlight.svg)_no-repeat,#14161F] flex flex-col"
     >
       <p className="m-text">{title}</p>
       <div className="aspect-[328/158] relative flex-1 flex">

src/components/pages/MainPage/Streaming.tsx

@@ -6,40 +6,40 @@ import Image from 'next/image';
 
 export function Streaming() {
   return (
-    <div className="pt-[200px] space-y-20">
+    <div className="lg:pt-[200px] sm:pt-[120px] pt-20 lg:space-y-20 sm:space-y-12 space-y-8">
       <Title>
         Уникальная технология удаленной демонстрации{' '}
         <span className="text-gradient">
           дает возможность презентовать объект покупателю из любой точки мира
         </span>
       </Title>
-      <div className="grid grid-cols-12">
-        <div className="pt-10 pb-6 flex flex-col justify-between col-start-1 col-span-3 border-t border-r border-[#3D425C]">
+      <div className="grid lg:grid-cols-12 sm:grid-cols-2 sm:max-lg:border-t border-[#3D425C]">
+        <div className="lg:pt-10 lg:pb-6 sm:pt-8 lg:flex flex-col justify-between col-start-1 lg:col-span-3 sm:max-lg:space-y-4 sm:col-span-1 lg:border-t lg:border-r border-[#3D425C]">
           <p className="font-medium accent">
             <span className="text-gradient">Graff.estate stream</span> доступен
-            на любых устройствах.
+            на&nbsp;любых устройствах.
           </p>
           <p className="m-text">
             Высокий уровень графики и полное погружение покупателя в процесс
             выбора квартиры
           </p>
         </div>
-        <div className="py-4 pl-4 w-full col-start-4 col-span-full border-t border-[#3D425C]">
+        <div className="lg:py-4 sm:py-8 lg:pl-4 w-full lg:col-start-4 lg:col-span-full sm:col-span-2 lg:border-t sm:max-lg:border-b border-[#3D425C]">
           <video
             src="/videos/pages/home/technology.mp4"
             autoPlay
             muted
             loop
-            className="aspect-[1160/652]"
+            className="lg:aspect-[1160/652]"
           />
         </div>
-        <div className="pt-10 pb-8 flex flex-col justify-between row-start-2 col-span-3 border-y border-r border-[#3D425C]">
+        <div className="lg:pt-10 pt-8 pb-8 lg:flex flex-col justify-between lg:row-start-2 lg:col-span-3 sm:col-span-1 lg:border-y sm:max-lg:space-y-5 lg:border-r border-[#3D425C]">
           <Descriptor title="Демоверсии" />
-          <p className="m-text">
+          <p className="l-text">
             Местоположение и устройство не имеют значения. Нужен только интернет
           </p>
         </div>
-        <div className="p-4 grid grid-cols-2 xl:grid-cols-3 gap-4 col-start-4 col-span-full border-y border-[#3D425C]">
+        <div className="lg:p-4 sm:pb-8 grid grid-cols-2 xl:grid-cols-3 gap-4 lg:col-start-4 col-span-full lg:border-y sm:max-lg:border-b border-[#3D425C]">
           <StreamingProject
             city="Екатеринбург"
             name="Re:volution Towers"

src/ui/BurgerLink.tsx

@@ -13,7 +13,7 @@ export function BurgerLink({
     <Link
       href={href}
       className={
-        'flex items-center px-10 py-6 gap-1 btn-text bg-[#14161F] w-full last:border-b-0 [&:not(:last-child)]:border-b sm:border-l font-semibold border-[#3D425C] lg:hover:bg-[#3D425C] active:bg-[#14161F] ' +
+        'flex items-center px-10 py-6 gap-1 btn-text bg-[#14161F] w-full last:border-b-0 [&:not(:last-child)]:border-b sm:border-l font-semibold border-[#3D425C] active:bg-[#3D425C] ' +
         className
       }
     >

src/ui/SliderWithScaling.tsx

@@ -158,7 +158,8 @@ export function SliderWithScaling<T extends { title: string }>({
           'absolute ' +
           (controlsPosition === 'top'
             ? 'right-0'
-            : 'lg:bottom-16 bottom-10 sm:self-end self-center')
+            : 'lg:bottom-16 sm:bottom-10 bottom-6 sm:self-end self-center') +
+          (width >= 640 && width < 1024 ? ' left-0' : '')
         }
       />
     </div>