nth-child(2)

Não entendi porque foi usado nth-child(2) no primeiro elemento de .destaques__secundario.

No código HTML é o primeiro elemento com a classe .destaques__secundario. Antes dele é a classe destaques__principal.

<section class="destaques">
            <div class="destaques__principal caixa">
                <h3 class="destaques__titulo">Fortnite</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">PUBG</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">Slack</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">Whatsapp</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">CS: GO</h3>
            </div>
            ...
    </section>

Para aplicar o as configurações do PUBG, foi usado no CSS:

.destaques__secundario:nth-child(2) {
  background-image: url('../img/pubg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  grid-column-start: 4;
  grid-column-end: 4;

  grid-row-start: 1;
  grid-row-end: 1;

}

Pela lógica deveria ser 1, mas testei com o seletor nth-child(1) e de fato não funcionou.

Dei uma lida na documentação https://developer.mozilla.org/pt-BR/docs/Web/CSS/:nth-child e não achei a resposta porque lá segue a lógica de colocar 1 para pegar o primeiro elemento filho.

Se alguém tiver entendido...