Container with several boxes and centered items

I am struggling with my code. I need 8 boxes (2 columns with 4 rows) and the content shall be centered (horizontally and vertically). The content will be either an image or a text. The boxes shall have 50% of the width and there shall be space between the two boxes on one line. I tried different ways, but I wasn't successful.

My current code looks like this:

.desc {
  display: grid;
  grid-template-columns: 50% 50%;
  padding-bottom: 30px;
  text-align: center;
}
.image {
  height: 200px;
  max-height: 300px;
  max-width: 500px;
  object-fit: cover;
  object-position: center;

}
.text {
  text-align: center;
  vertical-align: middle;
}

<div class="desc">

  <div class="desc image">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p> 
  </div>
  
  
   <div class="desc image">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p> 
  </div>
  
  <div class="desc image">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p> 
  </div>
  
  
  <div class="desc image">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p> 
  </div>
</div>