Solucionado
Ao passar para 720px com o seguinte código o resultado é esse:
@media (min-width: 720px) {
.banner img:nth-child(1) {
grid-column: 1/2;
grid-row: 1/3;
};
.banner img:nth-child(4) {
grid-column: 3/4;
grid-row: 1/3;
};
}
Estou usando o Google Chrome nas mesmas dimensões do modo inspecionar que a instrutora.
Consegui chegar próximo ao resultado final direcionando o posicionamentos dos outros dois elementos (quadros) com o seguinte código.
@media (min-width: 720px) {
.banner img:nth-child(1) {
grid-column: 1/3;
grid-row: 1/3;
};
.banner img:nth-child(2) {
grid-column: 3/4;
grid-row: 1/2;
}
.banner img:nth-child(3) {
grid-column: 3/4;
grid-row: 2/3;
}
.banner img:nth-child(4) {
grid-column: 4/5;
grid-row: 1/3;
};
}
