Parte responsivo

Olá Camila bom dia, a alteração deve ser realizada na folha de estilo pessoas.css (assets/css/pessoas.css) e não pessoa.css (assets/csss/pessoa/pessoa.css).

Lá você poderá setar a forma como as imagens vão ser exibidas, a classe pessoas engloba cada uma das pessoas e a maneira como são dispostas na tela em cada dispositivo. Lembrando que a propriedade display: flex determina como serão distribuidos os elementos que estão dentro da classe e não do elemento em si, se o elemento for uma div por exemplo, não quer dizer que a posição da div vai ser flex, mas se houverem 3 imagens ou 3 parágrafos dentro dessa div, esses elementos sim serão flex.

Para alterar a forma como serão exibidas de column para row você deverá colocar dessa maneira em pessoas.css:

.pessoas {
    display: flex;
    justify-content: space-around;
    padding-top: 3rem;
}

@media screen and (min-width: 0) {
    .pessoas {
        flex-direction: column;
    }
}

@media screen and (min-width: 768px) {
    .pessoas {
        flex-direction: row;
    }
}

Para dispositivos até 768px serão exibidas em colunas, uma embaixo da outra, para dispositivos iguais ou maiores que 768px serão exibidas uma ao lado da outra!

E a minha folha de estilo pessoa.css ficou assim:

.pessoa {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 0) {
    .pessoa {
        margin-bottom: 2rem;
    }
}

@media screen and (min-width: 768px) {
    .pessoa {
        margin-bottom: 0;
    }
}