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

assets/css/gp-style-desktop.css

@@ -557,6 +557,15 @@
     width: 336px;
     height: 336px;
 }
+
+@media only screen and (min-width: 992px) and (max-width: 1481px) {
+.how-content-item__img{
+    display: none;
+}
+.how-content-item__text{
+    width: 100%;
+}
+}
 /* how */
 
 /* free */

assets/css/gp-style-tablet.css

@@ -405,3 +405,51 @@ main{
 }
 }
 /* projects */
+
+/* how */
+@media only screen and (max-width: 992px) {
+.how{
+    margin-top: 40px;
+}
+.how__content{
+    display: none;
+}
+.how__control{
+    width: 100%;
+}
+.how-control__item{
+    flex-direction: column;
+    align-items: start;
+}
+.how-control-item__number{
+    width: 40px;
+
+    font-size: 20px;
+}
+.how-control__item__name{
+    margin-top: 16px;
+    margin-left: 0;
+
+    max-width: 100%;
+
+    font-size: 20px;
+}
+.how-content__item-block{
+    position: static;
+}
+.how-content__item-block.active{
+    margin-top: 16px;
+}
+.how-content__item{
+    padding: 16px;
+}
+.how-content-item__text{
+    width: 100%;
+}
+.how-content-item__img{
+    display: none;
+}
+}
+/* how */
+
+@media only screen and (max-width: 992px) {}

assets/js/main.js

@@ -13,8 +13,6 @@ const gymSwiper = new Swiper('.gym-swiper', {
     }
 });
 
-
-
 const reviewsSwiper = new Swiper('.reviews-swiper', {
     spaceBetween: 24,
     // If we need pagination
@@ -42,7 +40,6 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
     }
 })
 
-
 const projectsSwiper = new Swiper('.projects-swiper', {
     direction: 'horizontal',
     breakpoints: {
@@ -79,27 +76,43 @@ itemButtons.forEach((button) => {
 
     button.onclick = function name(params, index) {
 
-        let activeContent = document.querySelector('.how__content').querySelector('.active'),
-            activeButton = document.querySelector('.how__control').querySelector('.active');
+        let activeContent = document.querySelector('.how-content__item-block.active'),
+            activeButton = document.querySelector('.how-control__item.active');
 
         if (activeContent.dataset.num == button.dataset.num) return;
         
-        activeContent.style.height = '0px';
-        activeContent.classList.remove('active');
-        activeButton.classList.remove('active');
+        activeContent.style.height = `${activeContent.offsetHeight}px`;
         
-        let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
-            newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
+        setTimeout(() => {
+            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);
+
+            setTimeout(() => {
+                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
+                newActive.style.height = newHeight;
+                newActive.classList.add('active');
+                newButton.classList.add('active');
+
+                setTimeout(() => {
+                    newActive.style.height = 'auto';
+                }, 300);
+            }, 300);
+        }, 0);
     }        
 })
+
+let screenWidth = window.screen.width;
+if (screenWidth <= 992) {
+    howPhone();
+}else{
+    howPc();
+}
+
 function howPc() {
     if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
         return;
@@ -113,6 +126,7 @@ function howPc() {
     });
 }
 function howPhone() {
+    
     if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {    
         return;
     }
@@ -126,7 +140,7 @@ function howPhone() {
             button.after(block);
     });
 }
-
+// how end
 
 // resize
 window.addEventListener('resize', () => {

index.html

@@ -299,7 +299,7 @@
                 </article>
             </div> -->
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <p class="title-1">
                     Разработанные проекты
                 </p>
@@ -429,9 +429,9 @@
                         все проекты
                     </a>
                 </div>
-            </div>
+            </div> -->
 
-            <!-- <div class="main__item">
+            <div class="main__item">
                 <p class="title-1">
                     Как мы это делаем? Не так просто, как кажется!
                 </p>
@@ -470,7 +470,7 @@
                     </div>
 
                     <div class="how__content">
-                        <div class="how-content__item-block active" style="height: 354px;" data-num="1">
+                        <div class="how-content__item-block active" data-num="1" style="height: auto;">
                             <div class="how-content__item">
                                 <p class="text-1">
                                     Проводим экспертизу помещения и определяем рыночный сегмент проекта
@@ -549,7 +549,7 @@
                         </div>
                     </div>
                 </article>
-            </div> -->
+            </div>
 
             <!-- <div class="main__item">
                 <article class="free">