我的页面中有3张卡片，它们排列在一个网格中.
其他两个项目是相同的，只是图标和文本不同.
卡片应该具有以下属性:
- 呈正方形
- 将图标放在中间上方
- 使卡片标题位于图标下方居中
- 使cardText位于该位置下方居中
- 做出react
经过多次修改，我用下面的css获得了从1到4的分数.
.cardsWrapper {
display: grid;
gap: 1rem;
margin-top: 1em;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cardWhite {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
color: black;
box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
width: 100%;
border-radius: 10px;
transition: all 500ms;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 0;
padding-top: 100%;
position: relative;
}
.cardContent {
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
}
.icon {
height: 150px;
color: black;
}
.cardHeadline {
font-family: 'Poppins';
font-size: 4vh;
font-weight: 600;
text-decoration: none;
line-height: 50px;
text-align: center;
color: black;
}
.cardText {
font-size: 3vh;
color: #555555;
text-decoration: none;
text-align: center;
margin-top: 1em;
}<section class="cardsWrapper container">
<div class="cardWhite hidden">
<div class="cardContent container">
<img class="icon" src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
<a class="cardHeadline">Seamless<br/>working</a>
<a class="cardText">Thanks to cloud computing</a>
</div>
</div>
<div class="cardWhite hidden">
<div class="cardContent container">
<img class="icon" src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
<a class="cardHeadline">Seamless<br/>working</a>
<a class="cardText">Thanks to cloud computing</a>
</div>
</div>
<div class="cardWhite hidden">
<div class="cardContent container">
<img class="icon" src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
<a class="cardHeadline">Seamless<br/>working</a>
<a class="cardText">Thanks to cloud computing</a>
</div>
</div>
</section>当我调整大小时，文本和图标没有相应地调整大小，我不知道如何实现所需的行为.我如何构建我的卡，让他们完全响应？