Image overlap the text when I resize the window CSS - css

Question

I'm working on a personal project and I have a problem with overlapping when I resize the window.
Basically until now my page is divided in 3 sections, header (which is sticky), middle/hero and last section with the products.
The problem is when I make my page less higher, the images with the coffees are overlapping the text.
My code is here:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
height: calc(100vh - 64px);
width: calc(100vw - 64px);
justify-content: center;
}
.text-section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
font-size: 1.05em;
margin: 0 5vw 0 5vw;
padding: 0 2vw 0 2vw;
}
.text-section h2 {
font-size: 2em;
font-weight: 600;
padding-bottom: 1em;
}
/* <p> color */
.ph {
color: #3c4043;
}
.image-section {
display: flex;
align-items: center;
justify-content: center;
background-image: url(https://www.illy.com/dw/image/v2/BBDD_PRD/on/demandware.static/-/Sites-masterCatalog_illycaffe/default/dw9a7f00e7/products/Coffee/Coffee-Ground/9893ME_coffee_ground-espresso_can-classico-roast-250gr-zagnoli-decorated_illy-shop/DecoratoOZ_GroundClassico_800x800px.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
min-height: 15em;
margin: 2vw;
}
.main-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
justify-content:space-between;
}
.illy,
.lavazza,
.starbucks {
display: flex;
flex-direction: column;
align-items: center;
width: 15em;
height: 25em;
}
https://codepen.io/claudiuu/full/ZEWmRzR
here is the overlap