Queria deixar como observação que na estilização das imagens, para mim, o flex-wrap quebrou a linha para todas as imagens, ficando as três uma embaixo da outra, ou invés de quebrar linha só após a primeira, deixando uma imagem em cima e duas embaixo. Para consertar isso, diminuí os tamanhos das imagens de baixo em 1% (pois supus que a razão para a quebra era que as imagens eram "grandes" demais para caberem as duas no espaço de 50%), colocando assim:
img {
width: 100%;
&:nth-child(n + 2){ //todos os filhos (imagens) a partir do segundo
width: 47%; //ao invés de 48%
}
}
Espero que isso ajude quem precisar.
:)
