feat: added advantages

assets/scss/_l-advantages.scss

@@ -0,0 +1,142 @@
+.advantages {
+  margin: 51px 0 116px;
+
+  & .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 39px 34px;
+
+    @include desktop {
+      gap: 24px;
+    }
+  }
+
+  &__item {
+    padding: 36px 36px 28px;
+    box-sizing: border-box;
+    border-radius: 22px 40px;
+    background-color: $white;
+
+    @include tablet {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 30px 24px;
+    }
+
+    @include mobile {
+      padding: 30px 19px;
+    }
+
+    &--counter {
+      flex: 1 1 440px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      padding: 0;
+      background-color: rgba($color: $white, $alpha: 0);
+
+      @include desktop {
+        flex: 1 1 100%;
+        align-items: center;
+      }
+
+      @include mobile {
+        gap: 8px;
+      }
+    }
+
+    &--conditions {
+      flex: 0 1 666px;
+    }
+
+    &--detox {
+      flex: 0 1 454px;
+    }
+
+    &--center,
+    &--support {
+      flex: 1 1 20%;
+    }
+
+    &--conditions,
+    &--detox,
+    &--center,
+    &--support {
+      @include desktop {
+        flex: 1 1 calc(50% - 24px / 2);
+      }
+
+      @include tablet {
+        flex: 1 1 100%;
+      }
+    }
+
+    &-figure {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 66px;
+      width: 66px;
+      margin: 0 0 20px;
+      border-radius: 80px;
+      background-color: $blue;
+
+      @include tablet {
+        height: 55px;
+        width: 55px;
+      }
+
+      &-image {
+        display: block;
+        max-width: 100%;
+        height: auto;
+
+        @include tablet {
+          width: 28px;
+        }
+      }
+    }
+
+    &-text {
+      font-weight: 500;
+      font-size: 19px;
+      line-height: 146%;
+      color: $grey;
+
+      @include tablet {
+        font-size: 18px;
+        line-height: 141%;
+        text-align: center;
+      }
+
+      &--counter {
+        font-weight: 500;
+        font-size: 17px;
+        line-height: 122%;
+        color: $grey;
+
+        @include mobile {
+          font-size: 15px;
+        }
+      }
+
+      & b {
+        font-weight: 700;
+      }
+    }
+
+    &-counter {
+      font-weight: 700;
+      font-size: 174px;
+      line-height: 94%;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: $blue;
+
+      @include mobile {
+        font-size: 120px;
+      }
+    }
+  }
+}

assets/scss/index.scss

@@ -18,3 +18,4 @@
 @import './l-main';
 @import './l-footer';
 @import './l-first-screen';
+@import './l-advantages';