<div class="wrap">
  <div class="branding1">
    <h1>Branding</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque,
      impedit veritatis minus facilis tempore option.</p>
    <hr>
  </div>
  <div class="branding2">
    <img src="https://picsum.photos/id/1015/180/230" width="180" height="230" alt="Branding image">
  </div>
  <div class="design1"> <img src="https://picsum.photos/id/1016/180/230" width="180" height="230" alt="Branding image"></div>
  <div class="design2">
    <hr>
    <h1>Design</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque,
      impedit veritatis minus facilis tempore optio
    </p>
  </div>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  background-color: #fff;
  color: #000;
  min-height: 100vh;
}

.wrap {
  display: grid;
  max-width: 980px;
  margin: 2rem auto;
 /* padding: 2rem 4rem;*/
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  background-color: #efefef;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 4rem 1fr;
  grid-template-areas:
    "branding1 branding2"
    "design1 branding2"
    "design1 design2";
  /*
  background: linear-gradient(to bottom, #ddd 50%, #ccc 50%);
  */
}
.branding1 {
  grid-area: branding1;
  text-align: right;
  background:red;
}

.branding2 {
  grid-area: branding2;
  background:green;
}
.branding2 img,
.design1 img {
  display: block;
  width: 80%;
  height: auto;
  margin: auto;
}
.design1 {
  grid-area: design1;
  background:yellow;
}
.design2 {
  display: grid;
  grid-area: design2;
  align-content: end;
  background:teal;
}
.design2 h1 {
  margin: auto 0 1rem;
}
.design2 p {
  margin: 1rem 0 3rem;
  width: 80%;
}
.branding1 h1 {
  margin: 3rem 0 1rem;
  text-align: right;
}
.branding1 p {
  margin: 1rem 0 1rem auto;
  width: 80%;
}

.branding1 hr,
.design2 hr {
  margin: 1rem 0 1rem 30%;
  height: 1px;
  background: #666;
  border: none;
}

.design2 hr {
  margin: 0 30% 1rem 0;
}

/* alternative way to color blocks rather than gradient.*/
.design1,
.branding2,
.design1 img,
.branding2 img{position:relative;}

.design1:before,
.branding2:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2rem;
  background:red;
}
.branding2:before{
  top:auto;
  bottom:0;
  background:teal;
}


/* to be continued here*/
/* use your small screen media query to align into one column */

@media screen and (max-width: 800px) {
  /* linearise for mobiile etc....... */

  /*This is a rough demo of small screen*/
  .wrap {
    margin: 0.5rem;
    padding: 1rem;
    background: #eee;
  }
  .wrap,
  .design1,
  .design2,
  .branding1,
  .branding2 {
    text-align: left;
    margin: auto;
  }
    .design1,
  .design2,
  .branding1,
  .branding2{
    flex:1 0  100%;
    width:100%;
 }
  
  .branding1 h1,
  .design2 h1,
  .branding1 p,
  .design2 p {
    text-align: left;
    width: auto;
    margin: 1rem 0;
  }
  .wrap hr {
    width: auto;
    margin: 1rem 0;
  }
  .branding2 img,
  .design1 img {
    margin: 1rem auto;
    max-width: 320px;
  }
  .wrap {
    display: flex;
    flex-direction: column;
  }
  .branding2 {
    order: 99;
  }
}