All solutions

Although it seemed at first that this component maintains its dimensions on both mobile and desktop views, I found that it get's bigger and becomes a square on desktop. I ended up not including the larger size, but would like to figure out how to make all the elements inside the component match the design on both mobile and desktop. Maybe I should use percentages for the widths of the elements?

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.

This one had a lot going on color-wise, so it was very helpful to have all of my colors saved into SCSS variables. Mobile-first was definitely the way to go with this one. Once I had the mobile styles buttoned down, it was easy to add a few changes in a media query and make it look good on desktop. The biggest challenge for me was getting the desktop styles to match the design on the left side. I don't know if I just needed to make the individual elements smaller or what.

How do you prefer to build elements? For this card, I started with the layout of the element itself, defining the height and width of the card, and then placing the image and text inside, wrapping them in a content div with a width relative to the card's width. If I were to start over, I might start with adding the image first and text first, wrapped it in a content div, defined the width of that div directly, and then define the height of the card with margin and padding.