сделал 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
+        },
+    }
+});