[Dúvida] Dúvidas sobre grid-area

Boa tarde! Na aula anterior, a Beatriz declarou cada itens no CSS para associar os elementos no grid

.eventos__item img {
    grid-area: imagem;
}
.eventos__item h3{
    grid-area: nome;
}
.eventos__item h4{
    grid-area: data;
}
.eventos__item h5 {
    grid-area: local;
}
.eventos__item button{
    grid-area: botao;
}

Mas nesse exercício, css conseguiu associar outros elementos apenas com um tag . por exemplo,

.agenda__item{
        font-family: var(--fonte-data);
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: 
        "imagem imagem"
        "data botao";
    }
    .agenda__item img{
        grid-area: imagem;
    }
    .agendai__tem h3 {
        grid-area: data;
    }
    .agendai__tem button {
        grid-area: botao;

no HTML tem tag h3,h4,h5 e na parte button também, apenas associando grid-area:botao apareceu junto com "Festival de Cinema"

<div class="agenda__informacoes">
                     <h3>agosto</h3>
                        <h4>08 (sexta)</h4>
                        <h5>20:30</h5>
                    </div>
                    <div class="agenda__atracao">
                       <h6>Festival de Cinema</h6>
                        <button>Avise-me</button>

Alguém pode me explicar por favor