fix: use relative features width column

1024pix · Dec 6, 2021 · 65eaea2 · 65eaea2
1 parent 1d35361
commit 65eaea2
Showing 1 changed file with 25 additions and 24 deletions.
diff --git a/assets/scss/components/slices/features.scss b/assets/scss/components/slices/features.scss
@@ -1,22 +1,21 @@
 .features {
-  &__title h2 {
-    color: $grey-80;
-    font-weight: normal;
-    letter-spacing: 0.15px;
-    line-height: 49px;
-    text-align: center;
-    margin-top: 0;
-    padding: 100px 0 0;
-  }
+    &__title h2 {
+        color: $grey-80;
+        font-weight: normal;
+        letter-spacing: 0.15px;
+        line-height: 49px;
+        text-align: center;
+        margin-top: 0;
+        padding: 100px 0 0;
+    }
 
-  &__wrapper {
-    padding: 60px 10%;
-    display: flex;
-    flex-direction: column;
-    // align-items: center;
-    margin: 0 auto;
-    word-break: break-word;
-  }
+    &__wrapper {
+        padding: 60px 10%;
+        display: flex;
+        flex-direction: column;
+        margin: 0 auto;
+        word-break: break-word;
+    }
 }
 
 .features-wrapper {
@@ -33,7 +32,7 @@
             display: flex;
             justify-content: center;
         }
-    
+
         &__content {
             margin-left: 20px;
         }
@@ -58,18 +57,16 @@
             }
         }
     }
-
 }
 
 @include device-is('large-screen') {
-    $column-width: 294px;
-    $column-gap: 74px;
+    $gap: 74px;
 
     .features {
         &__wrapper {
             display: flex;
             flex-direction: row;
-            gap: $column-gap;
+            gap: $gap;
             flex-wrap: wrap;
             justify-content: center;
             align-items: stretch;
@@ -78,17 +75,21 @@
                 /* Si 5 items */
                 /* Afficher 3 items sur une ligne puis 2 items sur une autre */
                 padding: 60px 0;
-                max-width: calc(3 * ($column-gap + $column-width));
+                max-width: 75%;
                 margin: 0 auto;
+
+                .features-wrapper__item {
+                    flex-basis: calc(33.33% - $gap * 2 / 3);
+                }
             }
         }
     }
 
     .features-wrapper {
         &__item {
-            width: $column-width;
             text-align: center;
             display: block;
+            flex-basis: calc(25% - ($gap * 3 / 4));
         }
 
         &-item__image {