<img src="https://via.placeholder.com/500?text=placeholder" alt="">
<img src="https://via.placeholder.com/500?text=placeholder" alt="">
<img src="https://via.placeholder.com/500?text=placeholder" alt="">
<img src="https://via.placeholder.com/500?text=placeholder" alt="">  
<img src="https://via.placeholder.com/500?text=placeholder" alt="">  
<img src="https://via.placeholder.com/500?text=placeholder" alt="">  
<img src="https://via.placeholder.com/500?text=placeholder" alt="">  
<img src="https://via.placeholder.com/500?text=placeholder" alt="">
<img src="https://via.placeholder.com/500?text=placeholder" alt="">
<img src="https://via.placeholder.com/500?text=placeholder" alt="">
<img src="https://via.placeholder.com/500?text=placeholder" alt="">
<img src="https://via.placeholder.com/500?text=placeholder" alt="">

html {
  box-sizing: border-box;
}

img {
  width: 100%;
  border: 1px solid black;
}

@media (min-width: 576px) {
  img {
    width: 49%;
  }
}

@media (min-width: 992px) {
  img {
    width: 24%;
  }
}