Solucionado
Entendi perfeitamente a utilização do grid-row e grid-column start e end para a imagem do cartão.
Mas porque foi passada a classe .secao-horizontal? Aonde ela se encaixa na explicação da instrutora? Não bastaria passar apenas o .cartao__imagem conforme abaixo para resolver?
.cartao__imagem {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4; }
hoje, com a Alura e o Google Gemini
Oi Pedro, tudo bem?
A classe .secao-horizontal foi utilizada para selecionar especificamente os cartões que estão na seção horizontal. Isso é útil quando temos diferentes seções no nosso site, cada uma com suas próprias regras de estilo.
No caso do exemplo da aula, temos uma seção horizontal onde os cartões precisam ser exibidos de uma certa maneira. Ao utilizar a classe .secao-horizontal, estamos dizendo ao CSS para aplicar as regras de estilo somente aos cartões dessa seção.
Agora, sobre a sua dúvida específica, a classe .secao-horizontal foi utilizada em conjunto com .cartao__imagem para garantir que as regras de grid-column-start, grid-column-end, grid-row-start e grid-row-end sejam aplicadas apenas às imagens dos cartões que estão na seção horizontal.
Se usássemos somente a classe .cartao__imagem, essas regras seriam aplicadas a todas as imagens de cartões do site, independentemente da seção em que estão. Isso poderia causar problemas se tivéssemos uma outra seção onde as imagens dos cartões precisassem ser exibidas de uma maneira diferente.
Por exemplo, imagine que temos uma seção vertical onde as imagens dos cartões devem ocupar apenas uma linha e uma coluna. Se aplicássemos as regras de grid-column-start, grid-column-end, grid-row-start e grid-row-end a todas as imagens de cartões (usando somente a classe .cartao__imagem), as imagens dos cartões da seção vertical também seriam afetadas, o que não é o que queremos.
Portanto, a classe .secao-horizontal é usada para garantir que as regras de estilo sejam aplicadas apenas onde queremos.
Um abraço e bons estudos.