Imagens aparecem cortadas, somente o miolo é visível

Todas as imagens estão aparecendo da seguinte forma: A extensão está OK, porém a altura não. Imagina passando uma faca cortando a imagem em 3 partes iguais. Somente o miolo aparece. As extremidades não. As legendas das imagens (Slack, PUBG, etc.) estão normais. Não aparece mensagem de erro no código.

A seguir os códigos. Obrigado pela ajuda!

Destaques.css

.destaques {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(100vh - 50 px);   
}

.destaques__principal {
    background: url('../img/fortnite.jpg') center / cover no-repeat;
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.destaques__secundario:nth-child(2) {
    background: url('../img/pubg.jpg') center / cover no-repeat;
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}


.destaques__secundario:nth-child(3) {
    background: url('../img/slack.png') center / cover no-repeat;
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.destaques__secundario:nth-child(4) {
    background: url('../img/whatsapp.png') center / cover no-repeat;
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.destaques__secundario:nth-child(5) {
    background: url('../img/cs-go.jpg') center / cover no-repeat;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

Index.html

`

font-family: Arial, Helvetica, sans-serif;
 grid-template-areas: 
"cabecalho"
"conteudo"
"rodape";
grid-template-columns: auto;
grid-template-rows: 50px 100vh auto;

}

.cabecalho {

grid-area: cabecalho;

}

.conteudo {

grid-area: conteudo;

}

.rodape {

grid-area: rodape;

} `