.twelve-steps { margin: 93px 0 111px; @include tablet { margin: 60px 0 75px; } &__title { margin: 21px 0 31px; @include tablet { margin: 21px 0 24px; } } &__list { display: flex; flex-wrap: wrap; gap: 50px; @include desktop { gap: 24px; } @include mobile { gap: 12px; } } &__step { flex: 0 0 calc(100% / 4 - 50px / 4 * 3); display: flex; flex-direction: column; align-items: flex-start; @include desktop { flex: 0 0 calc(100% / 4 - 24px / 4 * 3); } @include laptop { flex: 0 0 calc(100% / 3 - 24px / 3 * 2); } @include tablet { flex: 0 0 calc(100% / 2 - 24px / 2); align-items: center; } @include mobile { flex: 1 1 100%; } &-number { width: fit-content; margin: 0 0 17px; padding: 8px 16px; font-weight: 700; font-size: 20px; line-height: 127%; text-align: center; color: $white; border-radius: 100px; background-color: $blue; } &-title { margin: 0 0 11px; font-weight: 600; font-size: 18px; line-height: 127%; color: $darkgrey; @include tablet { text-align: center; } } &-text { font-weight: 400; font-size: 15px; line-height: 146%; color: $grey; @include tablet { text-align: center; } } } }