React+Styled Components响应式Flexbox图片计数器布局问题求助

我是编程新手，试了各种教程、Grid布局后思路混乱，急需解决当前布局问题。

我用React和Styled Components实现了包含6个图片计数器的Flexbox布局：每个计数器是一个styled.div，内部包含styled.img、styled.p标签以及包裹React CountUp的styled.div，所有元素被设置为display:flex的AboutWrapper容器包裹。因每个计数器的文本和数字不同，我单独设置了6个ImgWrap容器和6个p标签。

当前问题 #

• 部分图片和p标签超出容器范围
• 全屏布局时行间距过大，不符合预期
• 仅能通过绝对定位实现文本在图片上的定位，但无法自动适配不同长度的文本和数字

期望实现 #

• 支持响应式收缩的Flexbox布局
• 符合预期的全屏Flexbox布局

当前错误效果 #

• 元素溢出容器
• 行间距过大

相关代码 #

AboutWrapper（主容器） #

export const AboutWrapper = styled.div`
display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20 auto;
  object-fit: cover;
  align-content: space-evenly;
  z-index: 1;
  height: 770px;
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 24px;
  row-gap: 0;
  justify-content: center; 
`;

Img1Wrap（计数器容器示例） #

export const Img1Wrap = styled.div`
  max-width: 343px;
  justify-self: center;
  align-self: center;
  justify-content: center;
  text-align: center;
  align-content: center;
  position: relative;
  height: 30%;
`;

Img1Desc（图片上的文本标签） #

export const Img1Desc = styled.p`
  font-size: 18px;
  position: absolute;
  height: 100%;
  color: yellow;
  z-index: 4;
  top: 50%;
  left: 30%;
`;

Styled.img（图片样式） #

export const Img1 = styled.img`
  width: 90%;
  z-index: -1;
  align-self: center;
  justify-self: center;
  margin: 0 0 5px 0;
  padding-right: 0;
`;

内容的提问来源于stack exchange，提问作者kwi