All solutions

Don't know how to make the cyan colored overlay when hovering over the main image. Any tips?

How do I center the whole thing vertically so that it matches the comparison thingy on this site?

I wasn't sure exactly how to approach this challenge. I tried using grid with grid-template-areas. I've been playing around with ems and rems as well. I have recently learned about these topics, and wanted to implement them. I was mostly focused on the grid layout and the media query, an therefore I have not tried getting everything pixel perfect

Would you have used grid or flexbox with this one?

I found the color overlay on the picture a bit difficult to get correct. I don't know if the background with a linear gradient is the way to go. I'm a bit unsure of the positioning of the image on the mobile part. On the desktop part of it, the image aligned naturally to the right, because of its position in the HTML file. Is there a way to get the image to show on top without making its position absolute?