I have a 300x300 image that I'd like to fit into a grid (sized 158x175), but when I have...

<div className='box'>
   <div className='test'>
      <img src='https://via.placeholder.com/300x300' alt='Image Example'/>
   </div>
   <div className='test'>
      <p>Random text</p>
   </div>
   <div className='test'>
      <p>Random text</>
   </div>
</div>

box {
   display: grid;
   grid-template-columns: 158px auto auto;
   grid-template-rows: 175px;

   div.test {
      &:first-child {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   }
}

like I've seen a lot of people say from doing some research, the 300x300 block shrinks to 158x158, leaving about 17px of grid space left below the image. I would like the image to be cropped to fit the entire space, but I can't seem to get it to work. Does anyone have ideas as to what I'm doing wrong? I have also tried replacing height: 100%; to height: auto, and that moves my image down a few pixels, but I pretty much have the same issue as before.