Your solution looks and works great! I also like your utility classes. Regarding the hero images, I added a width, that is larger than 100% to the img/div so that it overflows at the edges, and an overflow-x: hidden (I think, to the body) so that I don't get a scrollbar at the bottom due to the overflow.
@morauszkia Thanks, appreciate it! :) Right, yeah that's how I solved it on smaller resolutions as well, but for some reason I can't get it to work on higher resolutions. Not sure if it has to do with the content using flex or not...
@andiaz: Probably. In my code, the difference is, that for smaller screens I added max-width directly to the img, and on larger screens, where I used flexbox, I added max-width to the flex container and not directly to the images, which shrink to fit the container. To those I only added a flex-basis to have control over the ratio of the images to the container in the middle with the text.
