调整窗口CSS大小时图像与文本重叠

如何解决调整窗口CSS大小时图像与文本重叠

我正在处理一个个人项目，调整窗口大小时出现重叠问题。 基本上到目前为止，我的页面分为三个部分，标题（粘性），中间/英雄和产品的最后一部分。

问题是，当我使页面的高度降低时，带有咖啡的图像会与文本重叠。

我的代码在这里：

  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