[Dúvida] ALINHAMENTO DAS IMAGENS DE OUTRA FORMA

Seu código está no caminho certo para organizar as imagens em uma grid, mas para evitar o corte ao redimensionar a tela, você pode usar CSS adicional para garantir que as imagens se ajustem dentro de suas células. Aqui estão algumas sugestões para melhorar:

Evitar cortes usando object-fit: Adicione object-fit: cover; ou object-fit: contain; ao estilo das imagens, dependendo de como deseja que elas se comportem.

Definir largura e altura para garantir o ajuste: Defina a largura e altura das imagens dentro das células da grid. Assim, elas podem se redimensionar automaticamente dentro de cada célula, sem deformar ou cortar.

Aqui está um exemplo com as duas modificações:

@media (min-width: 720px) {

    .banner img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ou 'contain' */
    }

    .banner img:nth-child(1) {
        grid-column: 1/2;
        grid-row: 1/3;
    }
    .banner img:nth-child(2) {
        grid-column: 2/3;
        grid-row: 1/2;
    }
    .banner img:nth-child(3) {
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .banner img:nth-child(4) {
        grid-column: 3/4;
        grid-row: 1/3;
    }
}

A propriedade object-fit: cover; faz com que a imagem preencha a célula sem distorcer, enquanto object-fit: contain; mantém a imagem visível dentro da célula, com possíveis margens para preencher o espaço.