A block with a picture resting on the text becomes an egg, how to fix it?

Question

css

Hi all. People, help me figure it out. I made a block with 3 icons inside, in each column there is a picture and a block with text, when adaptive, the text rests on the picture and it starts to narrow horizontally. I will attach screenshots and archive. Maybe I didn’t build the html-structure correctly at all, give me a slap and show me how to do it right)) Thanks for any help and hint. Screenshots
Original layout: https://www.figma.com/file/Qk6DQfIvqqis3rGg4zj684/... Project archive: https://yadi.sk/d/rt9fAYIzdy-5CA

Answer 1

Add this code:

.main__item-icon {
    flex: 0 0 auto;
}

Due to the fact that the flex element does not have any set flex properties, it shrinks so much)))