diff --git a/assets/scss/components/slices/features.scss b/assets/scss/components/slices/features.scss index fb1c69a44..7db93741d 100644 --- 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,37 +57,39 @@ } } } - } @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; + justify-content: space-evenly; align-items: stretch; &-5-items { /* 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((100% / 3) - $gap * 2 / 3); + } } } } .features-wrapper { &__item { - width: $column-width; text-align: center; display: block; + flex-basis: calc((100% / 4) - $gap * 3 / 4); } &-item__image {