.map-section { padding: 110px 0; display: flex; flex-direction: column; align-items: center; &__header { margin-bottom: 50px; text-align: center; display: flex; align-items: center; flex-direction: column; gap: 24px; } &__categories { margin-bottom: 60px; display: flex; gap: 90px; ul { display: flex; flex-direction: column; gap: 22px; li { display: flex; align-items: center; gap: 20px; font-size: 18px; line-height: 22px; } } } } @media screen and (max-width: 768px) { .map-section { &__header { margin-bottom: 40px; gap: 20px; } &__categories { margin-bottom: 40px; gap: 25px; } } } @media screen and (max-width: 550px) { .map-section { &__header { margin-bottom: 25px; gap: 16px; } &__categories { margin-bottom: 25px; padding: 0 16px; width: 100%; align-items: flex-start; flex-direction: column; } } }