1
resposta

Faça como eu: Seção com colunas

Html.

<section class="categorias">
    <h3 class="categorias__titulo">Categorias</h3>
    <p class="categorias__texto">De roupas a gadgets tecnológicos, temos tudo para atender suas paixões e hobbies com estilo e autenticidade.</p>
  </section>
  <ul class="categorias__list">
    <li class="categorias__list_item categorias__list_item-roupas">
            <div class="categorias__list_item_container">
                    <img src="./assets/roupas.png" alt="Roupas"/>
            </div>
            <h4 class="categorias__list_item_titulo">Roupas</h4>
    </li> 
</ul>
<section class="categorias">
    <h3 class="categorias__titulo">Categorias</h3>
    <p class="categorias__texto">De roupas a gadgets tecnológicos temos tudo para atender suas paixões e hobbies com estilo e autenticidade.</p>
    <ul class="categorias__list">
            <li class="categorias__list_item categorias__list_item-roupas">
                    <div class="categorias__list_item_container">
                            <img src="./assets/roupas.png" alt="Roupas"/>
                    </div>
                    <h4 class="categorias__list_item_titulo">Roupas</h4>
            </li> 

Estilização Css.

.categorias__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
    "roupas roupas decoracao"
    "canecas acessorios acessorios";
}
.categorias__list_item-roupas {
    grid-area: roupas;
}
.categorias__list_item-decoracao {
    grid-area: decoracao;
}
.categorias__list_item-canecas {
    grid-area: canecas
}

.categorias__list_item-acessorios {
    grid-area: acessorios
}
.categorias__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
    "roupas roupas decoracao"
    "canecas acessorios acessorios";
    gap: 24px;
    list-style-type: none;
}
.categorias__list_item_container img {
    height: 331px;
    width: 100%;
    object-fit: contain;
}
.categorias__list_item_container {
    background-color: var(--cor-links);
    text-align: center;
}
.categorias__list_item {
    box-shadow: 0px 4px 24px 0px #7B7B7B26;
}
.categorias {
    padding: 80px 12.5%
}
.categorias__titulo {
    font-size: 32px;
    line-height: 39px;
    text-align: center;
    font-family: var(--fonte-titulo);
    color: var(--cor-texto-principal);
    margin-bottom: 40px;
}
.categorias__texto {
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    font-family: var(--fonte-texto);
    color: var(--cor-texto-secundario);
    margin-bottom: 40px
}
.categorias__list_item_titulo {
    font-size: 31px;
    font-weight: 700;
    line-height: 37.2px;
    font-family: var(--fonte-texto);
    color: var(--cor-texto-principal);
    padding: 16px 0;
    text-align: center;
}
1 resposta

Olá, Estanislau, como vai?

No seu código, a estrutura da seção de categorias está caminhando bem, mas é importante remover duplicações para evitar conflitos. Note que você declarou duas vezes a <section class="categorias">, com conteúdo quase idêntico. O ideal é manter apenas uma dessas seções e organizar todos os itens da lista dentro dela.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!