<main class="grid">
  <header>This is the header</header>
  <article>
    <div class="media">
  <div class="asset"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="hot air balloons"></div>
  <div class="content">
    <p>The first ascent, made in June from the Paris Observatory, though a lofty one, was attended with so much danger and confusion as to be barren of results. The departure, owing to stormy weather, was hurried and illordered, so that the velocity in rising was excessive, the net constricted the rapidly-swelling globe, and the volumes of out-rushing gas half-suffocated the voyagers. Then a large rent occurred, which caused an alarmingly rapid fall, and the two philosophers were reduced to the necessity of flinging away all they possessed, their instruments only excepted.</p>
    
  </div>
  
</div>
    <div class="media">
  <div class="asset"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="hot air balloons"></div>
  <div class="content">
    <p>The first ascent, made in June from the Paris Observatory, though a lofty one, was attended with so much danger and confusion as to be barren of results. The departure, owing to stormy weather, was hurried and illordered, so that the velocity in rising was excessive, the net constricted the rapidly-swelling globe, and the volumes of out-rushing gas half-suffocated the voyagers. Then a large rent occurred, which caused an alarmingly rapid fall, and the two philosophers were reduced to the necessity of flinging away all they possessed, their instruments only excepted.</p>
    
  </div>
  
</div>
    
  </article>
  <aside>This is an aside for some things</aside>
  <footer>Here is the footer</footer>
</main>

html {
  font: 1.1em/1.4 Helvetica, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

p {
  margin: 0 0 1em 0;
}

* { box-sizing: border-box; }

.grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
  border: 5px solid rgb(86,98,110);
  border-radius: 5px;
  padding: 10px;
}

.grid > * {
  border: 5px solid rgb(89,161,175);
  border-radius: 5px;
  padding: 10px;
}

@media (min-width: 40em) {
  .grid {
    grid-template-columns: 2fr 1fr;
  }
  
  header,
  footer {
    grid-column: 1 / 3;
  }
}

.media {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;
}

.media > * {
  flex: 1 1 250px;
  margin: 10px;
}