Problema com especificidade de seletores

Na aula 4 atividade 5 o objetivo é centralizar as imagens das pessoas e deixa-las ocupando todo o espaço, porém não estou conseguindo alcançar o resultado do instrutor e não vejo onde posso ter errado. Meu código:

.pessoa__imagem {
    background: red;
    background-size: cover;
    width: 300px;
    height: 300px;
    background-position: center;
    margin: 0 auto;
    background-repeat: no-repeat;
}

.pessoa__imagem--roberta {
    background: url('../../img/pessoas/roberta.jpg');
}

.pessoa__imagem--marcela {
    background: url('../../img/pessoas/marcela.jpg');
}

.pessoa__imagem--andreia {
    background: url('../../img/pessoas/andreia.jpg');
}

Já testei e o CSS está sendo chamado no HTML, além disso experimentei aumentar a especificidade da primeira linha colocando "div.pessoa__imagem", e removendo a propriedade "background: red", funcionou, o que me faz pensar que alguma classe possa estar dando conflito.