diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index 7e1d52e..8ed34da 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -364,6 +364,8 @@
 
 /* projects */
 .projects{
+}
+.projects .swiper-wrapper{
     margin: 37px -20px -20px -20px;
 
     display: flex;
@@ -372,7 +374,7 @@
 .projects__item{
     margin: 20px;
 
-    width: calc(50% - 40px);
+    width: calc(50% - 40px) !important;
 
     display: flex;
     flex-direction: column;
@@ -425,6 +427,9 @@
     display: flex;
     justify-content: center;
 }
+.projects__counter{
+    display: none;
+}
 /* projects */
 
 /* how */
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index f531e49..ba0f67f 100644
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -329,4 +329,79 @@ main{
     margin-left: 8px;
 }
 }
-/* gym */
\ No newline at end of file
+/* gym */
+
+/* projects */
+@media only screen and (max-width: 992px) {
+.projects{
+    overflow: hidden;
+}
+.projects .swiper-wrapper{
+    margin: 40px 0 0 0;
+
+    flex-wrap: nowrap;
+}
+.projects__item{
+    margin: 0;
+
+    width: 100% !important;
+}
+.projects-item__img{
+    height: 200px;
+}
+.projects-item__content{
+    padding: 16px;
+
+    min-height: auto;
+}
+.projects-item__tag{
+    margin-left: 24px;
+}
+.projects-item__text{
+    margin-top: 16px;
+}
+.projects-item__text .text-1{
+    font-size: 20px;
+}
+.projects__next{
+    display: none;
+}
+.projects__counter{
+    margin-top: 40px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-weight: 400;
+    font-size: 18px;
+    color: var(--text-white);
+}
+
+.projects .swiper-button-next::after, .projects .swiper-button-prev::after{
+    position: static;
+
+    font-size: 0;
+}
+.projects .swiper-button-next, .projects .swiper-button-prev{
+    position: static;
+
+    margin-top: 0;
+
+    width: 32px;
+    height: 32px;
+}
+.projects .swiper-button-next{
+    margin-left: 40px;
+
+    background-image: url(/assets/img/icon/slider-righ.svg);
+    background-repeat: no-repeat;
+}
+.projects .swiper-button-prev{
+    margin-right: 40px;
+
+    background-image: url(/assets/img/icon/slider-left.svg);
+    background-repeat: no-repeat;
+}
+}
+/* projects */
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 4e09515..09ed547 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -42,65 +42,99 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
     }
 })
 
-// gymSwiper.destroy();
 
-// how
-
-function howPc() {
-    let itemButtons = document.querySelectorAll('.how-control__item');
+const projectsSwiper = new Swiper('.projects-swiper', {
+    direction: 'horizontal',
+    breakpoints: {
+        320:{
+            slidesPerView: 1,
+            spaceBetween: 24,
+        },
+        996: {
+            slidesPerView: 1
+        },
+    },
+    // Navigation arrows
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },    
+    runCallbacksOnInit: true,
+    // === new change
+    on: {
+        slideChange: function(){
+            let offer = document.querySelector('#numberProjects');
+            offer.innerHTML = (this.activeIndex +  1);
+        }
+    }
+});
 
-    itemButtons.forEach((button) => {
-        let num = button.dataset.num;
 
-        button.onclick = function name(params, index) {
 
-            let activeContent = document.querySelector('.how__content').querySelector('.active'),
-                activeButton = document.querySelector('.how__control').querySelector('.active');
 
-            if (activeContent.dataset.num == button.dataset.num) return;
-            
-            activeContent.style.height = '0px';
-            activeContent.classList.remove('active');
-            activeButton.classList.remove('active');
+// how
+let itemButtons = document.querySelectorAll('.how-control__item');
+itemButtons.forEach((button) => {
+    let num = button.dataset.num;
+
+    button.onclick = function name(params, index) {
+
+        let activeContent = document.querySelector('.how__content').querySelector('.active'),
+            activeButton = document.querySelector('.how__control').querySelector('.active');
+
+        if (activeContent.dataset.num == button.dataset.num) return;
+        
+        activeContent.style.height = '0px';
+        activeContent.classList.remove('active');
+        activeButton.classList.remove('active');
+
+        let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
+            newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
+        
+
+        setTimeout(() => {
+            let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
+            newActive.style.height = newHeight;
+            newActive.classList.add('active');
+            newButton.classList.add('active');
+        }, 300);
+    }        
+})
+function howPc() {
+    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }
 
-            let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
-                newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
-            
+    let blocks =  document.querySelectorAll('.how-content__item-block'),
+        content = document.querySelector('.how__content');
 
-            setTimeout(() => {
-                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
-                newActive.style.height = newHeight;
-                newActive.classList.add('active');
-                newButton.classList.add('active');
-            }, 300);
-        }        
-    })
+    blocks.forEach(block => {
+        content.appendChild(block)
+    });
 }
+function howPhone() {
+    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }
+    
+    let buttons =  document.querySelectorAll('.how-control__item');
 
-howPc();
-
-
-// function howPc() {
-//     let itemButtons = document.querySelectorAll('.how-control__item'),
-//         itemBlocks = document.querySelectorAll('.how-content__item-block');
+    buttons.forEach(button => {
+        let num = button.dataset.num,
+            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
+            
+            button.after(block);
+    });
+}
 
-//     itemButtons.forEach((button, index) => {
-//         let block = itemBlocks[index];
 
-//         button.onclick = function () {
-//             let activeContent = document.querySelector('.how__content').querySelector('.active'),
-//                 activeButton = document.querySelector('.how__control').querySelector('.active');
-            
-//             activeContent.style.height = '0px';
-//             activeContent.classList.remove('active');
-//             activeButton.classList.remove('active');
-
-//             setTimeout(() => {
-//                 let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
-//                 block.style.height = newHeight;
-//                 block.classList.add('active');
-//                 button.classList.add('active');
-//             }, 300);
-//         }
-//     })
-// }
\ No newline at end of file
+// resize
+window.addEventListener('resize', () => {
+    let screenWidth = window.screen.width;
+    
+    if (screenWidth <= 992) {
+        howPhone();
+    }else{
+        howPc();
+    }
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 8a0e0ad..c8d3b84 100644
--- a/index.html
+++ b/index.html
@@ -297,121 +297,131 @@
                         </div>
                     </div>
                 </article>
-            </div>
+            </div> -->
 
             <div class="main__item">
                 <p class="title-1">
                     Разработанные проекты
                 </p>
 
-                <article class="projects">
-                    <div class="projects__item">
-                        <img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img">
-
-                        <div class="projects-item__content">
-                            <div class="projects-item__tags">
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
+                <article class="projects projects-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="projects__item swiper-slide">
+                            <img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img">
+    
+                            <div class="projects-item__content">
+                                <div class="projects-item__tags">
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Локация</p>
+                                    </div>
     
-                                    <p class="projects-item-tag__name text-2">Локация</p>
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Площадь</p>
+                                    </div>
                                 </div>
-
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
     
-                                    <p class="projects-item-tag__name text-2">Площадь</p>
+                                <div class="projects-item__text">
+                                    <p class="text-1">Название проекта</p>
+                                    <p class="text-2">
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
                                 </div>
                             </div>
-
-                            <div class="projects-item__text">
-                                <p class="text-1">Название проекта</p>
-                                <p class="text-2">
-                                    Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
-                                </p>
-                            </div>
                         </div>
-                    </div>
-
-                    <div class="projects__item">
-                        <img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
-
-                        <div class="projects-item__content">
-                            <div class="projects-item__tags">
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
     
-                                    <p class="projects-item-tag__name text-2">Локация</p>
+                        <div class="projects__item swiper-slide">
+                            <img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
+    
+                            <div class="projects-item__content">
+                                <div class="projects-item__tags">
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Локация</p>
+                                    </div>
+    
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Площадь</p>
+                                    </div>
                                 </div>
-
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
     
-                                    <p class="projects-item-tag__name text-2">Площадь</p>
+                                <div class="projects-item__text">
+                                    <p class="text-1">Название проекта</p>
+                                    <p class="text-2">
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
                                 </div>
                             </div>
-
-                            <div class="projects-item__text">
-                                <p class="text-1">Название проекта</p>
-                                <p class="text-2">
-                                    Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
-                                </p>
-                            </div>
                         </div>
-                    </div>
-
-                    <div class="projects__item">
-                        <img src="/assets/img/photo/projects-3.png" alt="" class="projects-item__img">
-
-                        <div class="projects-item__content">
-                            <div class="projects-item__tags">
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
     
-                                    <p class="projects-item-tag__name text-2">Локация</p>
+                        <div class="projects__item swiper-slide">
+                            <img src="/assets/img/photo/projects-3.png" alt="" class="projects-item__img">
+    
+                            <div class="projects-item__content">
+                                <div class="projects-item__tags">
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Локация</p>
+                                    </div>
+    
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Площадь</p>
+                                    </div>
                                 </div>
-
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
     
-                                    <p class="projects-item-tag__name text-2">Площадь</p>
+                                <div class="projects-item__text">
+                                    <p class="text-1">Название проекта</p>
+                                    <p class="text-2">
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
                                 </div>
                             </div>
-
-                            <div class="projects-item__text">
-                                <p class="text-1">Название проекта</p>
-                                <p class="text-2">
-                                    Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
-                                </p>
-                            </div>
                         </div>
-                    </div>
-
-                    <div class="projects__item">
-                        <img src="/assets/img/photo/projects-4.png" alt="" class="projects-item__img">
-
-                        <div class="projects-item__content">
-                            <div class="projects-item__tags">
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
     
-                                    <p class="projects-item-tag__name text-2">Локация</p>
+                        <div class="projects__item swiper-slide">
+                            <img src="/assets/img/photo/projects-4.png" alt="" class="projects-item__img">
+    
+                            <div class="projects-item__content">
+                                <div class="projects-item__tags">
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Локация</p>
+                                    </div>
+    
+                                    <div class="projects-item__tag">
+                                        <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
+        
+                                        <p class="projects-item-tag__name text-2">Площадь</p>
+                                    </div>
                                 </div>
-
-                                <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
     
-                                    <p class="projects-item-tag__name text-2">Площадь</p>
+                                <div class="projects-item__text">
+                                    <p class="text-1">Название проекта</p>
+                                    <p class="text-2">
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
                                 </div>
                             </div>
-
-                            <div class="projects-item__text">
-                                <p class="text-1">Название проекта</p>
-                                <p class="text-2">
-                                    Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
-                                </p>
-                            </div>
                         </div>
                     </div>
+
+                    <div class="swiper-pagination"></div>
+
+                    <div class="projects__counter">
+                        <div class="swiper-button-prev"></div>
+                        <span id="numberProjects">1</span>/<span class="reviews__counter--grey">4</span>
+                        <div class="swiper-button-next"></div> 
+                    </div>
                 </article>
 
                 <div class="projects__next">
@@ -419,14 +429,14 @@
                         все проекты
                     </a>
                 </div>
-            </div> -->
+            </div>
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <p class="title-1">
                     Как мы это делаем? Не так просто, как кажется!
                 </p>
 
-                <article class="how">
+                <article class="how pc">
                     <div class="how__control">
                         <div class="how-control__item active" data-num="1">
                             <div class="how-control-item__number title-3">
@@ -539,7 +549,7 @@
                         </div>
                     </div>
                 </article>
-            </div>
+            </div> -->
 
             <!-- <div class="main__item">
                 <article class="free">