.section-categories {
display: flex;
flex-direction: column;
align-items: center;
}
.categories-grid {
width: 312px;
height: 952px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: 88px;
}
.categories-grid a {
display: block;
width: 312px;
height: 220px;
background-color: var(--background-tertiary-color);
color: var(--text-body-color);
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.categories-grid img {
width: 80px;
height: 80px;
margin-bottom: 24px;
}
.categories-grid h3 {
font-weight: var(--highlight-text-weight);
font-size: 28px;
}
@media screen and (min-width: 768px) {
.categories-grid {
flex-direction: row;
width: 648px;
height: 464px;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1440px) {
.categories-grid {
width: 1197px;
height: 220px;
}
.categories-grid a{
width: 281px;
}
.categories-grid a:hover{
background-color: #D9D9D9;
}
}
Lá no Figma diz que as imagens tem 80 x 80, então não tem como uma ser mais alta que a outra, estre outras coisas. Display flex resolve nos cards
