feat: added step-by-step

assets/scss/_l-step-by-step.scss

@@ -1,5 +1,4 @@
 .step-by-step {
-  display: none;
   margin: 98px 0 110px;
 
   @include tablet {
@@ -17,6 +16,14 @@
   &__wrapper {
     display: flex;
     gap: 84px;
+
+    @include desktop {
+      gap: 42px 24px;
+    }
+
+    @include laptop {
+      flex-direction: column;
+    }
   }
 
   &__controls {
@@ -25,6 +32,18 @@
     gap: 36px;
     flex: 0 0 410px;
 
+    @include desktop {
+      flex: 0 0 360px;
+    }
+
+    @include laptop {
+      flex: 0 1 auto;
+      flex-direction: row;
+      gap: 20px;
+      padding-bottom: 10px;
+      overflow: auto;
+    }
+
     &-button {
       display: flex;
       align-items: center;
@@ -36,6 +55,11 @@
       transition: all ease-in-out 0.1s;
       cursor: pointer;
 
+      @include laptop {
+        flex: 0 0 auto;
+        padding: 8px 21px;
+      }
+
       &:hover,
       &.active:hover {
         background-color: $blue;
@@ -58,6 +82,10 @@
         font-size: 28px;
         line-height: 146%;
         color: $grey;
+
+        @include desktop {
+          font-size: 24px;
+        }
       }
 
       &-text {
@@ -65,6 +93,8 @@
         font-size: 24px;
         line-height: 146%;
         color: $darkgrey;
+
+        font-size: 20px;
       }
 
       &.active &-number {
@@ -86,5 +116,110 @@
 
   &__content {
     flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 26px 56px;
+    box-sizing: border-box;
+    border-radius: 22px 88px;
+    background-color: $white;
+
+    @include laptop {
+      padding: 21px 27px;
+      border-radius: 10px 30px;
+    }
+  }
+
+  &__card {
+    display: none;
+    max-width: 520px;
+
+    @include laptop {
+      max-width: none;
+    }
+
+    &--wide {
+      max-width: none;
+    }
+
+    &.active {
+      display: block;
+    }
+
+    &-title {
+      margin: 0 0 13px;
+      font-weight: 600;
+      font-size: 34px;
+      line-height: 141%;
+      text-align: center;
+      color: $darkgrey;
+    }
+
+    &-text {
+      margin: 0 0 32px;
+      font-weight: 400;
+      font-size: 20px;
+      line-height: 146%;
+      text-align: center;
+      color: $grey;
+    }
+
+    &-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 24px;
+      margin: 0 0 40px;
+
+      @include mobile {
+        gap: 16px;
+      }
+
+      &-item {
+        flex: 0 0 calc(100% / 3 - 24px / 3 * 2);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+
+        @include mobile {
+          flex: 0 0 calc(50% - 8px);
+        }
+
+        &-figure {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 48px;
+          width: 48px;
+          border-radius: 48px;
+          background-color: $blue;
+
+          &-image {
+            display: block;
+            max-width: 100%;
+            width: 24px;
+            height: auto;
+          }
+        }
+
+        &-text {
+          font-weight: 600;
+          font-size: 17px;
+          line-height: 127%;
+          text-align: center;
+          color: $grey;
+
+          @include mobile {
+            font-size: 13px;
+          }
+        }
+      }
+    }
+
+    &-buttons {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

assets/scss/_m-button.scss

@@ -70,10 +70,12 @@
     &:hover {
       color: $blue;
       background-color: $white;
+      border-color: $blue;
     }
 
     &:active {
       color: $darkblue;
+      border-color: $darkblue;
     }
 
     &::before {