diff --git a/README.md b/README.md
index ac6969f..a85282d 100644
--- a/README.md
+++ b/README.md
@@ -19,11 +19,12 @@ Talent Team - разработка корпоративных мероприят
 - Добавлен description для сайта.
 - Блок "Создание электронных курсов" за менен на другой блок - "Сессии Lego SP".
 - Для мобильной и планшетной версии созданно Burger меню.
-- Полностью адаптирована главная страница, а также страницы игр "Эмоциональный интеллект", "Вызов принят".
-- На главной странице, а также страницах игр "Эмоциональный интеллект", "Вызов принят" исправленны все ошибки и варнинги в консоли.
+- Полностью адаптированы все страницы.
+- На всех страницах исправленны все ошибки и варнинги в консоли.
 - Добавлен Lazy loading на изображения.
-- Отзывы замененны на благодарственные письма.
-
+- Отзывы заменены на благодарственные письма.
+- Пункты меню в Header и Footer теперь меняют цвет при наведении.
+- Исправлен баг из-за которого при нажатии на пункты в бургер меню, само меню не закрывалось. (баг с pre0.3_4)
 
 #### V 0.2
 - Добавлен блоки "Связаться с нами" и Футер сайта
diff --git a/src/components/About.jsx b/src/components/About.jsx
index ae40c9e..d63ae25 100644
--- a/src/components/About.jsx
+++ b/src/components/About.jsx
@@ -15,7 +15,7 @@ const About = ({...props}) => {
                     <p className='mb-5 max-md:mb-4 max-md:text-sm'>Мы убеждены, что каждое проводимое корпоративное мероприятие должны быть максимально полезны, придерживаясь главной цели – это развитие персонала. Ведь, развивая персонал, мы открываем для бизнеса новые возможности.</p>
                 </div>
                 <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>
+                    <iframe className='w-full h-[500px] max-sm:h-[250px] max-md:h-[350px] mb-7 rounded-lg' src="https://www.youtube-nocookie.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>
             </div>
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
index 6d1c5a5..d2d9f73 100644
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -11,12 +11,12 @@ const Contact = ({white, ...props}) => {
                 <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>
+                        <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 labelClasses={white ? 'text-black' : null} 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/Games/GamePage/Hero.jsx b/src/components/Games/GamePage/Hero.jsx
index bc8d394..8d0217a 100644
--- a/src/components/Games/GamePage/Hero.jsx
+++ b/src/components/Games/GamePage/Hero.jsx
@@ -8,11 +8,14 @@ const Hero = ({title, img, time, members, formats}) => {
             <div className="mr-0 relative h-full flex items-center bg-gray-50">
                 <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>
+                    {(time || members || formats) &&
+                        <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 max-sm:text-sm text-slate-800"><AiOutlineClockCircle/>: {time}</p>}
+                            {members && <p className="flex mr-4 items-center text-lg max-sm:text-sm text-slate-800"><AiOutlineTeam/>: {members}</p>}
+                            {formats && <p className="max-sm:text-sm"><b>Доступные форматы:</b> {formats}</p>}
+                        </div>
+                    }
+                    
                 </div>
                 <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"/>
diff --git a/src/components/Games/RecGame.jsx b/src/components/Games/RecGame.jsx
index 79cd916..0252289 100644
--- a/src/components/Games/RecGame.jsx
+++ b/src/components/Games/RecGame.jsx
@@ -6,10 +6,10 @@ import { Link } from 'gatsby';
 const RecGame = () => {
     return (
         <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"/>
+            <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"/>
+                <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 max-md:leading-7 pl-3'>
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
index 33d74e5..74005a5 100644
--- a/src/components/footer.jsx
+++ b/src/components/footer.jsx
@@ -17,23 +17,23 @@ const Footer = ({menu}) => {
                     {location.pathname === '/' && !menu
                     ?
                     <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>
+                        <li className="mr-12 max-md:mr-0 max-md:leading-7 text-white hover:text-gray-400 transition-colors 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 hover:text-gray-400 transition-colors 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 hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
+                        <li className="text-white hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                     </ul>
                     :
                     <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>
+                        <li className="mr-12 max-md:mr-0 max-lg:mr-5 max-md:leading-7 text-white hover:text-gray-400 transition-colors text-sm"><Link to="/">Главная</Link></li>
                         {menu.map(item=>
-                            <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>
+                            <li key={item.id} className="mr-12 max-md:mr-0 max-lg:mr-5 max-md:leading-7 text-white hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                         )}
                     </ul>
                     }
                 </div>
                 <div className="flex mt-8 justify-between">
                     <p className="text-white text-sm">© {new Date().getFullYear()} TalentTeam</p>
-                    <a href="tel:+79200745505" className="text-white">8 (920) 074 55-05</a>
+                    <a href="tel:+79200745505" className="text-white hover:text-gray-400 transition-colors">8 (920) 074 55-05</a>
                 </div>
             </div>
         </footer>
diff --git a/src/components/header.jsx b/src/components/header.jsx
index d806c3a..9940924 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -31,6 +31,13 @@ const Header = ({ menu }) => {
         }
     }
 
+    const menuHandler = () => {
+        if(burgerMenu) {
+            setBurgerMenu(0);
+            enableBodyScroll(document.body);
+        }
+    }
+
     useEffect(() => {
         if(location.pathname === '/') {
             setMenuH(ref.current.scrollHeight);
@@ -41,35 +48,35 @@ const Header = ({ menu }) => {
             <nav className={burgerMenu ? menuGeneralClasses + " max-md:h-screen max-md:translate-y-0" : menuGeneralClasses + " max-md:h-0 max-md:-translate-y-full"}>
                 <div className="flex items-center">
                     <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>
+                    <a href="tel:+79200745505" className="text-white hover:text-gray-400 transition-colors text-xs max-md:text-xl max-md:mb-12">8 (920) 074 55-05</a>
                 </div>
                 {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>
+                        <li className="mr-12 max-md:mr-0 text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="about" smooth={true} onClick={e=> menuHandler()}>О компании</AnchorLink></li>
                         <li style={{'--menu-h': `${menuH + 65 }px`}} className={"mr-12 max-md:mr-0 text-white text-xs max-md:text-lg max-md:mb-3 relative [&>.drop-menu]:hover:h-[var(--menu-h)]"}>
                             <p className="cursor-pointer">Услуги</p>
                             <ul ref={ref} className="absolute flex flex-col justify-center drop-menu bg-black px-4 -left-3 h-0 overflow-hidden transition-all">
-                                <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Бизнес-игры</AnchorLink></li>
-                                <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="facilitations" smooth={true}>Фасилитации</AnchorLink></li>
-                                <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="teambuilding" smooth={true}>Тимбилдинг</AnchorLink></li>
-                                <li className="mr-0"><AnchorLink className="cursor-pointer" to="legosp" smooth={true}>Lego SP</AnchorLink></li>
+                                <li className="mr-0 mb-2 hover:text-gray-400 transition-colors"><AnchorLink className="cursor-pointer" to="games" smooth={true} onClick={e=> menuHandler()}>Бизнес-игры</AnchorLink></li>
+                                <li className="mr-0 mb-2 hover:text-gray-400 transition-colors"><AnchorLink className="cursor-pointer" to="facilitations" smooth={true} onClick={e=> menuHandler()}>Фасилитации</AnchorLink></li>
+                                <li className="mr-0 mb-2 hover:text-gray-400 transition-colors"><AnchorLink className="cursor-pointer" to="teambuilding" smooth={true} onClick={e=> menuHandler()}>Тимбилдинг</AnchorLink></li>
+                                <li className="mr-0 hover:text-gray-400 transition-colors"><AnchorLink className="cursor-pointer" to="legosp" smooth={true} onClick={e=> menuHandler()}>Lego SP</AnchorLink></li>
                             </ul>
                         </li>
-                        <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="team" smooth={true}>Наша команда</AnchorLink></li>
-                        <li className="text-white text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
+                        <li className="mr-12 max-md:mr-0 text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="team" smooth={true} onClick={e=> menuHandler()}>Наша команда</AnchorLink></li>
+                        <li className="text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to="contacts" smooth={true} onClick={e=> menuHandler()}>Контакты</AnchorLink></li>
                     </ul>
                     :
                     <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>
+                        <li className="mr-12 max-md:mr-0 max-lg:mr-5 text-white hover:text-gray-400 transition-colors 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 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>
+                            <li key={item.id} className="mr-12 max-md:mr-0 max-lg:mr-5 text-white hover:text-gray-400 transition-colors text-xs max-md:text-lg max-md:mb-3"><AnchorLink className="cursor-pointer" to={item.to} smooth={true} onClick={e=> menuHandler()}>{item.title}</AnchorLink></li>
                         )}
                     </ul>
                 }
             </nav>
             <div className="md:hidden">
-                <a href="tel:+79200745505" className="text-white text-md">8 (920) 074 55-05</a>
+                <a href="tel:+79200745505" className="text-white hover:text-gray-400 transition-colors text-md">8 (920) 074 55-05</a>
             </div>
             <div className="md:hidden cursor-pointer" role="presentation" onClick={e=> burgerActivation()} onKeyDown={e=> this.handleKeyDown}>
                 <div className={burgerMenu ? burgerGeneralClasses + ' before:rotate-45 before:top-0 after:-rotate-45 after:bottom-[3px]' : burgerGeneralClasses + ' before:top-[7px] after:bottom-[10px]'}></div>
diff --git a/src/pages/games/8-colors-delegation.jsx b/src/pages/games/8-colors-delegation.jsx
index 6754776..4400bc3 100644
--- a/src/pages/games/8-colors-delegation.jsx
+++ b/src/pages/games/8-colors-delegation.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 EightColorsDelegationPage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Описание', to: 'description'},
         {id: 1, title: 'Цели', to: 'purpose'},
         {id: 2, title: 'Аудитория', to: 'auditory'},
@@ -26,17 +25,17 @@ const CAPage = ({data}) => {
     return(
         <Layout menu={menu}>
             <Hero title='8 цветов делегирования' img={image.img} time='4-8 часов' formats='офлайн' members='от 12 до 100 чел'></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'><b>«8 ЦВЕТОВ ДЕЛЕГИРОВАНИЯ»</b> – деловая обучающая игра-тренажёр, которая познакомит с 7 уровнями передачи полномочий по модели Юргена Аппело (Jurgen Appelo, 2010г). Понятие относится к концепции Менеджмент 3.0 ― agile-подходу в бизнесе, позволяющему адаптировать менеджмент к гибкому мышлению, позволить сотрудникам раскрыть способности, и благодаря этому совершить прорыв в эффективности работы отдельных людей, команд и самих руководителей. </p>
                     <p>Делегирование – важный навык, без которого работа менеджера теряет ценность. От обычного распределения задач делегирование отличается тем, что руководитель передаёт часть своих обязанностей и связанных с ними ресурсов и полномочий, чтобы сфокусироваться на чём-то более сложном и важном. Но зачастую начинающий управленец оказывается не в состоянии быстро перейти от статуса «я делаю все сам» до «все делают другие» именно в части передачи полномочий. 7-уровневая модель делегирования Юргена Аппело позволяет сделать этот переход понятным и безболезненным, как для руководителя, так и для сотрудников, и для бизнеса. </p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="purpose">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="purpose">
                 <div className="container mx-auto text-white text-base max-w-6xl">
-                    <h2 className='text-3xl mb-12 font-semibold text-white text-center uppercase'>Цель игры</h2>
-                    <div className="flex justify-between">
+                    <h2 className='text-3xl max-md:text-2xl mb-12 max-md:mb-8 font-semibold text-white text-center uppercase'>Цель игры</h2>
+                    <div className="flex justify-between max-md:flex-col">
                         <div className="basis-1/2 mr-5">
                             <p className='mb-8 font-bold'>Деловая игра-тренажёр «8 КЛЮЧЕЙ ДЕЛЕГИРОВАНИЯ»:</p>
                             <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
@@ -52,13 +51,13 @@ const CAPage = ({data}) => {
                                 <li>Побывают в разных ролях (Босс, Сотрудник, Судья-рефери) и смогут лучше увидеть и понять разнообразные ошибки, допускаемые руководителями</li>
                             </ul>
                         </div>
-                        <StaticImage className="w-1/2" src="../../images/games/8-colors-delegation.jpg"></StaticImage>
+                        <StaticImage className="w-1/2 max-md:w-full" alt="8-colors-delegation" src="../../images/games/8-colors-delegation.jpg"></StaticImage>
                     </div>
                 </div>
             </section>
-            <section className="py-28" id="auditory">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="auditory">
                 <div className="container mx-auto text-slate-900 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>
                     <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
                         <li className="mb-1">Действующие руководители любого уровня </li>
                         <li className="mb-1">Внутренний кадровый резерв</li>
@@ -79,4 +78,4 @@ const CAPage = ({data}) => {
  */
 export const Head = () => <Seo title='8 цветов делегирования'/>
 
-export default CAPage
\ No newline at end of file
+export default EightColorsDelegationPage
\ No newline at end of file
diff --git a/src/pages/games/bridge.jsx b/src/pages/games/bridge.jsx
index 36040ed..35750b9 100644
--- a/src/pages/games/bridge.jsx
+++ b/src/pages/games/bridge.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 BridgePage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Цели', to: 'purposes'},
         {id: 1, title: 'Направление', to: 'direction'},
         {id: 2, title: 'Контакты', to: 'contact'},
@@ -25,16 +24,16 @@ const CAPage = ({data}) => {
     return(
         <Layout menu={menu}>
             <Hero title="Мост" img={image.img}></Hero>
-            <section className="py-28" id="purposes">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="purposes">
                 <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'>LEONARDO BRIDGE это командная игра, в тематике проектного управления. Отличная  возможность показать работу разных команд в едином проекте, их взаимодействие, умение  мыслить системно, нацеленность участников на выработку общих решений, понимание работы с  ограниченными ресурсами. Чтобы получить все важные делали для создания уникального моста, командам предстоит выполнить много сложных заданий</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="direction">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="direction">
                 <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">
                         <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                             <li className="mb-1">Командообразования</li>
                             <li className="mb-1">Принятие решений</li>
@@ -45,7 +44,7 @@ const CAPage = ({data}) => {
                             <li className="mb-1">Умение работать в условиях изменений и ограниченного времени</li>
                             <li>Выстраивание диалога на общем «языке» с командой</li>
                         </ul>
-                        <StaticImage className="w-1/2" src="../../images/games/bridge2.jpg"></StaticImage>
+                        <StaticImage className="w-1/2 max-md:w-full" alt="bridge" src="../../images/games/bridge2.jpg"></StaticImage>
                     </div>
                 </div>
             </section>
@@ -62,4 +61,4 @@ const CAPage = ({data}) => {
  */
 export const Head = () => <Seo title="Мост" />
 
-export default CAPage
\ No newline at end of file
+export default BridgePage
\ No newline at end of file
diff --git a/src/pages/games/history-by-cards.jsx b/src/pages/games/history-by-cards.jsx
index 8d8c267..bb92c3b 100644
--- a/src/pages/games/history-by-cards.jsx
+++ b/src/pages/games/history-by-cards.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 HBCPage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Цель', to: 'purpose'},
         {id: 1, title: 'Направление', to: 'direction'},
         {id: 2, title: 'Контакты', to: 'contact'},
@@ -25,17 +24,17 @@ const CAPage = ({data}) => {
     return(
         <Layout menu={menu}>
             <Hero title="Нistory by cards" img={image.img}></Hero>
-            <section className="py-28" id="purpose">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="purpose">
                 <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'>Собрать правильную последовательность из зашифрованных карточек, которые вместе составляют единый логический  сюжет и головоломку.</p>
                     <p className='mb-8'>Игра проходит в несколько раундов, важно не только правильно выполнять задания, но и работать на опережения.</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="direction">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="direction">
                 <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">
                         <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                             <li className="mb-1">Командообразования </li>
                             <li className="mb-1">Принятие решений</li>
@@ -46,7 +45,7 @@ const CAPage = ({data}) => {
                             <li className="mb-1">Умение работать в условиях изменений и ограниченного времени</li>
                             <li>Выстраивание диалога на общем «языке» с командой</li>
                         </ul>
-                        <StaticImage className="w-1/2" src="../../images/games/history-by-cards2.jpg"></StaticImage>
+                        <StaticImage className="w-1/2 max-md:w-full" alt="history-by-cards" src="../../images/games/history-by-cards2.jpg"></StaticImage>
                     </div>
                 </div>
             </section>
@@ -63,4 +62,4 @@ const CAPage = ({data}) => {
  */
 export const Head = () => <Seo title="Нistory by cards" />
 
-export default CAPage
\ No newline at end of file
+export default HBCPage
\ No newline at end of file
diff --git a/src/pages/games/mansion-matilda-secrets.jsx b/src/pages/games/mansion-matilda-secrets.jsx
index c3a8a90..61fe270 100644
--- a/src/pages/games/mansion-matilda-secrets.jsx
+++ b/src/pages/games/mansion-matilda-secrets.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 MansionMatildaPage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Описание', to: 'description'},
         {id: 1, title: 'Цели', to: 'purpose'},
         {id: 2, title: 'Развиваемые компетенции', to: 'skills'},
@@ -28,9 +27,9 @@ const CAPage = ({data}) => {
     return(
         <Layout menu={menu}>
             <Hero title='Тайны особняка "Матильда"' img={image.img} time='2-4 часа + анализ до 1,5 часов' formats='офлайн (настольная) // онлайн (платформа ИгроN).' members='команда 5-7 человек. Количество команд не ограничено.'></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'>Детективы любят все! Особенно, если Вы в них  - не подозреваемый :).</p>
                     <p className='mb-8'>7 игровых дней в ролевой  игре <b>ТАЙНЫ ОСОБНЯКА "МАТИЛЬДА"</b> участники занимаются разгадкой уникального преступления, и шансы на успех зависят от них самих.  Минуты пролетают незаметно в поисках улик и вещдоков, которые ведут к разгадке...</p>
                     <p className='mb-8 font-bold'>...а за это время:</p>
@@ -41,36 +40,36 @@ const CAPage = ({data}) => {
                     </ul>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="purpose">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="purpose">
                 <div className="container mx-auto text-white text-base max-w-6xl">
-                    <h2 className='text-3xl mb-10 font-semibold text-white text-center uppercase'>Цель игры</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-10 max-md:mb-8 font-semibold text-white text-center uppercase'>Цель игры</h2>
                     <p className='mb-8'><b>Игровая:</b> Побеждает команда, разгадавшая игровые преступления быстрее других и набравшая максимальное количество баллов.</p>
                     <p className='mb-8'><b>Учебная:</b> Осознать, что только командная работа позволит получить быстрый и качественный результат.</p>
                 </div>
             </section>
-            <section className="py-28" id="skills">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="skills">
                 <div className="container mx-auto text-slate-900 max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 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-slate-800 text-center uppercase'>Развиваемые компетенции и навыки</h2>
+                    <div className="flex justify-between items-center max-md:flex-col">
                         <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                             <li className="mb-1">Принципы и навыки принятия эффективных командных решений</li>
                             <li className="mb-1">Навыки руководства командой (распределение ролей, постановка целей, делегирование и ролевое взаимодействие)</li>
                             <li className="mb-1">Навыки обратной связи</li>
                             <li>Осознанность - после каждого раунда игроки проводят рефлексию и намечают новую стратегию</li>
                         </ul>
-                        <StaticImage className="w-1/2" src="../../images/games/mansion-matilda-secrets2.jpg"></StaticImage>
+                        <StaticImage className="w-1/2 max-md:w-full" alt="mansion-matilda-secrets" src="../../images/games/mansion-matilda-secrets2.jpg"></StaticImage>
                     </div>
                 </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='text-3xl mb-10 font-semibold text-white text-center uppercase'>Преимущества игры</h2>
+                    <h2 className='text-3xl max-md:text-2xl mb-10  max-md:mb-8font-semibold text-white text-center uppercase'>Преимущества игры</h2>
                     <p className='mb-8'>Позволяет раскрыться игрокам с аналитическими способностями, проверить свои навыки убеждения и аргументации, стрессоустойчивость</p>
                 </div>
             </section>
-            <section className="py-28" id="auditory">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="auditory">
                 <div className="container mx-auto text-slate-900 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>
                     <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
                         <li className="mb-1">Руководители и команды всех уровней</li>
                         <li>Новички в период адаптации в компании</li>
@@ -90,4 +89,4 @@ const CAPage = ({data}) => {
  */
 export const Head = () => <Seo title='Тайны особняка "Матильда"' />
 
-export default CAPage
\ No newline at end of file
+export default MansionMatildaPage
\ No newline at end of file
diff --git a/src/pages/games/middleages-secrets.jsx b/src/pages/games/middleages-secrets.jsx
index 10d64d0..36894b1 100644
--- a/src/pages/games/middleages-secrets.jsx
+++ b/src/pages/games/middleages-secrets.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 MiddleagesSecretsPage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Легенда', to: 'legend'},
         {id: 1, title: 'Направление', to: 'direction'},
         {id: 2, title: 'Контакты', to: 'contact'},
@@ -25,10 +24,10 @@ const CAPage = ({data}) => {
     return(
         <Layout menu={menu}>
             <Hero title="Секреты Средневековья" img={image.img} formats='онлайн/оффлайн'></Hero>
-            <section className="py-28" id="legend">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="legend">
                 <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>
-                    <div className="flex justify-between items-center">
+                    <h2 className='text-3xl max-md:text-2xl mb-10 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Легенда игры</h2>
+                    <div className="flex justify-between items-center max-md:flex-col">
                         <div className="basis-[65%] mr-7">
                             <p className='mb-8'>По сюжету игры участники являются инженерами закрытой научной лаборатории, которая проводит исторические исследования, используя перемещения во времени.</p>
                             <p className='mb-8'>В результате технического сбоя экспедиция вместо Древнего Рима, куда она направлялась для изучения технологии возведения уникальных гидротехнических сооружений древности – акведуков, оказывается в Раннем Средневековье, при дворе Карла Великого.</p>
@@ -37,13 +36,13 @@ const CAPage = ({data}) => {
                             <p className='mb-8'>Командам предстоит проанализировать много важной информации, разгадать зашифрованные  коды , решить сложные головоломки и многое-многое другое. </p>
                             <p>Игра проходит в несколько этапов где команды соревнуются друг с другом.</p>
                         </div>
-                        <StaticImage className="w-1/2" src="../../images/games/middleages-secrets2.jpg"></StaticImage>
+                        <StaticImage className="w-1/2 max-md:w-full" alt="middleages-secrets" src="../../images/games/middleages-secrets2.jpg"></StaticImage>
                     </div>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="direction">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="direction">
                 <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>
                     <div className="flex justify-between items-center">
                         <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                             <li className="mb-1">Коммуникативных навыков</li>
@@ -68,4 +67,4 @@ const CAPage = ({data}) => {
  */
 export const Head = () => <Seo title="Секреты средневековья" />
 
-export default CAPage
\ No newline at end of file
+export default MiddleagesSecretsPage
\ No newline at end of file
diff --git a/src/pages/games/place-under-sun.jsx b/src/pages/games/place-under-sun.jsx
index 2671007..8790930 100644
--- a/src/pages/games/place-under-sun.jsx
+++ b/src/pages/games/place-under-sun.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 PlaceUnderSunPage = () => {
 
-    const [menu, setMenu] = useState([
+    const [menu] = useState([
         {id: 0, title: 'Описание', to: 'description'},
         {id: 1, title: 'Цели', to: 'purpose'},
         {id: 2, title: 'Преимущества', to: 'advantages'},
@@ -27,17 +26,17 @@ const CAPage = ({data}) => {
     return(
         <Layout menu={menu}>
             <Hero title='Место под солнцем' img={image.img} time='2-2,5  часа (3 раунда по 30 мин + шеринг игровых итогов 30 мин).' formats='офлайн (сценарная симуляция ) // онлайн (платформа ZOOM).'></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'>Несколько поколений 4 семейных династии получали прибыль и делили место среди самых уважаемых жителей города. Но прогресс заставляет бизнес меняться, рушить выстроенные связи и строить новые партнерства. Кто из них станет более влиятельным? Кто потеряет свои позиции и почему? Как игра проявит шаблоны принятия решений и коммуникаций, влияющие на наш результат в бизнесе?</p>
                     <p>Каждый раунд команды получают от ведущего информацию о развитии событий в городе, что создает конфликт социально-общественных интересов, бизнесинтересов и человеческих ценностей. Задача игроков - принять решение на городском совете. В чью пользу будет это решение, зависит от команд и их переговорных навыков. И оно повлияет на развитие социально-экономической ситуации в городе, коммерческие интересы команд. Решения команд по итогам 3 раундов кардинально меняют уклад жизни в городе и жизнь семейных кланов.</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="purpose">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="purpose">
                 <div className="container mx-auto text-white text-base max-w-6xl">
-                    <h2 className='text-3xl mb-10 font-semibold text-white text-center uppercase'>Цель игры</h2>
-                    <div className="flex justify-between">
+                    <h2 className='text-3xl max-md:text-2xl mb-10 max-md:mb-8 font-semibold text-white text-center uppercase'>Цель игры</h2>
+                    <div className="flex justify-between max-md:flex-col">
                         <div className="basis-1/2">
                             <p className='mb-8 font-bold'>Формировать:</p>
                             <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
@@ -54,22 +53,22 @@ const CAPage = ({data}) => {
                                 <li>Потенциал корпоративной культуры и команды участников (лидерство, готовность к изменениям, решение нестандартных задач, гибкость и др.)</li>
                             </ul>
                         </div>
-                        <StaticImage className="w-1/2" src="../../images/games/place-under-sun.jpg"></StaticImage>
+                        <StaticImage className="w-1/2 max-md:w-full" alt="place-under-sun" src="../../images/games/place-under-sun.jpg"></StaticImage>
                     </div>
                 </div>
             </section>
-            <section className="py-28" id="advantages">
+            <section className="py-28 max-md:py-16 max-md:px-3" id="advantages">
                 <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>
                     <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
                         <li className="mb-1">Индивидуальные и командные цели</li>
                         <li>Динамичная быстрая командная игра для прокачки; коммуникаций и корпоративных ценностей</li>
                     </ul>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="auditory">
+            <section className="py-28 max-md:py-16 max-md:px-3 bg-[#0E0808]" id="auditory">
                 <div className="container mx-auto text-white 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-decimal list-inside leading-normal mr-5'>
                         <li className="mb-1">Руководители и команды</li>
                         <li className="mb-1">Кадровые резервисты</li>
@@ -90,4 +89,4 @@ const CAPage = ({data}) => {
  */
 export const Head = () => <Seo title='Место под солнцем' />
 
-export default CAPage
\ No newline at end of file
+export default PlaceUnderSunPage
\ No newline at end of file