styling advantages slots on mobiles

goldipl · Jun 13, 2024 · 3d96a4d · 3d96a4d
1 parent c29018b
commit 3d96a4d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 1 deletion.
diff --git a/sass/home/_our_advantages.scss b/sass/home/_our_advantages.scss
@@ -55,3 +55,47 @@
     }
   }
 }
+
+@media (max-width: 760px) {
+  .main-2-0 {
+    #our-advantages {
+      max-width: unset;
+
+      h2 {
+        margin-bottom: 18px;
+      }
+
+      .our-advantages {
+        gap: 2%;
+        &-slot {
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          width: 46%;
+          height: 170px;
+          padding: 16px 32px;
+          box-sizing: border-box;
+          margin-bottom: 2%;
+
+          &__icon {
+            margin-right: 0;
+            img {
+              height: 60px;
+              max-width: 60px;
+            }
+          }
+          &__text {
+            p {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 21px;
+              color: $furnipol_black;
+              margin: 8px 0 0 0;
+              width: 80%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/sass/main.css b/sass/main.css
@@ -858,6 +858,42 @@ body {
   margin: 0 16px 0 0;
 }
 
+@media (max-width: 760px) {
+  .main-2-0 #our-advantages {
+    max-width: unset;
+  }
+  .main-2-0 #our-advantages h2 {
+    margin-bottom: 18px;
+  }
+  .main-2-0 #our-advantages .our-advantages {
+    gap: 2%;
+  }
+  .main-2-0 #our-advantages .our-advantages-slot {
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    width: 46%;
+    height: 170px;
+    padding: 16px 32px;
+    box-sizing: border-box;
+    margin-bottom: 2%;
+  }
+  .main-2-0 #our-advantages .our-advantages-slot__icon {
+    margin-right: 0;
+  }
+  .main-2-0 #our-advantages .our-advantages-slot__icon img {
+    height: 60px;
+    max-width: 60px;
+  }
+  .main-2-0 #our-advantages .our-advantages-slot__text p {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 21px;
+    color: #0f0f0f;
+    margin: 8px 0 0 0;
+    width: 80%;
+  }
+}
 .main-2-0 #reviews-section {
   position: relative;
   display: block;