Responsive card with Flexbox

This challenge was similar to the Results Summary challenge, but I took a slightly different approach with it. Firstly, I decided to wrap both main div's (the top/left image and bottom/right text) in a single div called content, and add the appropriate padding to the whole div. This made it easier line up child elements and make sure the padding was consistent for the whole component, but it did mean that there was white space around the image, contrary to the design. So, I added negative margin to the image on the top and sides to make it flush with the outer div. This is probably a common technique and quite obvious to more experienced developers, but I'm proud of myself for coming up with it :)

One additional note about this approach is that it made it very easy to adjust the component into its desktop layout, but it I was not able to make it a 1-to-1 copy of the design, which has the image taking up 50% of the entire component. I probably could have gotten it there by removing the padding and margin inside my @media query and then add the padding to the right div, but I honestly like the 40/60 split between the image and the text content, so I kept it.