<ul>
  <li>
    <div class="thumb">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nGVicUEP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_350/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjxcgs7ogk65iswcjykt.png" alt="">
    </div>
    <div>
      <h2>title</h2>
      <h3>text text text text text text text text text text</h3>
    </div>
  </li>
  <li>
    <div class="thumb">img</div>
    <div>
      <h2>title</h2>
      <h3>text text text text text text text text text text</h3>
    </div>
  </li>
  <li>
    <div class="thumb">img</div>
    <div>
      <h2>title</h2>
      <h3>text text text text text text text text text text</h3>
    </div>
  </li>
  <li>
    <div class="thumb">img</div>
    <div>
      <h2>title</h2>
      <h3>text text text text text text text text text text</h3>
    </div>
  </li>
</ul>
ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 600px;
  
  li {
    border: 1px solid green;
    
    .thumb {
      aspect-ratio: 16/9; //292*164
      background-color: green;
      
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.