сделал gym с адаптивностью

assets/css/gp-style-core.css

@@ -74,6 +74,10 @@ body{
     text-transform: uppercase;
     color: var(--text-white);
 }
+.title-2{
+    font-weight: 700;
+    color: var(--text-white);
+}
 .title-3{
     font-weight: 700;
     color: var(--text-white);

assets/css/gp-style-desktop.css

@@ -1,13 +1,16 @@
 .wrapper{
     margin: auto;
 
-    width: 1440px;
+    max-width: 1440px;
 }
 
 /* text */
 .title-1{
     font-size: 88px;
 }
+.title-2{
+    font-size: 64px;
+}
 .title-3{
     font-size: 40px;
 }
@@ -162,8 +165,6 @@
 }
 /* footer */
 
-
-
 /* Стили для лептопов  */
 @media only screen and (min-width: 992px) and (max-width: 1400px) {
 .wrapper{
@@ -282,5 +283,74 @@
 }
 /* space */
 
-@media only screen and (min-width: 992px) and (max-width: 1400px) {}
+.main__item{
+    margin-top: 200px;
+}
+
+/* gym */
+.gym{
+    margin: 34px -20px -20px -20px;
+}
+.gym .swiper-wrapper{
+    display: flex;
+    flex-wrap: wrap;
+}
+.gym .swiper-slide{
+    display: flex;
+}
+.gym__item{
+    margin: 20px;
+
+    height: 320px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.gym-item__img{
+    min-width: calc(50% - 20px);
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+
+    border-radius: 4px;
+}
+.gym-item__text{
+    min-width: calc(50% - 20px);
+    width: 100%;
+
+    padding: 16px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    background-color: var(--background-grey);
+    border-radius: 4px;
+}
+.gym-item-img--padding,
+.gym-item-text--padding{
+    max-width: calc(50% - 20px);
+}
+
+.gym-item-text__header{
+    display: flex;
+    align-items: end;
+}
+.gym-item-text__header .text-1{
+    margin-bottom: 11.5px;
+}
+.gym-item-text__header .title-2{
+    margin-left: 16px;
+}
+/* gym */
+
+@media only screen and (min-width: 992px) {
+.gym__item{
+    width: calc(50% - 40px) !important;
+}
+.gym .swiper-slide:nth-child(3){
+    width: 100% !important;
+}
+}
 @media only screen and (min-width: 992px) and (max-width: 1032px) {}

assets/css/gp-style-tablet.css

@@ -11,6 +11,9 @@
 .title-1{
     font-size: 32px;
 }
+.title-2{
+    font-size: 32px;
+}
 .title-3{
     font-size: 32px;
 }
@@ -278,6 +281,52 @@ main{
 
     width: calc(50% - 8px);
     height: 160px;
+
+    background: #2a2a2d;
 }
 }
-/* space */
+/* space */
+
+@media only screen and (max-width: 992px) {
+.main__item{
+    margin-top: 96px;
+}
+}
+
+/* gym */
+@media only screen and (max-width: 992px) {
+.gym{
+    margin: 40px -16px 0 0;
+
+    overflow: hidden;
+}
+.gym .swiper-wrapper{
+    flex-wrap: nowrap;
+}
+.gym .swiper-slide:nth-child(3){
+    display: flex;
+    flex-direction: column-reverse;
+}
+.gym__item{
+    margin: 0;
+
+    flex-direction: column-reverse;
+    height: auto;
+}
+.gym-item__img, .gym-item__text{
+    max-width: 100%;
+    width: 100%;
+
+    height: 179px;
+}
+.gym-item__img{
+    margin-top: 24px;
+}
+.gym-item-text__header .text-1{
+    margin-bottom: 5px;
+}
+.gym-item-text__header .title-2{
+    margin-left: 8px;
+}
+}
+/* gym */

assets/js/main.js

@@ -0,0 +1,24 @@
+'use strict';
+
+window.addEventListener('resize', (e) => {
+    if (window.innerWidth) {
+        
+    }
+});
+
+
+const swiper = new Swiper('.gym-swiper', {
+    direction: 'horizontal',
+    breakpoints: {
+        320:{
+            slidesPerView: 1.20,
+            spaceBetween: 24,
+        },
+        996: {
+            slidesPerView: 3
+        },
+        1920: {
+            slidesPerView: 3
+        },
+    }
+});

index.html

@@ -8,6 +8,8 @@
         <meta name="description" content="SEO Description">
         <link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
 
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
+
         <!-- Базовые стили -->
         <link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
         <link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
@@ -223,6 +225,79 @@
                     </div>
                 </div>
             </article>
+
+            <div class="main__item">
+                <p class="title-1">
+                    GYM EVOLUTION: Технология проектирования, которая увеличивает посещаемость
+                </p>
+
+                <article class="gym gym-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="gym__item swiper-slide">
+                            <img src="/assets/img/photo/gym-1.png" alt="" class="gym-item__img gym-item-img--padding">
+    
+                            <div class="gym-item__text gym-item-text--padding">
+                                <div class="gym-item-text__header">
+                                    <p class="text-1">
+                                        На
+                                    </p>
+    
+                                    <p class="title-2">
+                                        20%
+                                    </p>
+                                </div>
+    
+                                <p class="text-1">
+                                    увеличение эффективности использования площади 
+                                </p>
+                            </div>
+                        </div>
+                        <div class="gym__item swiper-slide">
+                            <img src="/assets/img/photo/gym-2.png" alt="" class="gym-item__img gym-item-img--padding">
+    
+                            <div class="gym-item__text gym-item-text--padding">
+                                <div class="gym-item-text__header">
+                                    <p class="text-1">
+                                        На
+                                    </p>
+    
+                                    <p class="title-2">
+                                        15%
+                                    </p>
+                                </div>
+    
+                                <p class="text-1">
+                                    сокращение времени запуска клуба
+                                </p>
+                            </div>
+                        </div>
+                        
+                        <div class="swiper-slide">
+                            <div class="gym__item">
+                                <img src="/assets/img/photo/gym-3.png" alt="" class="gym-item__img">
+                            </div>
+
+                            <div class="gym__item">
+                                <div class="gym-item__text">
+                                    <div class="gym-item-text__header">
+                                        <p class="text-1">
+                                            На
+                                        </p>
+        
+                                        <p class="title-2">
+                                            18%
+                                        </p>
+                                    </div>
+        
+                                    <p class="text-1">
+                                        повышение посещаемости (на основе кейсов)
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </article>
+            </div>
         </main>
 
         <footer class="footer">
@@ -297,6 +372,7 @@
             </div>
         </footer>
 
-        <script src="/assets/js/gp-main.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+        <script src="/assets/js/main.js"></script>
     </body>
 </html>