Как сделать такие адаптивные блоки?

.el_wrapper { 
  max-width: 1200px; 
  display: flex; 
  flex-wrap: wrap; 
  width: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
.element { 
  width: 33.33%; 
  border: 1px solid #000; 
  min-width: 100px; 
  min-height: 50px; 
  margin-bottom: 5px; 
  box-sizing: border-box; 
  position: relative; 
} 
 
.half { 
  width: 50%; 
} 
 
.img_api { 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
  background-position: 50%; 
  background-size: cover; 
  background-repeat: no-repeat; 
}

<div class="el_wrapper"> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element half"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element half"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element half"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element half"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element half"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element half"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
  <div class="element"> 
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div> 
  </div> 
</div>

content { 
  flex: all; 
  justify-content: space-between; 
} 
 
div { 
  margin: 10px; 
  border: 2px solid black; 
  display: inline-block; 
} 
 
h1 { 
  font-size: 40px; 
  text-align: center; 
  margin: 30px; 
}

<content> 
  <div style=" width: 200px; height: 100px;"> 
    <h1>1</h1> 
  </div> 
  <div style=" width: 300px; height: 100px;"> 
    <h1>2</h1> 
  </div> 
  <div style=" width: 400px; height: 100px;"> 
    <h1>3</h1> 
  </div> 
  <div style=" width: 500px; height: 100px;"> 
    <h1>4</h1> 
  </div> 
  <div style=" width: 600px; height: 100px;"> 
    <h1>5</h1> 
  </div> 
</content>