Content overlap

Hello, I’m working on a project and I have a problem with the CSS I think. My content is overlapping when I resize the page.

I have like two sections hero were I use display grid for the second section display is flex (illy lavazza, starbucks).

Any ideas?

Have you a bug in your grid definition with overlapping sections, have you position:absolute on one of the elements involved, or other position properties like fixed or sticky, …
I could go on but without seeing your code it might become a very long and tedious process to find out what’s wrong and I don’t think anyone would be willing to go through that.

https://codepen.io is great for sharing code. You can log in with your github account.

Hello @jsdisco , I really appreciate your replay. In the mean time I fixed the problem but I will be very happy if I will get different solution or approach of the problem.

My updated code is live here: (full view) https://codepen.io/claudiuu/full/ZEWmRzR
https://codepen.io/claudiuu/pen/ZEWmRzR

my solution was this:
in .hero I change the height with the min-height.