сделал адаптивность для 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,65 +42,99 @@ 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
+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() {
-    let itemButtons = document.querySelectorAll('.how-control__item');
+    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }
 
-    itemButtons.forEach((button) => {
+    let blocks =  document.querySelectorAll('.how-content__item-block'),
-        let num = button.dataset.num;
+        content = document.querySelector('.how__content');
 
-        button.onclick = function name(params, index) {
+    blocks.forEach(block => {
+        content.appendChild(block)
+    });
+}
+function howPhone() {
+    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }
     
-            let activeContent = document.querySelector('.how__content').querySelector('.active'),
+    let buttons =  document.querySelectorAll('.how-control__item');
-                activeButton = document.querySelector('.how__control').querySelector('.active');
 
-            if (activeContent.dataset.num == button.dataset.num) return;
+    buttons.forEach(button => {
+        let num = button.dataset.num,
+            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
             
-            activeContent.style.height = '0px';
+            button.after(block);
-            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);
-        }        
-    })
 }
 
-howPc();
 
+// resize
+window.addEventListener('resize', () => {
+    let screenWidth = window.screen.width;
     
-// function howPc() {
+    if (screenWidth <= 992) {
-//     let itemButtons = document.querySelectorAll('.how-control__item'),
+        howPhone();
-//         itemBlocks = document.querySelectorAll('.how-content__item-block');
+    }else{
-
+        howPc();
-//     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,120 +297,130 @@
                         </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">
-                        <img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img">
+                        <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__content">
-                            <div class="projects-item__tags">
+                                <div class="projects-item__tags">
-                                <div class="projects-item__tag">
+                                    <div class="projects-item__tag">
-                                    <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
+                                        <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
         
-                                    <p class="projects-item-tag__name text-2">Локация</p>
+                                        <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">
+                                <div class="projects-item__text">
-                                    <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
+                                    <p class="text-1">Название проекта</p>
-    
+                                    <p class="text-2">
-                                    <p class="projects-item-tag__name text-2">Площадь</p>
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
                                 </div>
                             </div>
+                        </div>
     
-                            <div class="projects-item__text">
+                        <div class="projects__item swiper-slide">
-                                <p class="text-1">Название проекта</p>
+                            <img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
-                                <p class="text-2">
+    
-                                    Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                            <div class="projects-item__content">
-                                </p>
+                                <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__text">
+                                    <p class="text-1">Название проекта</p>
+                                    <p class="text-2">
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+    
+                        <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__text">
+                                    <p class="text-1">Название проекта</p>
+                                    <p class="text-2">
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+    
+                        <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__text">
+                                    <p class="text-1">Название проекта</p>
+                                    <p class="text-2">
+                                        Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
+                                    </p>
+                                </div>
                             </div>
                         </div>
                     </div>
 
-                    <div class="projects__item">
+                    <div class="swiper-pagination"></div>
-                        <img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
 
-                        <div class="projects-item__content">
+                    <div class="projects__counter">
-                            <div class="projects-item__tags">
+                        <div class="swiper-button-prev"></div>
-                                <div class="projects-item__tag">
+                        <span id="numberProjects">1</span>/<span class="reviews__counter--grey">4</span>
-                                    <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
+                        <div class="swiper-button-next"></div> 
-    
-                                    <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__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>
-
-                                <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__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>
-
-                                <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__text">
-                                <p class="text-1">Название проекта</p>
-                                <p class="text-2">
-                                    Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
-                                </p>
-                            </div>
-                        </div>
                     </div>
                 </article>
 
@@ -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">