Quando apliquei o flex-wrap: wrap, as categorias quebraram em 3 colunas na configurações para tablet.
@media (min-width: 720px) {
/* Cabeçalho */
.menu {
column-gap: 75px;
}
/* Categorias */
.categorias__lista {
flex-wrap: wrap;
column-gap: 1.5rem;
row-gap: 1rem;
}
}
hoje, com a Alura e o Google Gemini
Esta é a maneira que os itens se comportam no MS Edge:
Olá, Hugo! Tudo ok contigo?
No caso da imagem que você mostrou, o problema gerado no layout é por conta dos cards de categorias, para resolver ele teríamos que organizar eles usando Flex-wrap e flex-basis talvez. Mas para isso seria necessário mais partes do código, ou ele todo. Se tivesse como colocar ele no Github e colocar o site no ar para que eu fizesse uns testes para poder ajudar melhor seria bom.
Mas no geral usar flexbox pode resolver aquele problema de layout.
Era isso. Abraços e bons estudos!