<div class="img">
  <div class="img-block-1">
    <div class="img-block-item-1">
      
    </div>
    <div class="img-block-item-2">
      
    </div>
  </div>
  <div class="img-block-2">
    <div class="img-block1-item">
      
    </div>
    <div class="img-block2-2-item">
      
    </div>
    <div class="img-block2-3-item">
      
    </div>
  </div>
  <div class="img-block-3">
    <div class="img-block3-1-item">
      
    </div>
    <div class="img-block-3__wrap">
      <div class="img-block3-2-item">
      
      </div>
      <div class="img-block3-3-item">

      </div>
    </div>
  </div>
</div>
.img {
  width: 800px;
 height:  800px;
  background: grey;
  margin: 0 auto;
}
.img-block-1 {
  width: 100%;
  display: flex;
  padding: 20px;
}
.img-block-item-1 {
  width: 117px;
  height: 70px;
  background: red;
  margin-right: 20px;
} 

.img-block-item-2 {
  background: red;
  width: 117px;
  height: 70px;
}

.img-block1-item {
  width: 78px;
  height: 78px;
  background: red;
  margin-right: 20px;
}

.img-block2-2-item {
  width: 78px;
  height: 78px;
  background: red;
  margin-right: 20px;
}
.img-block2-3-item {
  width: 78px;
  height: 78px;
  background: red;
}

.img-block-2 {
  display: flex;
}


.img-block-3 {
  display: flex;
  margin-top: 20px;
}
.img-block-3__wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.img-block3-1-item {
  width: 92px;
  height: 115px;
  background: red;
  margin-right: 20px;
}
.img-block3-2-item {
  width: 177px;
  height: 33px;
  background: red;
}

.img-block3-3-item {
  width: 179px;
  height: 36px;
  background: red;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.