css flexbox, как сделать responsive layout с изображением и текстом?

https://drive.google.com/file/d/16jryponHSvT9pdWYIjVfqUV9Z_m9SOSI/view?usp=sharing

Как сверстать адаптивно, чтобы и текст и изображение уменьшались одновременно и при этом их первоначальный размер соответствовал макету?

Раньше я верстал без адаптивного изображения, изображению ставил flex 0 1 auto; а тексту flex 1 1 auto; Сейчас необходимо верстать так, чтобы изображение тоже уменьшалось т.е. flex-1 (flex 1 1 0%) и на изображении и на тексте. Изображение и текст уменьшаются одновременно, но первоначальный размер изображения(при полном размере контейнера) не соответствует как на макете. Какие лучшие практики при верстке? Я не знаю как правильно в таких случаях делать