Solucionado
Olá Beatriz, tudo bem?
Minha solução do desafio foi diferente, veja se é preciso melhorar, por favor.
.agenda__item {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"imagem imagem"
"informacoes atracao";
}
.agenda__item img {
grid-area: imagem;
}
.agenda__informacoes {
grid-area: informacoes;
}
.agenda__atracao {
grid-area: atracao;
}
hoje, com a Alura e o Google Gemini
Também fiz assim, parece mais intuitivo
Olá Antônio e Ramon, tudo bem?
Tá certíssimo! Excelente!
Parabéns pelo empenho e dedicação, a minha solução é uma das possibilidades, mas não é a única.
O interessante do grid-template-areas é que essa propriedade torna ainda mais semântico o grid.
Em caso de dúvidas ou dificuldades, estamos por aqui!
Abraços e bons estudos! :)
Fiz a solução como a do Antonio e funcionou bem. Com a solução da Alura, a parte de informações bugou em 360px!