CSS Grid why is the height different than expected

Question

Here's a CSS grid of an avatar on the left, the name and a description to the right.

https://jsfiddle.net/dwheaz43/

Why is the height 104px instead of 100px for each wrapper? How do I get it to condense down to only the space needed to fit the text?

<div class="wrapper"><picture class="avatar"><img src="https://placekitten.com/g/100/100"></picture><div class="name">Nurlela Jicha</div><span class="desc">desc</span></div><div class="wrapper"><picture class="avatar"><img src="https://placekitten.com/g/100/100"></picture><div class="name">Bern Fetzer</div><span class="desc">desc</span></div>

.wrapper {
  display: grid;
  grid-template-columns: 100px 1fr;
}
.wrapper .avatar {
  grid-row: 1/3;
  grid-column: 1;
}
.wrapper .name {
  grid-row: 1;
  grid-column: 2;
}
.wrapper .desc {
  grid-row: 2;
  grid-column: 2;
}