Somehow on the first illustration i cannot get equal width for both column of flexbox despite the same flex-basis when I grow the width in desktop mode. It works on second illustration using same template (scss file article). Must be content of first column with the input + button pushing it in a way I do not understand yet. Will try to find why and post another solution.
The flexbox childs with not equal width when we grow the vw is coming from this input + button in row forcing a minimum width in first column of flexbox...
The main challenge I found with this project was with the background pattern elements: I learnt how to use multiple backgrounds and position them correctly for the the desktop design; but they don't quite match up for the mobile view. I'm unsure if there is a better way of implementing this so that the patterns move dynamically so that they line up correctly for mobile, or if this is simply not possible. However I think the mobile view still looks suitable.
I agree these backgrounds were the complicated part for me as well. I tried many options and eventually used also some relative positioning using top bottom left right: background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-size: 55vw auto,55vw auto; background-repeat: no-repeat,no-repeat; background-position: left -5vw top -25vw , right -5vw bottom -25vw; I think your version match better than mine!
