All solutions

Tried not using fixed widths and heights as much. Still need to figure out the best use-cases for both flex and grid in these types of designs. Seems a combination worked for now. Was there a more efficient way I overlooked?

The top image had some overflow issues I couldn't seem to fix except for (in my opinion) bruteforcing it with a 'overflow: hidden' on the parent, which doesn't seem ideal.

I still feel like I design these things in a more roundabout way than necessary, so if anyone could share any insights, that would be great!

Was wondering if I took the right approach with using flexbox instead of grid or a different method altogether.

Right now I used a combination of flexbox and media queries, which I've never used before. Couldn't get it to work organically and to me it feels like I've bruteforced it at the moment, so I would like some feedback on my approach if possible.

At least it seems to work correctly at the specified widths of 1440px and 375px.

Wondering if the part with hovering over the main image was done okay or if there's a shorter/better way to do it.

Also wondering about any redundant values I specified anywhere.

Is there a better way to center the container?

Have I missed any best practices?