<div class="grid">
  <h1 class="main-headline">
    Tortor Ornares
  </h1>
  <h2 class="subhead">
    Cursus Bibendum Aenean
  </h2>
  <div class="image">
     <img src="https://images.unsplash.com/photo-1516263497941-cfa23ccbf9bd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2db6b5e01b853cdda6a5f8f8d6ec4c5c&auto=format&fit=crop&w=1567&q=80" alt="unsplash keyboard">
  </div>
  <p class="primary-text">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.
    <br>
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
    <br>
    Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  </p>
  <p class="primary-text">
    Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
    <br>
    Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    <br>
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas faucibus mollis interdum. Aenean eu leo quam.
  </p>
    <aside class="caption">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  </aside>
  <aside class="caption">
    Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  </aside>
  <aside class="caption">
    Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  </aside>
</div>

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700');

html,body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: lighten(black, 15%);
}

.main-headline {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 3rem;
  line-height: 3.75rem;
  margin: 0;
}

.subhead {
  font-family: 'Source Sans Pro', sans-serif;
  text-transform: lowercase;
  font-size: 2rem;
  line-height: 2.5rem;
  margin: 0;
}

.image {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.caption {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: .55rem;
  line-height: 1rem;
  margin: 0;
}

.primary-text {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  margin: 0;
}

.grid {
  width: 100vw;
  padding: 2rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 4rem 4rem 4rem auto auto;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  
  h1 {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
  }
  
  h2 {
    grid-column: 2 / 5;
    grid-row: 2 / 3;
  }
  
  .image {
    grid-column: 5 / 9;
    grid-row: 1 / 4;
  }
  
  p {
    &:nth-of-type(1) {
      grid-column: 1 / 5;
      grid-row: 4;
    }
    &:nth-of-type(2) {
      grid-column: 5 / 9;
      grid-row: 4;
    }
  }
  
  aside {
    &:nth-of-type(1) {
      grid-column: 3 / 5;
      grid-row: 5;
    }
    &:nth-of-type(2) {
      grid-column: 5 / 7;
      grid-row: 5;
    }
    &:nth-of-type(3) {
      grid-column: 7 / 9;
      grid-row: 5;
    }
  }
}

@media (max-width: 768px) {
  .grid {
    padding: 1rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto auto;
    
    h1 {
      grid-column: 1 / 5;
      grid-row: 1 / 2;
    }

    h2 {
      grid-column: 3 / 7;
      grid-row: 2 / 3;
    }
    
    .image {
      grid-column: 1 / 3;
      grid-row: 3 / span 2;
    }
    
    p {
      &:nth-child(odd), &:nth-child(even) {
      grid-column: 3 / 7;
      grid-row: auto;
      }
    }
    
    aside {
      &:nth-child(odd), &:nth-child(even) {
        grid-column: span 2;
        grid-row: auto;
      }
    }
  }
}

@media (max-width: 460px) {
  .grid {
    display: block;
    
    * + * {
      margin-bottom: 1rem;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.grid {
  position: relative;
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: repeating-linear-gradient(
      transparent, 
      transparent calc(1rem - 1px), 
      cyan calc(1rem - 1px), 
      cyan 1rem
    );
    opacity: .5;
  }
}