Responsive layout - a flex approach

After a lot of trial and error, a reasonably presentable solution is ready for your friendly suggestions and criticisms. I used the before and after pseudo elements and layering to get the background images to remain in their desired positions while achieving a responsive design for all viewport sizes. Flex-box is a great tool as is the before and after pseudo-elements when coupled with absolute & relative positioning. Please provide feedback on this HTML/CSS coding - it will be greatly appreciated.