``````<div class="cards">
<div class="card">
<h2>Bristol</h2>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
<div class="body">
<p>I live in Bristol. It mostly rains, but when it isn't raining we have hot air balloons.</p>
</div>

</div>

<div class="card">
<h2>Harbour Cranes</h2>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg" alt="Bristol harbour">
<div class="body">
<p>We also have giant cranes, and historic boats. It is best if the balloons avoid these.</p>
</div>
</div>

<div class="card">
<h2>Striped Balloon</h2>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/coloured-balloon.jpg" alt="Coloured balloon">
<div class="body">
<p>I like the nice standard balloons. Stripy. Solid looking basket.</p>
</div>
</div>

<div class="card">
<h2>Fortnum &amp; Mason</h2>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/champagne-balloons.jpg" alt="Fortnum and Mason balloon">
<div class="body">
<p>This one uses the correct Pantone colour for Fortnum and Mason.</p>
</div>
</div>

<div class="card">
<h2>Funfair Problems</h2>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/funfair-balloons.jpg" alt="Funfair">
<div class="body">
<p>Here we have balloons getting tangled up with a funfair.</p>
</div>
</div>

</div>``````
``````.cards {
display:grid;
grid-template-columns: repeat(6,[col] 1fr [col2] 1fr);
grid-gap: 10px;
}

.card:nth-child(1) {
grid-column: col 1 / col2 2;
}

.card:nth-child(2) {
grid-column: col 1 / col2 2;
grid-row: 2;
}

.card:nth-child(3) {
grid-column: col2 5 / col 7;
grid-row: 2;
}

.card:nth-child(4) {
grid-column: col2 2 / col2 5;
}

.card:nth-child(5) {
grid-column: col2 5 / col 7;
}

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

body {
font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fafafa;
}

img {
max-width: 100%;
}

.cards {
margin: 0 auto;
max-width: 960px;
}

.card {
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

background-color: rgb(41,73,130);
color: #fff;
}

font-size: 1.4rem;
font-weight: normal;
margin: 0;
}

.card .body {