diff --git a/README.md b/README.md
index 10caa63..ac6969f 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ Talent Team - разработка корпоративных мероприят
 - В раздел "Наша команда" добавлен еще 1 человек
 - Убрана кнопка "О компании" с Hero секции
 - Добавленны страницы для всех бизнес-игр
-- Переработан компонент Header и Footer так чтобы в меню для каждрй игры можно было создавать свои якорные ссылки
+- Переработан компонент Header и Footer так чтобы в меню для каждой игры можно было создавать свои якорные ссылки
 - Изменен Hero компонент для страниц с играми так, чтобы у каждой игры можно было ставить свой заголовок, изображение и доп.информацию об игре.
 - Исправленно отображение длинной доп.информации об игре в Hero компоненте для страниц с играми.
 - Добавлен favicon для сайта.
@@ -19,8 +19,10 @@ Talent Team - разработка корпоративных мероприят
 - Добавлен description для сайта.
 - Блок "Создание электронных курсов" за менен на другой блок - "Сессии Lego SP".
 - Для мобильной и планшетной версии созданно Burger меню.
-- Адаптирован блок Header, Advantages, About на главной странице под все разрешения (неадаптированые блоки временно скрыты).
-- В блоке Header, Advantages, About на главной странице исправленны все ошибки и варнинги.
+- Полностью адаптирована главная страница, а также страницы игр "Эмоциональный интеллект", "Вызов принят".
+- На главной странице, а также страницах игр "Эмоциональный интеллект", "Вызов принят" исправленны все ошибки и варнинги в консоли.
+- Добавлен Lazy loading на изображения.
+- Отзывы замененны на благодарственные письма.
 
 
 #### V 0.2
diff --git a/src/components/About.jsx b/src/components/About.jsx
index 1a8b7fb..ae40c9e 100644
--- a/src/components/About.jsx
+++ b/src/components/About.jsx
@@ -14,7 +14,7 @@ const About = ({...props}) => {
                     <p className='mb-5 max-md:mb-4 max-md:text-sm'><b className='font-semibold'>Мы разрабатываем и проводим бизнес-игры и бизнес-симуляции любой сложности «под ключ».</b> Мы провели более 150 игр, с количеством игроков от 4 до 400.</p>
                     <p className='mb-5 max-md:mb-4 max-md:text-sm'>Мы убеждены, что каждое проводимое корпоративное мероприятие должны быть максимально полезны, придерживаясь главной цели – это развитие персонала. Ведь, развивая персонал, мы открываем для бизнеса новые возможности.</p>
                 </div>
-                <div className='basis-1/2 md:ml-5 max-lg:flex max-lg:flex-col max-lg:items-center max-lg:w-full max-md:mt-0 max-lg:mt-5'>
+                <div className='basis-1/2 lg:ml-5 max-lg:flex max-lg:flex-col max-lg:items-center max-lg:w-full max-md:mt-0 max-lg:mt-5'>
                     <iframe className='w-full h-[500px] max-sm:h-[250px] max-md:h-[350px] mb-7 rounded-lg' src="https://www.youtube.com/embed/0zMLl9WbHVg" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
                     <Button className='max-sm:w-full w-52'>Наши услуги</Button>
                 </div>
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
index c456edb..6d1c5a5 100644
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -6,17 +6,17 @@ import Textarea from "./UI/Textarea";
 
 const Contact = ({white, ...props}) => {
     return (
-        <section {...props} className={white ? 'py-32' : 'py-32 bg-[#0E0808]'}>
-            <div className="container mx-auto px-24">
-                <h2 className={white ? 'text-3xl mb-16 font-semibold text-slate-800 text-center uppercase' : 'text-3xl mb-16 font-semibold text-white text-center uppercase'}>Связаться с нами</h2>
-                <div className="flex mb-10">
-                    <div className="flex flex-col basis-[40%] mr-6">
-                        <Input className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
-                        <Input className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
-                        <Input className={white ? 'border-2 !border-slate-700' : null} label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>
+        <section {...props} className={white ? 'py-32 max-md:py-16' : 'py-32 max-md:py-16 bg-[#0E0808]'}>
+            <div className="container mx-auto px-24 max-md:px-3">
+                <h2 className={white ? 'text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase' : 'text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'}>Связаться с нами</h2>
+                <div className="flex max-md:flex-col mb-10 max-md:mb-8">
+                    <div className="flex flex-col basis-[40%] mr-6 max-md:mr-0">
+                        <Input labelClasses={white ? 'text-black' : null} className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
+                        <Input labelClasses={white ? 'text-black' : null} className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
+                        <Input labelClasses={white ? 'text-black' : null} className={white ? 'max-md:mb-5 border-2 !border-slate-700' : 'max-md:mb-5'} label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>
                     </div>
                     <div className="flex basis-[60%]">
-                        <Textarea className={white ? 'h-full resize-none border-2 !border-slate-700' : 'h-full resize-none'} label='Ваше обращение:' placeholder='Обращение...'></Textarea>
+                        <Textarea labelClasses={white ? 'text-black' : null} className={white ? 'h-full resize-none border-2 !border-slate-700' : 'h-full resize-none'} label='Ваше обращение:' placeholder='Обращение...'></Textarea>
                     </div>
                 </div>
                 <div className="flex justify-center">
diff --git a/src/components/Facilitations/Example/Example.jsx b/src/components/Facilitations/Example/Example.jsx
index ae09255..6cc27e7 100644
--- a/src/components/Facilitations/Example/Example.jsx
+++ b/src/components/Facilitations/Example/Example.jsx
@@ -39,7 +39,7 @@ const Example = () => {
         },
     }`);
 
-    const [examples, setExamples] = useState([
+    const [examples] = useState([
         {id: 1, title: 'Сессии по подведению итогов и ретроспективы', img: images.img1},
         {id: 2, title: 'Креативные, инновационные сессии', img: images.img2},
         {id: 3, title: 'Стратегические сессии', img: images.img3},
@@ -49,8 +49,8 @@ const Example = () => {
     ]);
 
     return (
-        <section className='pt-32 bg-[#0E0808]'>
-            <h2 className='text-3xl mb-20 font-semibold text-white text-center uppercase'>Примеры фасилитационных сессий</h2>
+        <section className='pt-32 max-md:pt-16 bg-[#0E0808]'>
+            <h2 className='text-3xl max-md:text-2xl mb-20 max-md:mb-10 font-semibold text-white text-center uppercase'>Примеры фасилитационных сессий</h2>
             <div className="flex flex-wrap">
                 {examples.map(example =>
                     <Image key={example.id} title={example.title} image={example.img}></Image>
diff --git a/src/components/Facilitations/Example/Image.jsx b/src/components/Facilitations/Example/Image.jsx
index bf9deb1..36424e2 100644
--- a/src/components/Facilitations/Example/Image.jsx
+++ b/src/components/Facilitations/Example/Image.jsx
@@ -3,9 +3,9 @@ import { getImage } from 'gatsby-plugin-image';
 
 const Image = ({title, image}) => {
     return (
-        <div className="flex basis-1/3 h-80 overflow-hidden">
+        <div className="flex basis-1/3 max-md:basis-1/2 h-80 max-md:h-44 max-lg:h-60 overflow-hidden">
             <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 w-full bg-cover bg-center hover:scale-105 duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)]">
-                <h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
+                <h3 className='transition uppercase text-white font-medium text-center max-md:text-sm'>{title}</h3>
             </div>
         </div>
     )
diff --git a/src/components/Facilitations/Main.jsx b/src/components/Facilitations/Main.jsx
index 7e0d5a7..b938c5c 100644
--- a/src/components/Facilitations/Main.jsx
+++ b/src/components/Facilitations/Main.jsx
@@ -4,29 +4,29 @@ import Step from './Step/Step'
 import Line from '../../images/line.svg'
 
 const Main = ({props}) => {
-    const [steps, setStep] = useState([
-        {title: "Составление технического задания", ml: 'ml-[0px]'},
-        {title: "Детализация запроса", ml: 'ml-[20px]'},
-        {title: "Подготовительный этап", ml: 'ml-[40px]'},
-        {title: "Проведении сессии", ml: 'ml-[60px]'},
-        {title: "Заключительный этап", ml: 'ml-[80px]'},
+    const [steps] = useState([
+        {id: 0, title: "Составление технического задания", ml: '0'},
+        {id: 1, title: "Детализация запроса", ml: '20'},
+        {id: 2, title: "Подготовительный этап", ml: '40'},
+        {id: 3, title: "Проведении сессии", ml: '60'},
+        {id: 4, title: "Заключительный этап", ml: '80'},
     ]);
 
     return (
-        <section {...props} className='bg-white relative py-32'>
-            <div className="container mx-auto px-32 relative">
-                <h2 className='text-3xl mb-5 font-semibold text-slate-800 text-center uppercase'>Фасилитации</h2>
-                <h3 className='text-xl mb-20 font-medium text-slate-800 text-center uppercase'>Вы можете доверить проведение сессии нам — профессиональным фасилитаторам</h3>
-                <div className='flex'>
+        <section {...props} className='bg-white relative py-32 max-md:py-16'>
+            <div className="container mx-auto px-32 max-lg:px-3 relative">
+                <h2 className='text-3xl max-md:text-2xl mb-5 font-semibold text-slate-800 text-center uppercase'>Фасилитации</h2>
+                <h3 className='text-xl max-md:text-lg mb-20 max-md:mb-10 font-medium text-slate-800 text-center uppercase'>Вы можете доверить проведение сессии нам — профессиональным фасилитаторам</h3>
+                <div className='flex max-lg:flex-col'>
                     <div className="basis-1/2">
                         <p className='text-base mb-5'><b>Фасилитация</b> (англ. facilitate – облегчать, помогать) – профессиональная организация процесса групповой работы, направленная на обсуждение, прояснение и достижение группой поставленных заказчиком целей, при полной нейтральности фасилитатора к контенту обсуждения.</p>
-                        <p className='text-2xl font-semibold text-gray-800 '>Проект проведения любой фасилитационной сессии обычно состоит из 5 этапов:</p>
-                        <img className='absolute bottom-0' src={Line} alt="wave"/>
+                        <p className='text-2xl max-md:text-xl max-lg:mb-8 font-semibold text-gray-800 '>Проект проведения любой фасилитационной сессии обычно состоит из 5 этапов:</p>
+                        <img className='absolute bottom-0 max-lg:hidden max-xl:w-[540px] max-2xl:w-[720px]' src={Line} alt="wave"/>
                     </div>
-                    <div className="flex justify-end basis-1/2">
+                    <div className="flex justify-end max-lg:justify-start basis-1/2">
                         <div className="flex flex-col">
                             {steps.map((step, count)=>
-                                <Step ml={step.ml} title={step.title} ico={step.ico} count={count+1}></Step>
+                                <Step key={step.id} ml={step.ml} title={step.title} ico={step.ico} count={count+1}></Step>
                             )}
                         </div>
                     </div>
diff --git a/src/components/Facilitations/Step/Step.jsx b/src/components/Facilitations/Step/Step.jsx
index dd113f3..3cf4f41 100644
--- a/src/components/Facilitations/Step/Step.jsx
+++ b/src/components/Facilitations/Step/Step.jsx
@@ -2,10 +2,10 @@ import React from 'react'
 
 const Step = ({title, count, ml}) => {
     return (
-        <div className='flex flex-col mb-7 relative [&>div>.number]:last:before:content-none'>
+        <div style={{"--ml":ml+"px"}}className='flex flex-col mb-7 relative [&>div>.number]:last:before:content-none'>
             <div className="flex items-center">
-                <div className={'number border-yellow-200 border-4 flex items-center justify-center text-lg text-white relative font-bold bg-yellow-400 rounded-full w-16 h-16 mr-5 before:absolute before:bottom-0 before:bg-yellow-200 before:w-1 before:left-[calc(50%+5px)] before:h-[40px] before:-rotate-[11deg] before:-translate-y-[-100%] '+ml}>0{count}</div>
-                <p className='text-xl font-medium text-gray-800'>{title}</p>
+                <div className={'number border-yellow-200 border-4 flex items-center justify-center text-lg text-white relative font-bold bg-yellow-400 rounded-full w-16 max-xl:min-w-[64px] h-16 mr-5 before:absolute before:bottom-0 before:bg-yellow-200 before:w-1 before:left-[calc(50%+5px)] before:h-[40px] before:-rotate-[11deg] max-sm:before:-rotate-[8deg] before:-translate-y-[-100%] ml-[var(--ml)] max-sm:ml-[calc(var(--ml)/2)]'}>0{count}</div>
+                <p className='text-xl max-md:text-lg font-medium text-gray-800'>{title}</p>
             </div>
 
         </div>
diff --git a/src/components/Games/Game.jsx b/src/components/Games/Game.jsx
index 21fa1e5..0124135 100644
--- a/src/components/Games/Game.jsx
+++ b/src/components/Games/Game.jsx
@@ -4,12 +4,12 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import { BsArrowRight } from "react-icons/bs";
 
 const Game = ({img, title, description, slug}) => {
-    const image = getImage(img)
+    const image = getImage(img);
 
     return (
-        <Link to={'/games/' + slug} className={'flex basis-[calc(25%-15px)] mr-5 justify-center [&:nth-child(4n+4)]:mr-0 mb-14 [&>div>h2]:hover:text-yellow-500 [&>div]:hover:scale-105'}>
+        <Link to={'/games/' + slug} className={'flex basis-[calc(25%-15px)] max-sm:basis-full max-md:basis-[calc(50%-20px)] max-xl:basis-[calc(33%-20px)] mr-5 max-sm:mr-0 max-sm:last:mb-0 justify-center max-md:[&:nth-child(2n+2)]:mr-0 md:max-xl:[&:nth-child(3n+3)]:mr-0 xl:[&:nth-child(4n+4)]:mr-0 mb-14 max-sm:mb-10 [&>div>h2]:hover:text-yellow-500 [&>div]:hover:scale-105'}>
             <div className="flex flex-col transition">
-                <GatsbyImage className='rounded-lg mb-2 h-60 object-cover' image={image} alt="logo" placeholder="none"/>
+                <GatsbyImage loading='lazy' className='rounded-lg mb-2 h-60 object-cover' image={image} alt="logo" placeholder="none"/>
                 <h2 className='text-white text-xl font-medium mb-3 transition'>{title}</h2>
                 <p className='text-gray-300 mb-4 grow'>{description}</p>
                 <p className='more transition flex items-center text-yellow-400'>Подробнее <BsArrowRight className='ml-2'/></p>
diff --git a/src/components/Games/GamePage/Hero.jsx b/src/components/Games/GamePage/Hero.jsx
index 5a9473b..bc8d394 100644
--- a/src/components/Games/GamePage/Hero.jsx
+++ b/src/components/Games/GamePage/Hero.jsx
@@ -4,17 +4,17 @@ import { AiOutlineClockCircle, AiOutlineTeam } from "react-icons/ai";
 
 const Hero = ({title, img, time, members, formats}) => {
     return (
-        <section className="h-[60vh]">
+        <section className="h-[60vh] min-h-[300px]">
             <div className="mr-0 relative h-full flex items-center bg-gray-50">
-                <div className="relative h-full ml-[calc(50%-768px)] z-10 flex">
-                    <h1 className="relative left-1/3 leading-tight text-7xl font-bold italic min-w-[650px] text-slate-800 drop-shadow-[0_5px_5px_rgba(255,255,255,.3)] self-center">{title}</h1>
-                    <div className="absolute bottom-3 flex items-center last:[&>p]:!mr-0 flex-wrap ">
+                <div className="relative h-full max-sm:w-full ml-[calc(50%-768px)] max-lg:ml-[calc(50%-384px)] max-xl:ml-[calc(50%-512px)] max-2xl:ml-[calc(50%-640px)] max-md:mx-auto z-10 flex">
+                    <h1 className="relative max-sm:w-full left-1/3 max-md:left-0 max-md:text-center leading-tight text-7xl max-lg:text-5xl max-xl:text-6xl max-md:text-4xl max-md:bg-white max-md:bg-opacity-70 max-md:p-3 font-bold italic min-w-[650px] max-md:min-w-0 max-lg:min-w-[430px] max-xl:min-w-[540px] text-slate-800 drop-shadow-[0_5px_5px_rgba(255,255,255,.3)] self-center">{title}</h1>
+                    <div className="absolute bottom-3 max-md:bottom-0 flex items-center last:[&>p]:!mr-0 flex-wrap max-md:p-3 max-md:bg-gray-100">
                         {time && <p className="flex mr-4 items-center text-lg text-slate-800"><AiOutlineClockCircle/>: {time}</p>}
                         {members && <p className="flex mr-4 items-center text-lg text-slate-800"><AiOutlineTeam/>: {members}</p>}
                         {formats && <p><b>Доступные форматы:</b> {formats}</p>}
                     </div>
                 </div>
-                <div className="basis-full h-[60vh]">
+                <div className="basis-full h-[60vh] min-h-[300px] max-md:absolute max-md:w-full">
                     <GatsbyImage className='w-full h-[inherit]' image={getImage(img)} alt="logo" placeholder="none"/>
                 </div>  
             </div>
diff --git a/src/components/Games/Games.jsx b/src/components/Games/Games.jsx
index e191771..de6c3d5 100644
--- a/src/components/Games/Games.jsx
+++ b/src/components/Games/Games.jsx
@@ -48,12 +48,12 @@ const Games = ({...props}) => {
         },
         eight_colors_delegation: file(relativePath: {eq: "games/8-colors-delegation.jpeg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
+                gatsbyImageData(formats: WEBP, height: 240)
             }
         }
     }`);
 
-    const [games, setGames] = useState([
+    const [games] = useState([
         {slug: 'challenge-accepted', title: 'Вызов Принят', description: 'Частники выступают в качестве руководителей региональных отделений одной компании в разных городах. Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами.', img: images.challenge_accepted},
         {slug: 'bridge', title: 'Мост', description: 'Дает участникам практические уроки по эффективной работе в команде. Участники должны работать вместе, как единая организация, в индивидуальных командах и подгруппах, над строительством гигантской модели моста.', img: images.bridge},
         {slug: 'middleages-secrets', title: 'Секреты Средневековья', description: 'Командам предстоит проанализировать много важной информации, разгадать зашифрованные  коды , решить сложные головоломки и многое-многое другое.', img: images.middleages_secrets},
@@ -66,19 +66,19 @@ const Games = ({...props}) => {
 
     return (
         <>
-            <section {...props} className='py-32'>
+            <section {...props} className='py-32 max-md:py-16 max-md:px-3'>
                 <div className="container mx-auto">
-                    <div className="flex flex-col items-center mb-20">
-                        <h2 className='text-3xl mb-6 font-semibold text-slate-800 text-center uppercase'>Бизнес-игры</h2>
-                        <p className='text-center text-lg max-w-4xl text-slate-700'>Бизнес игры прекрасно моделируют реальный процесс работы в интересной форме. Сотрудник или команда быстрее погружается в курс дела и учится находить решения самостоятельно. Такой способ помогает быстро усвоить большой объем новой информации. Также бизнес- игра является хорошим инструментом для оценки компетенций персонала. процессе игры можно оценить.</p>
+                    <div className="flex flex-col items-center mb-20 max-md:mb-10">
+                        <h2 className='text-3xl max-md:text-2xl mb-6 font-semibold text-slate-800 text-center uppercase'>Бизнес-игры</h2>
+                        <p className='text-center text-lg max-md:text-base max-w-4xl text-slate-700'>Бизнес игры прекрасно моделируют реальный процесс работы в интересной форме. Сотрудник или команда быстрее погружается в курс дела и учится находить решения самостоятельно. Такой способ помогает быстро усвоить большой объем новой информации. Также бизнес- игра является хорошим инструментом для оценки компетенций персонала. процессе игры можно оценить.</p>
                     </div>
                     <RecGame></RecGame>
                 </div>            
             </section>
-            <section className='py-32 bg-[#0E0808] -mb-14'>
+            <section className='py-32 max-md:py-16 max-md:px-3 bg-[#0E0808] max-sm:mb-0 -mb-14'>
                 <div className="container mx-auto">
-                    <h2 className='pb-20 text-3xl mb-1 font-semibold text-white text-center uppercase'>Другие игры</h2>
-                    <div className="flex flex-wrap">
+                    <h2 className='pb-20 max-md:pb-10 text-3xl max-md:text-2xl mb-1 font-semibold text-white text-center uppercase'>Другие игры</h2>
+                    <div className="flex flex-wrap max-sm:flex-col">
                     {games.map(game=>
                             <Game title={game.title} description={game.description} img={game.img} key={game.slug} slug={game.slug}></Game>    
                         )}
diff --git a/src/components/Games/RecGame.jsx b/src/components/Games/RecGame.jsx
index c231bb3..79cd916 100644
--- a/src/components/Games/RecGame.jsx
+++ b/src/components/Games/RecGame.jsx
@@ -5,13 +5,14 @@ import { Link } from 'gatsby';
 
 const RecGame = () => {
     return (
-        <div className="flex px-20 items-center">
-            <StaticImage src="../../images/games/ei.jfif" alt="logo" placeholder="none" className="w-full basis-1/2 rounded-lg mr-5"/>
-            <div className="basis-1/2 ml-5">
-                <h3 className='text-2xl mb-6 font-semibold text-slate-700 uppercase'>Бизнес игра «Эмоциональный интеллект»</h3>
+        <div className="flex max-lg:flex-col px-20 max-lg:px-3 items-center lg:items-start xl:items-center">
+            <StaticImage loading='lazy' src="../../images/games/ei.jfif" alt="logo" placeholder="none" className="max-lg:hidden w-full basis-1/2 rounded-lg mr-5"/>
+            <div className="basis-1/2 ml-5 max-lg:ml-0">
+                <h3 className='text-2xl max-md:text-xl mb-6 font-semibold text-slate-700 uppercase'>Бизнес игра «Эмоциональный интеллект»</h3>
+                <StaticImage loading='lazy' src="../../images/games/ei.jfif" alt="logo" placeholder="none" className="lg:hidden w-full rounded-lg mb-6"/>
                 <p className='mb-5 text-slate-800'><b>Игровая цель</b> – набрать как можно больше баллов и осознать степень развития собственного эмоционального интеллекта.</p>
                 <p className='mb-5 text-slate-800'>Игра основана на подходе Йельского университета к трактовке понятия «Эмоциональный интеллект», которое состоит из 4- х факторов:</p>
-                <ul className='mb-8 list-disc list-inside text-gray-700 leading-8 pl-3'>
+                <ul className='mb-8 list-disc list-inside text-gray-700 leading-8 max-md:leading-7 pl-3'>
                     <li>осознание своих эмоций</li>
                     <li>управление своими эмоциями</li>
                     <li>осознание эмоций других людей</li>
diff --git a/src/components/LegoSP.jsx b/src/components/LegoSP.jsx
index 663832f..f8c787e 100644
--- a/src/components/LegoSP.jsx
+++ b/src/components/LegoSP.jsx
@@ -2,10 +2,10 @@ import React from 'react'
 
 const LegoSP = ({...props}) => {
     return (
-        <section {...props} className='py-32'>
-            <div className="container max-w-5xl mx-auto">
+        <section {...props} className='py-32 max-md:py-16 max-md:px-3'>
+            <div className="container xl:max-w-5xl mx-auto">
                 <div className="flex flex-col text-slate-900 text-base">
-                    <h2 className='text-3xl mb-12 font-semibold text-slate-800 text-center uppercase'>Сессии LEGO SP</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-12 max-md:mb-6 font-semibold text-slate-800 text-center uppercase'>Сессии LEGO SP</h2>
                     <p className='mb-10'><b>Основная цель метода LSP</b> – стимулировать творческое мышление участников, заставить их отключить стереотипность мышления.</p>
                     <p className='mb-10'>В ходе сессии LSP участники «думают руками» – при помощи кирпичиков LEGO отвечают на различные вопросы, связанные с их идеями, проектами, бизнес-моделями, командой или стратегией развития. Тактильные действия включают фантазию на полную мощность при помощи тех участков нашего головного мозга, которые не задействованы только в ходе вербальной речи.</p>
                     <p className="mb-8 font-bold">Результаты сессий LEGO SP:</p>
diff --git a/src/components/Reviews/Review.jsx b/src/components/Reviews/Review.jsx
index 3eea66c..8b41917 100644
--- a/src/components/Reviews/Review.jsx
+++ b/src/components/Reviews/Review.jsx
@@ -1,17 +1,11 @@
 import React from 'react'
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 
-import { FaQuoteLeft } from "react-icons/fa";
 
-const Review = ({text, name, post, company}) => {
+const Review = ({ img }) => {
     return (
-        <div className="h-full border-2 rounded-md p-5 pl-14 border-[#0E0808] relative flex flex-col">
-            <FaQuoteLeft className='text-gray-400 text-lg absolute left-5'/>
-            <p className='flex-grow mb-10'>{text}</p>
-            <div className="flex text-sm leading-5 flex-col items-end text-left">
-                <p>{name}</p>
-                <p>{post}</p>
-                <p>{company}</p>
-            </div>
+        <div className="h-full border-2 rounded-md p-5 border-[#0E0808] relative flex justify-center">
+            <GatsbyImage className='rounded-lg mb-2' loading='lazy' imgClassName="!object-contain" image={getImage(img)} alt="logo" placeholder="none"/>
         </div>
     )
 }
diff --git a/src/components/Reviews/Reviews.jsx b/src/components/Reviews/Reviews.jsx
index 1740e68..24954d8 100644
--- a/src/components/Reviews/Reviews.jsx
+++ b/src/components/Reviews/Reviews.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { useStaticQuery, graphql } from "gatsby"
 import { Autoplay } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -7,25 +8,55 @@ import 'swiper/css/autoplay';
 import Review from './Review';
 
 const Reviews = () => {
-
-    const [reviews, setReviews] = useState([
-        {id: 0, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйц йцвйцв в', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
-        {id: 1, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгйцвйц  вйцвцй в йцвйцв йцв ш йцвв йц йцвгйшц рщв гшпщнйцвнпш гйцвшнпщгйц внпгщ йцнпгвйцв нгпнг йпцвгн пйцгнппйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
-        {id: 2, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
-        {id: 3, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
+    const images = useStaticQuery(graphql`
+    query {
+        img1: file(relativePath: {eq: "reviews/1.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+        img2: file(relativePath: {eq: "reviews/2.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+        img3: file(relativePath: {eq: "reviews/3.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+        img4: file(relativePath: {eq: "reviews/4.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        }
+    }`);
+    const [reviews] = useState([
+        {id: 0, img: images.img1},
+        {id: 1, img: images.img2},
+        {id: 2, img: images.img3},
+        {id: 3, img: images.img4},
     ])
 
     return (
-        <section className='py-24'>
+        <section className='py-24 max-md:py-16 max-md:px-3'>
             <div className="container mx-auto">
-                <h2 className='text-3xl mb-20 font-semibold text-slate-800 text-center uppercase'>Отзывы</h2>
-                <Swiper modules={[Autoplay]} autoplay={true} spaceBetween={50} slidesPerView={3} onSwiper={(swiper) => console.log(swiper)}>
+                <h2 className='text-3xl mb-20 max-md:mb-10 font-semibold text-slate-800 text-center uppercase'>Отзывы</h2>
+                <Swiper modules={[Autoplay]} autoplay={true} spaceBetween={50} slidesPerView={1}
+                    breakpoints={{
+                        640: {
+                            slidesPerView: 2,
+                        },
+                        1024: {
+                            slidesPerView: 3,
+                        },
+                    }}>
                     {reviews.map(review=>
-                        <SwiperSlide className='!h-auto'>
-                            <Review key={review.id} text={review.text} name={review.name} post={review.post} company={review.company}></Review>
+                        <SwiperSlide key={review.id} className='!h-auto'>
+                            <Review key={review.id} img={review.img} ></Review>
                         </SwiperSlide>
                     )}
-            </Swiper>
+                </Swiper>
             </div>
         </section>
     )
diff --git a/src/components/Team/Person.jsx b/src/components/Team/Person.jsx
index 97afe54..11d192b 100644
--- a/src/components/Team/Person.jsx
+++ b/src/components/Team/Person.jsx
@@ -3,13 +3,13 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 
 const Person = ({name, post, img}) => {
     return (
-        <div className='flex p-6 flex-col basis-1/4 relative h-[550px] mr-6 [&:nth-child(4n+4)]:mr-0'>
+        <div className='flex p-6 flex-col basis-1/4 max-sm:basis-auto max-lg:basis-[calc(50%-16px)] max-lg:mb-6 relative h-[550px] max-sm:h-[450px] mr-6 max-lg:mr-4 max-sm:mr-0 sm:max-lg:[&:nth-child(2n+2)]:mr-0 [&:nth-child(4n+4)]:mr-0'>
             <div className="h-full flex flex-col justify-end max-w-s z-20">
                 <h3 className='text-xl text-white mb-3'>{name}</h3>
                 <p className='text-base text-white whitespace-pre-wrap'>{post}</p>
             </div>
             <div className="absolute top-0 left-0 h-full before:absolute before:bg-black before:h-full before:w-full before:top-0 before:left-0 before:z-10 before:rounded-lg before:opacity-25">
-                <GatsbyImage className='h-full rounded-lg mb-2 object-cover' image={getImage(img)} alt="logo" placeholder="none"/>
+                <GatsbyImage loading='lazy' className='h-full rounded-lg mb-2 object-cover' image={getImage(img)} alt="logo" placeholder="none"/>
             </div>
         </div>
     )
diff --git a/src/components/Team/Team.jsx b/src/components/Team/Team.jsx
index 4b27a0d..2cb729b 100644
--- a/src/components/Team/Team.jsx
+++ b/src/components/Team/Team.jsx
@@ -29,7 +29,7 @@ const Team = ({...props}) => {
         },
     }`);
 
-    const [persons, setPersons] = useState([
+    const [persons] = useState([
         {id: 1, name: 'Алексей Красавин', post: 'Инвестор идей💡.\nПродюсер корпоративных мероприятий.', img: images.krasavin},
         {id: 2, name: 'Мария Ровенская - Тарасова ', post: 'Менеджер крутых проектов, Методолог игр.', img: images.rovenskaya},
         {id: 3, name: 'Алёна Крюкова', post: 'Фасилитатор, бизнес -тренер, игротехник, разработчик корпоративных мероприятий.', img: images.kryukova},
@@ -37,10 +37,10 @@ const Team = ({...props}) => {
     ]);
 
     return (
-        <section {...props} className='py-32 bg-[#0E0808]'>
+        <section {...props} className='py-32 max-md:py-16 max-md:px-3 bg-[#0E0808]'>
             <div className="container mx-auto">
-                <h2 className='text-3xl mb-12 font-semibold text-white text-center uppercase'>Наша команда</h2>
-                <div className="flex">
+                <h2 className='text-3xl max-md:text-2xl mb-12 max-md:mb-6 font-semibold text-white text-center uppercase'>Наша команда</h2>
+                <div className="flex max-sm:flex-col sm:max-lg:flex-wrap">
                     {persons.map(person=>
                         <Person key={person.id} name={person.name} post={person.post} img={person.img}></Person> 
                     )}
diff --git a/src/components/Teambuilding/Example/Example.jsx b/src/components/Teambuilding/Example/Example.jsx
index 33b36aa..6062d3c 100644
--- a/src/components/Teambuilding/Example/Example.jsx
+++ b/src/components/Teambuilding/Example/Example.jsx
@@ -39,7 +39,7 @@ const Example = () => {
         },
     }`);
 
-    const [examples, setExamples] = useState([
+    const [examples] = useState([
         {id: 1, title: 'Веревочный курс', img: images.hero1},
         {id: 2, title: 'Тематический «Форд Боярд» ', img: images.hero1},
         {id: 3, title: 'Творческий', img: images.hero1},
@@ -53,8 +53,8 @@ const Example = () => {
     ]);
 
     return (
-        <section className='pt-32 bg-[#0E0808]'>
-            <h2 className='text-3xl mb-20 font-semibold text-white text-center uppercase'>Примеры тимбилдингов</h2>
+        <section className='pt-32 max-md:pt-16 bg-[#0E0808]'>
+            <h2 className='text-3xl max-md:text-2xl mb-20 max-md:mb-10 font-semibold text-white text-center uppercase'>Примеры тимбилдингов</h2>
             <div className="flex flex-wrap">
                 {examples.map(example =>
                     <Image key={example.id} title={example.title} image={example.img}></Image>
diff --git a/src/components/Teambuilding/Example/Image.jsx b/src/components/Teambuilding/Example/Image.jsx
index ebd32cd..0089cc5 100644
--- a/src/components/Teambuilding/Example/Image.jsx
+++ b/src/components/Teambuilding/Example/Image.jsx
@@ -3,9 +3,9 @@ import { getImage } from 'gatsby-plugin-image';
 
 const Image = ({title, image}) => {
     return (
-        <div className="flex basis-1/5 h-64 overflow-hidden">
+        <div className="flex basis-1/5 max-lg:basis-1/2 h-64 max-md:h-44 max-2xl:h-60 overflow-hidden">
             <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 w-full bg-cover bg-center hover:scale-105 duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] ">
-                <h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
+                <h3 className='transition uppercase text-white font-medium text-center max-md:text-sm'>{title}</h3>
             </div>
         </div>
     )
diff --git a/src/components/Teambuilding/Main.jsx b/src/components/Teambuilding/Main.jsx
index 089bdc1..9eb0277 100644
--- a/src/components/Teambuilding/Main.jsx
+++ b/src/components/Teambuilding/Main.jsx
@@ -2,10 +2,10 @@ import React from 'react'
 
 const Main = ({props}) => {
     return (
-        <section {...props} className='py-32'>
-            <div className="container max-w-6xl mx-auto">
+        <section {...props} className='py-32 max-md:py-16 max-md:px-3'>
+            <div className="container xl:max-w-6xl mx-auto">
                 <div className="flex flex-col text-slate-900 text-base">
-                    <h2 className='text-3xl mb-12 font-semibold text-slate-800 text-center uppercase'>Корпоративные мероприятия: Тимбилдинг/ Квесты</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-12 max-md:mb-6 font-semibold text-slate-800 text-center uppercase'>Корпоративные мероприятия: Тимбилдинг/ Квесты</h2>
                     <p className='mb-5'>Грамотное составление программы психологических тренингов является одним из основополагающих этапов в правильном командообразовании. Невозможно достичь успешных результатов тимбилдинга, если программа мероприятия не продумана или же составлена не профессионалами.</p>
                     <p className='mb-5'>Игра, тренинг и другие интерактивные мероприятия основываются на принципах психологии, без которой трудно представить качественное и результативное управление персоналом.</p>
                     <p className='font-medium mb-2'>Целевая аудитория тимбилдинга:</p>
diff --git a/src/components/UI/Input.jsx b/src/components/UI/Input.jsx
index 5638c8e..01e4c19 100644
--- a/src/components/UI/Input.jsx
+++ b/src/components/UI/Input.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import uniqid from 'uniqid';
 
-const Input = ({ className, label, ...props }) => {
+const Input = ({ className, label, labelClasses, ...props }) => {
 
     const uid = uniqid();
 
     return (
         <div className='flex flex-col'>
             {label &&
-                <label className='mb-3 text-white ' htmlFor={uid}>{label}</label>
+                <label className={'mb-3 text-white ' + labelClasses} htmlFor={uid}>{label}</label>
             }
             <input id={uid} className={['bg-white rounded-md py-3 px-5 text-base text-gray-800', className].join(' ')} {...props} type="text" />
         </div>
diff --git a/src/components/UI/Textarea.jsx b/src/components/UI/Textarea.jsx
index 262e67f..685fb14 100644
--- a/src/components/UI/Textarea.jsx
+++ b/src/components/UI/Textarea.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import uniqid from 'uniqid';
 
-const Textarea = ({ className, label, ...props }) => {
+const Textarea = ({ className, label, labelClasses, ...props }) => {
 
     const uid = uniqid();
 
     return (
         <div className='flex flex-col w-full'>
             {label &&
-                <label className='mb-3 text-white ' htmlFor={uid}>{label}</label>
+                <label className={'mb-3 text-white ' + labelClasses} htmlFor={uid}>{label}</label>
             }
             <textarea id={uid} className={['bg-white rounded-md py-2.5 px-5 text-base text-gray-800', className].join(' ')} {...props}></textarea>
         </div>
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
index 7698e4b..33d74e5 100644
--- a/src/components/footer.jsx
+++ b/src/components/footer.jsx
@@ -11,22 +11,22 @@ const Footer = ({menu}) => {
     return(
         <footer className="bg-[#0E0808] flex flex-col w-full">
             <div className="bg-black h-12 w-full"></div>
-            <div className="container mx-auto flex flex-col py-16">
-                <div className="flex items-center justify-between border-b-[1px] border-white pb-10">
-                    <AnchorLink smooth={true} className="cursor-pointer" to="hero"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-20"/></AnchorLink>
-                    {location.pathname === '/'
+            <div className="container mx-auto flex flex-col py-16 max-md:px-3">
+                <div className="flex max-md:flex-col items-center justify-between border-b-[1px] border-white pb-10">
+                    <AnchorLink smooth={true} className="cursor-pointer max-md:mb-5" to="hero"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-20"/></AnchorLink>
+                    {location.pathname === '/' && !menu
                     ?
-                    <ul className='flex items-center'>
-                        <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
-                        <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Услуги</AnchorLink></li>
-                        <li className="mr-12 text-white text-sm"><a href="#"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></a></li>
+                    <ul className='flex max-md:flex-col items-center'>
+                        <li className="mr-12 max-md:mr-0 max-md:leading-7 text-white text-sm"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
+                        <li className="mr-12 max-md:mr-0 max-md:leading-7 text-white text-sm"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Услуги</AnchorLink></li>
+                        <li className="mr-12 max-md:mr-0 max-md:leading-7 text-white text-sm"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
                         <li className="text-white text-sm"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                     </ul>
                     :
-                    <ul className='flex items-center last:[&>li]:mr-0'>
-                        <li className="mr-12 text-white text-sm"><Link to="/">Главная</Link></li>
+                    <ul className='flex max-md:flex-col items-center last:[&>li]:mr-0'>
+                        <li className="mr-12 max-md:mr-0 max-lg:mr-5 max-md:leading-7 text-white text-sm"><Link to="/">Главная</Link></li>
                         {menu.map(item=>
-                            <li key={item.id} className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
+                            <li key={item.id} className="mr-12 max-md:mr-0 max-lg:mr-5 max-md:leading-7 text-white text-sm"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                         )}
                     </ul>
                     }
diff --git a/src/components/header.jsx b/src/components/header.jsx
index b97c652..d806c3a 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -43,7 +43,7 @@ const Header = ({ menu }) => {
                     <Link to="/" className="max-md:hidden"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-8 mr-5"/></Link>
                     <a href="tel:+79200745505" className="text-white text-xs max-md:text-xl max-md:mb-12">8 (920) 074 55-05</a>
                 </div>
-                {location.pathname === '/'
+                {location.pathname === '/' && !menu
                     ?
                     <ul className='flex items-center max-md:flex-col'>
                         <li className="mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
@@ -60,10 +60,10 @@ const Header = ({ menu }) => {
                         <li className="text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                     </ul>
                     :
-                    <ul className='flex items-center last:[&>li]:mr-0'>
-                        <li className="mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3"><Link to="/">Главная</Link></li>
+                    <ul className='flex items-center max-md:flex-col last:[&>li]:mr-0'>
+                        <li className="mr-12 max-md:mr-0 max-lg:mr-5 text-white text-xs max-md:text-lg max-md:mb-3"><Link to="/">Главная</Link></li>
                         {menu.map(item=>
-                            <li key={item.id} className="mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
+                            <li key={item.id} className="mr-12 max-md:mr-0 max-lg:mr-5 text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                         )}
                     </ul>
                 }
diff --git a/src/components/layout.jsx b/src/components/layout.jsx
index c0c3cfd..3b89b6d 100644
--- a/src/components/layout.jsx
+++ b/src/components/layout.jsx
@@ -29,7 +29,7 @@ const Layout = ({menu, children }) => {
             <div>
                 <main>{children}</main>
             </div>
-            {/*<Footer menu={menu}></Footer>*/}
+            <Footer menu={menu}></Footer>
         </>
     )
 }
diff --git a/src/images/reviews/1.jpg b/src/images/reviews/1.jpg
new file mode 100644
index 0000000..0fe3a4e
Binary files /dev/null and b/src/images/reviews/1.jpg differ
diff --git a/src/images/reviews/2.jpg b/src/images/reviews/2.jpg
new file mode 100644
index 0000000..fd5c323
Binary files /dev/null and b/src/images/reviews/2.jpg differ
diff --git a/src/images/reviews/3.jpg b/src/images/reviews/3.jpg
new file mode 100644
index 0000000..1a15038
Binary files /dev/null and b/src/images/reviews/3.jpg differ
diff --git a/src/images/reviews/4.jpg b/src/images/reviews/4.jpg
new file mode 100644
index 0000000..34a5aaa
Binary files /dev/null and b/src/images/reviews/4.jpg differ
diff --git a/src/pages/404.js b/src/pages/404.js
index bd7de99..8fe7f26 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,13 +1,12 @@
 import * as React from "react"
 
-import Layout from "../components/layout"
 import Seo from "../components/seo"
 
 const NotFoundPage = () => (
-  <Layout>
+  <>
     <h1>404: Not Found</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
+  </>
 )
 
 export const Head = () => <Seo title="404: Not Found" />
diff --git a/src/pages/games/challenge-accepted.jsx b/src/pages/games/challenge-accepted.jsx
index 6032d0f..eed190f 100644
--- a/src/pages/games/challenge-accepted.jsx
+++ b/src/pages/games/challenge-accepted.jsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { Link } from "gatsby"
 import { StaticImage } from "gatsby-plugin-image"
 import Layout from "../../components/layout"
 import Seo from "../../components/seo"
@@ -7,9 +6,9 @@ import Hero from "../../components/Games/GamePage/Hero";
 import Contact from "../../components/Contact"
 import { useStaticQuery, graphql } from "gatsby"
 
-const CAPage = ({data}) => {
+const CAPage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Описание', to: 'description'},
         {id: 1, title: 'Цели', to: 'purposes'},
         {id: 2, title: 'Компетенции', to: 'competentions'},
@@ -28,28 +27,28 @@ const CAPage = ({data}) => {
     return(
         <Layout menu={menu}>
             <Hero title="Вызов принят" img={image.img} time='1,5-3 часа' formats='офлайн (настольная игра)' members="4-6 человек за 1 игровым столом."></Hero>
-            <section className="py-28" id="description">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="description">
                 <div className="container mx-auto text-slate-900 text-base max-w-6xl">
-                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-10 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
                     <p className='mb-8'>Участники выступают в качестве руководителей региональных отделений одной компании в разных городах. Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами. Успех  будет зависеть от правильности распределения задач, подбора сотрудников для их выполнения, выбора стиля руководства. Главным ресурсом справедливо выступают компетентность и мотивированность персонала, которые преобразовываются в производимую работу, могут увеличиваться в процессе обучения и действий руководителя, а также под воздействием «внешних событий».</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="purposes">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="purposes">
                 <div className="container mx-auto text-white text-base max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Цели игры</h2>
-                    <div className="flex justify-between items-center">
+                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'>Цели игры</h2>
+                    <div className="flex justify-between items-center max-md:flex-col">
                         <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
                             <li className="mb-1">Освоение модели ситуационного руководства Херси-Бланшара</li>
                             <li className="mb-1">Практическое прохождение в игровой обстановке управленческого цикла</li>
                             <li>Проработка инструмента «дерево целей». </li>
                         </ol>
-                        <StaticImage className="w-1/2" src="../../images/games/call-accepted2.jpg"></StaticImage>
+                        <StaticImage className="w-1/2 max-md:w-full" alt="challenge-accepted" src="../../images/games/call-accepted2.jpg"></StaticImage>
                     </div>
                 </div>
             </section>
-            <section className="py-28" id="competentions">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="competentions">
                 <div className="container mx-auto text-slate-900 text-base max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Отрабатываемые компетенции</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Отрабатываемые компетенции</h2>
                     <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                         <li className="mb-1">Постановка задач и планирование </li>
                         <li className="mb-1">Управление персоналом (подбор, стиль управления, мотивация, ОС)</li>
@@ -58,9 +57,9 @@ const CAPage = ({data}) => {
                     </ul>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="advantages">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="advantages">
                 <div className="container mx-auto text-white text-base max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Преимущества игры</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'>Преимущества игры</h2>
                     <ol className='mb-8 list-disc list-inside leading-normal mr-5'>
                         <li className="mb-1">Может использоваться как итоговая (диагностическая) или интегрироваться в обучение управленцев.</li>
                         <li className="mb-1">При параллельном проведении за несколькими столами возможно моделирование конкуренции и отработка управления «распределенным проектом».</li>
@@ -68,9 +67,9 @@ const CAPage = ({data}) => {
                     </ol>
                 </div>
             </section>
-            <section className="py-28 bg" id="auditory">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg" id="auditory">
                 <div className="container mx-auto text-slate-900 text-base max-w-5xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Целевая аудитория</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Целевая аудитория</h2>
                     <ol className='mb-8 list-decimal list-inside leading-normal'>
                         <li className="mb-1">Руководители всех уровней</li>
                         <li className="mb-1">Кадровые резервисты на руководителей</li>
diff --git a/src/pages/games/emotional-intelligence.jsx b/src/pages/games/emotional-intelligence.jsx
index f553c64..7c52c94 100644
--- a/src/pages/games/emotional-intelligence.jsx
+++ b/src/pages/games/emotional-intelligence.jsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { Link } from "gatsby"
 import { StaticImage } from "gatsby-plugin-image"
 import Layout from "../../components/layout"
 import Seo from "../../components/seo"
@@ -7,9 +6,9 @@ import Hero from "../../components/Games/GamePage/Hero";
 import Contact from "../../components/Contact"
 import { useStaticQuery, graphql } from "gatsby"
 
-const EIPage = ({data}) => {
+const EIPage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Описание', to: 'description'},
         {id: 1, title: 'Методология', to: 'metodology'},
         {id: 2, title: 'Механика и цели', to: 'mechanic'},
@@ -24,21 +23,20 @@ const EIPage = ({data}) => {
             }
         },
     }`);
-    console.log(image);
     return(
         <Layout menu={menu}>
             <Hero title="Эмоциональный интеллект" img={image.img} time='2,5-3 часа' formats='онлайн'></Hero>
-            <section className="py-28" id="description">
-                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
-                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
+            <section className="py-28 max-md:py-16 max-md:px-3" id="description">
+                <div className="container mx-auto text-slate-900 text-base xl:max-w-6xl">
+                    <h2 className='text-3xl max-md:text-2xl mb-10 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
                     <p className='mb-8'>Эмоции – самые быстрые механизмы принятия решений. Не принимать решений в эмоциях - очень разумный совет. Но умение эффективно использовать для принятия решений информацию, которую дают именно эмоции, отличает успешных людей. Это умение определяется <b>эмоциональным интеллектом</b> – четко определяемой и измеряемой способностью перерабатывать информацию, содержащуюся в эмоциях, определять значение эмоций, их связи друг с другом, использовать эмоциональную информацию в качестве основы для мышления и принятия решений.</p>
                     <p>Высокий эмоциональный интеллект ведет к социальному успеху и гармоничной жизни. Но сам собой он не возникнет. Его важно развивать. Эмоциональный интеллект развивается медленно. В жизни это как правило болезненно и затратно, сопряжено с рисками. Игра – лучшее средство для этого. В игре это быстро и безопасно, легко и весело.</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="metodology">
-                <div className="container mx-auto text-white text-base max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Основная методология</h2>
-                    <StaticImage className="w-1/2 float-right" src="../../images/games/ei2.jpg"></StaticImage>
+            <section className="py-28 max-md:py-16 bg-[#0E0808] max-md:px-3" id="metodology">
+                <div className="container mx-auto text-white text-base xl:max-w-6xl">
+                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'>Основная методология</h2>
+                    <StaticImage className="w-1/2 float-right" alt="emotional-intelligence" src="../../images/games/ei2.jpg"></StaticImage>
                     <p className='mb-8'>Игра основана на подходе Йельского университета к трактовке понятия «Эмоциональный интеллект», которое состоит из 4- х факторов:</p>
                     <p className="mb-8">Высокий эмоциональный интеллект ведет к социальному успеху и гармоничной жизни. Но сам собой он не возникнет. Его важно развивать. Эмоциональный интеллект развивается медленно. В жизни это как правило болезненно и затратно, сопряжено с рисками. Игра – лучшее средство для этого. В игре это быстро и безопасно, легко и весело.</p>
                     <ol className='mb-8 list-decimal list-inside leading-normal'>
@@ -60,10 +58,10 @@ const EIPage = ({data}) => {
                     <p className="mb-8">В среднем период распада гомонов в крови составляет 4-6 минут. И пока гормон есть в крови, человек, как биологическое существо, испытывает ту или иную эмоцию. Поскольку человек обладает способностью мыслить, то мысль встраивается в процесс эмоций. И тогда, изменяя мысли, мы можем изменить и наши эмоции.</p>
                 </div>
             </section>
-            <section className="py-28" id="mechanic">
-                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Игровая механика и цели</h2>
-                    <StaticImage className="w-1/2 float-right" src="../../images/games/ei3.jpg"></StaticImage>
+            <section className="py-28 max-md:py-16 max-md:px-3" id="mechanic">
+                <div className="container mx-auto text-slate-900 text-base xl:max-w-6xl">
+                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Игровая механика и цели</h2>
+                    <StaticImage className="w-1/2 float-right" src="../../images/games/ei3.jpg" alt="emotional-intelligence"></StaticImage>
                     <p className='mb-8'><b>Игровая цель</b> – набрать как можно больше баллов и осознать степень развития собственного эмоционального интеллекта.</p>
                     <p className="mb-8">Поскольку это игра-тренажер, то есть и учебные цели:</p>
                     <ol className='mb-8 list-decimal list-inside leading-normal'>
@@ -75,9 +73,9 @@ const EIPage = ({data}) => {
                     <p className="mb-8">Игроки получают баллы только за конструктивные решения и юмор. Это дает быструю смену установки на поиск решений, что на наш взгляд, так важно для бизнеса и жизни.</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="auditory">
-                <div className="container mx-auto text-white text-base max-w-5xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Целевая аудитория</h2>
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="auditory">
+                <div className="container mx-auto text-white text-base xl:max-w-5xl">
+                    <h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'>Целевая аудитория</h2>
                     <ol className='mb-8 list-decimal list-inside leading-normal'>
                         <li>Руководителям, которые хотят быть вдохновляющими лидерами и успешными наставниками для своих подчиненных</li>
                         <li>Компаниям, которые повышают эмоциональную компетентность своих сотрудников.</li>
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index a2b2cf3..3bd9b90 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,6 +1,4 @@
 import * as React from "react"
-import { Link } from "gatsby"
-import { StaticImage } from "gatsby-plugin-image"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 import Hero from "../components/Hero"
@@ -15,12 +13,12 @@ import Reviews from "../components/Reviews/Reviews"
 import Contact from "../components/Contact"
 
 const IndexPage = ({data}) => {
-    return(
+    return (
         <Layout>
             <Hero id='hero'></Hero>
             <Advantages id='advantages'></Advantages>
             <About id='about'></About>
-            {/*<Games id='games'></Games>
+            <Games id='games'></Games>
             <Facilitations.Main id='facilitations'></Facilitations.Main>
             <Facilitations.Example></Facilitations.Example>
             <Teambuilding.Main id='teambuilding'></Teambuilding.Main>
@@ -28,7 +26,7 @@ const IndexPage = ({data}) => {
             <LegoSP id="legosp"></LegoSP>
             <Team id="team"></Team>
             <Reviews></Reviews>
-            <Contact id="contacts"></Contact>*/}
+            <Contact id="contacts"></Contact>
         </Layout>
     )
 
diff --git a/src/pages/using-ssr.js b/src/pages/using-ssr.js
deleted file mode 100644
index f89080d..0000000
--- a/src/pages/using-ssr.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from "react"
-import { Link } from "gatsby"
-
-import Layout from "../components/layout"
-import Seo from "../components/seo"
-
-const UsingSSR = ({ serverData }) => {
-  return (
-    <Layout>
-      <h1>
-        This page is <b>rendered server-side</b>
-      </h1>
-      <p>
-        This page is rendered server side every time the page is requested.
-        Reload it to see a(nother) random photo from{" "}
-        <code>dog.ceo/api/breed/shiba/images/random</code>:
-      </p>
-      <img
-        style={{ width: "320px", borderRadius: "var(--border-radius)" }}
-        alt="A random dog"
-        src={serverData.message}
-      />
-      <p>
-        To learn more, head over to our{" "}
-        <a href="https://www.gatsbyjs.com/docs/reference/rendering-options/server-side-rendering/">
-          documentation about Server Side Rendering
-        </a>
-        .
-      </p>
-      <Link to="/">Go back to the homepage</Link>
-    </Layout>
-  )
-}
-
-export const Head = () => <Seo title="Using SSR" />
-
-export default UsingSSR
-
-export async function getServerData() {
-  try {
-    const res = await fetch(`https://dog.ceo/api/breed/shiba/images/random`)
-    if (!res.ok) {
-      throw new Error(`Response failed`)
-    }
-    return {
-      props: await res.json(),
-    }
-  } catch (error) {
-    return {
-      status: 500,
-      headers: {},
-      props: {},
-    }
-  }
-}
diff --git a/src/pages/using-typescript.tsx b/src/pages/using-typescript.tsx
deleted file mode 100644
index d725acf..0000000
--- a/src/pages/using-typescript.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// If you don't want to use TypeScript you can delete this file!
-import * as React from "react"
-import { PageProps, Link, graphql, HeadFC } from "gatsby"
-
-import Layout from "../components/layout"
-import Seo from "../components/seo"
-
-type DataProps = {
-  site: {
-    buildTime: string
-  }
-}
-
-const UsingTypescript: React.FC<PageProps<DataProps>> = ({
-  data,
-  location,
-}) => (
-  <Layout>
-    <h1>
-      Gatsby supports <b>TypeScript by default</b>
-    </h1>
-    <p>
-      This means that you can create and write <code>.ts/.tsx</code> files for
-      your pages, components, and <code>gatsby-*</code> configuration files (for
-      example <code>gatsby-config.ts</code>).
-    </p>
-    <p>
-      For type checking you'll want to install <code>typescript</code> via npm
-      and run <code>tsc --init</code> to create a <code>tsconfig</code> file.
-    </p>
-    <p>
-      You're currently on the page <code>{location.pathname}</code> which was
-      built on {data.site.buildTime}.
-    </p>
-    <p>
-      To learn more, head over to our{" "}
-      <a href="https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/">
-        documentation about TypeScript
-      </a>
-      .
-    </p>
-    <Link to="/">Go back to the homepage</Link>
-  </Layout>
-)
-
-export const Head: HeadFC<DataProps> = () => <Seo title="Using TypeScript" />
-
-export default UsingTypescript
-
-export const query = graphql`
-  {
-    site {
-      buildTime(formatString: "YYYY-MM-DD hh:mm a z")
-    }
-  }
-`