Image sets minimum height on CSS Grid?

Question

I'm trying to set up a grid layout, which has images with object-fit: cover on them, however this seems to set a minimum height on the grid layout. Is this intended, or am I doing something wrong?

Here's my markup:

<div class="test">
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
</div>

And styling:

.test {
    display: grid;
    grid-template-columns: [main] 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    height: 330px;
    width: 500px;
    margin-bottom: 30px;
    grid-template-areas: "main . ." "main . .";
}

.item {
  width: 100%; height: 100%;
  &:first-child {
    grid-area: main;
  }
}

.cover {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

If I go below 170px height on the .test grid container, it won't shrink. If I switch to using background-image on the .item div and remove the <img/>, it works fine. Although I don't want to do that, I need the image tag for proper markup.

Here's the code running on codepen