сделал адаптивность для projects

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 */

assets/css/gp-style-tablet.css

@@ -330,3 +330,78 @@ main{
 }
 }
 /* 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 */

assets/js/main.js

@@ -42,13 +42,38 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
     }
 })
 
-// gymSwiper.destroy();
+
+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);
+        }
+    }
+});
+
+
+
 
 // how
-
-function howPc() {
 let itemButtons = document.querySelectorAll('.how-control__item');
-
 itemButtons.forEach((button) => {
     let num = button.dataset.num;
 
@@ -75,32 +100,41 @@ function howPc() {
         }, 300);
     }        
 })
+function howPc() {
+    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
     }
 
+    let blocks =  document.querySelectorAll('.how-content__item-block'),
+        content = document.querySelector('.how__content');
+
+    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');
+
+    buttons.forEach(button => {
+        let num = button.dataset.num,
+            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
+            
+            button.after(block);
+    });
+}
+
+
+// resize
+window.addEventListener('resize', () => {
+    let screenWidth = window.screen.width;
+    
+    if (screenWidth <= 992) {
+        howPhone();
+    }else{
         howPc();
-
+    }
-
+});
-// function howPc() {
-//     let itemButtons = document.querySelectorAll('.how-control__item'),
-//         itemBlocks = document.querySelectorAll('.how-content__item-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);
-//         }
-//     })
-// }

index.html

@@ -297,15 +297,16 @@
                         </div>
                     </div>
                 </article>
-            </div>
+            </div> -->
 
             <div class="main__item">
                 <p class="title-1">
                     Разработанные проекты
                 </p>
 
-                <article class="projects">
+                <article class="projects projects-swiper">
-                    <div class="projects__item">
+                    <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">
@@ -332,7 +333,7 @@
                             </div>
                         </div>
     
-                    <div class="projects__item">
+                        <div class="projects__item swiper-slide">
                             <img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
     
                             <div class="projects-item__content">
@@ -359,7 +360,7 @@
                             </div>
                         </div>
     
-                    <div class="projects__item">
+                        <div class="projects__item swiper-slide">
                             <img src="/assets/img/photo/projects-3.png" alt="" class="projects-item__img">
     
                             <div class="projects-item__content">
@@ -386,7 +387,7 @@
                             </div>
                         </div>
     
-                    <div class="projects__item">
+                        <div class="projects__item swiper-slide">
                             <img src="/assets/img/photo/projects-4.png" alt="" class="projects-item__img">
     
                             <div class="projects-item__content">
@@ -412,6 +413,15 @@
                                 </div>
                             </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">