Solucionado
@media screen and (min-width: 1440px){
.categorias{
display: grid;
grid-template-columns: calc(50% - 0.75rem) auto;
grid-template-rows: 1fr auto;
row-gap: 1rem;
column-gap: 1.5rem;
}
.categorias__lista {
grid-area: 2/1/4/2;
}
.categorias__titulo{
grid-area: 1/1/2/3;
}
}
Com o código a cima a categorias__lista não fica alinhada com a destaque__imagem, somente utilizando line-height: 1.33. Teria outra forma de resolver? ou esta correto?
Olá, Maria! Tudo bem?
Uma alternativa para resolver o seu problema é utilizar a propriedade "align-items" no container "categorias". Essa propriedade permite alinhar os itens verticalmente dentro do container. Para isso, você deve adicionar o seguinte código ao seu CSS:
.categorias {
align-items: center;
}
Dessa forma, os itens dentro do container "categorias" serão alinhados verticalmente ao centro, o que pode ajudar a resolver esse problema de alinhamento.
É importante lembrar que cada caso é único e pode exigir ajustes específicos. Portanto, é sempre bom testar diferentes soluções e verificar qual se adequa melhor ao seu projeto.
Espero ter ajudado!
Caso a solução não atenda a sua necessidade ou caso você tenha alguma outra dúvida, fico à disposição para ajudar!
Abraço.