// === Advantages === .advantages { width: 100%; margin: 30px 0 0 0; text-align: center; flex-wrap: wrap; justify-content: space-between; display: flex; &__item { width: 25%; max-width: 280px; padding: 0 1% 0 0; text-align: left; vertical-align: top; display: inline-block; &:last-child { padding-right: 0; } } &__text { width: 100%; max-width: 160px; margin: 4px 0 0 25px; line-height: 1.4; color: #47474b; vertical-align: top; display: inline-block; } &__icon { vertical-align: top; display: inline-block; & path { stroke: #505050; } } } // === [ Adaptive ] === // === Desktop === @media (max-width: 1280px) { // } @media (min-width: 1024px) { // } // === Tablet && Desktop === @media (min-width: 768px) { // } // === Tablet === @media (max-width: 1024px) { .advantages { &__item { text-align: center; } &__text { max-width: 100%; margin: 15px 0 0 0; } } } // === Mobile === @media (max-width: 768px) { .advantages { &__item { width: 50%; max-width: none; padding: 0 45px 0 0; &:first-child { padding-bottom: 45px; } &:nth-child(2) { padding-bottom: 45px; padding-right: 0; } } } } @media (max-width: 425px) { .advantages { &__item { width: 100%; padding: 30px 7% 30px 7%; text-align: center; &:first-child { padding-bottom: 30px; background-color: #f4f4f4; } &:nth-child(2) { padding-bottom: 30px; padding-right: 7%; } &:nth-child(3) { background-color: #f4f4f4; } &:last-child { padding-right: 7%; } } } } // === Animations === @media (min-width: 1024px) { .advantages__item { animation-fill-mode: both; animation-duration: 0.35s; animation-name: slideUp; &:nth-child(1) { animation-delay: 0.15s; } &:nth-child(2) { animation-delay: 0.25s; } &:nth-child(3) { animation-delay: 0.35s; } &:nth-child(4) { animation-delay: 0.45s; } } }