All solutions

I was working on making things more dynamic while not necessarily covering every edge case this time. What do you guys think? Is it too messy or is this ok?

I feel like I did a better job simplifying my CSS but the organization of it is not very intuitive. Does anyone have any tips as to how they organize their CSS and maybe any specific tips after looking at how I organized my CSS or is it just always kind of messy?

Thank you

I really struggled to do an overlay of purple hue over the image. I ended up using a div with a background of the image url, but this omits any alt text which comes with an img element. I couldn't get a ::before or ::after pseudo element to work with an img element. Are there some rules that I don't know about? Does anyone have any good articles/tutorials on doing overlays over an image?

Thanks!

I was unsure if I got the spacing right on a desktop because "off-road" was wrapping at the hyphen, which was not happening in the example. I decided to add white-space: nowrap to a span around those two words in order to keep them on the same line. Does anyone see any spot where I went wrong that may have affected this or is this part of the solution?

Otherwise, I think I got it! Any feedback is always valued and appreciated, Thanks! Matt

My attention to detail was not nearly as good as I thought it was. After checking the Figma file I think I got very close to the answer.

My main question: Does the HTML and CSS seem to be written with best practices, or are there more clear ways of writing them?

Thank you!