Imagens maiores do que deveriam estar

Parece que as linhas do meu grid estão maiores do que deveriam estar. As imagens estão ocupando todo conteúdo. Pode me ajudar ? Segue código .

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

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

}

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

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