<div class="story">
  <div class="story__content">
    <h1 class="story__title">This is the Title of the Story</h1>
    <p class="story__subtitle">Sometimes there is a subtitle and that's cool to have. Sometimes they are even quite long — that's fine too...</p>
    <div class="story__copy">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc lectus, consectetur quis placerat a, ultricies vel dolor. Fusce id sagittis lectus, lacinia malesuada tellus. Duis rutrum neque ut mattis tempor. Duis quis egestas sem. Mauris posuere risus leo, et commodo dui suscipit eu.</p> 
      <p>Phasellus nisl sem, dapibus at nibh eu, ultrices tempor arcu. Praesent non tristique nulla. Phasellus pretium eros ac ante lobortis, iaculis laoreet elit venenatis. Nulla facilisi. Sed volutpat libero eget leo sollicitudin finibus.</p>
      <aside class="story__quote">Phasellus nisl sem, dapibus at nibh eu, ultrices tempor arcu. Praesent non tristique nulla.</aside>
      <p>Nam iaculis, arcu eget aliquam molestie, turpis libero tincidunt leo, ac tincidunt ante felis vitae urna. Integer consequat egestas erat bibendum posuere. Integer dapibus, justo non vehicula laoreet, sem justo efficitur ligula, nec malesuada neque eros in velit. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc lectus, consectetur quis placerat a, ultricies vel dolor. Fusce id sagittis lectus, lacinia malesuada tellus. Duis rutrum neque ut mattis tempor. Duis quis egestas sem. Mauris posuere risus leo, et commodo dui suscipit eu.</p> 
      <p>Phasellus nisl sem, dapibus at nibh eu, ultrices tempor arcu. Praesent non tristique nulla. Phasellus pretium eros ac ante lobortis, iaculis laoreet elit venenatis. Nulla facilisi. Sed volutpat libero eget leo sollicitudin finibus.</p>
      <p>Nam iaculis, arcu eget aliquam molestie, turpis libero tincidunt leo, ac tincidunt ante felis vitae urna. Integer consequat egestas erat bibendum posuere. Integer dapibus, justo non vehicula laoreet, sem justo efficitur ligula, nec malesuada neque eros in velit. </p>
    </div>
  </div>
  <div class="story__image" style="background-image: url(https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);"></div>
  
</div>
// Brand colours
$blue:      	#215;
$red:       	#B22;
$gold:      	#EA0;
$green:     	#790;
$aqua:      	#3BB;

// Other colours
$light:     	#EFEFEF;
$grey-lighter:	#ddd;
$grey-light:	#ccc;
$grey-medlight:	#999;
$grey-med: 		#777;
$grey-dark: 	#555;
$grey-darker:	#333;
$dark:      	#222;
$black:			#000;
$white:     	#FFF;
$yellow:		#ff9;
$yellow-bright: #ff0;
$mustard:		#eedd00;
$blue-med:		#0062A0;
$link:			#434082;

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

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
  padding: 0;
  margin:0;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5em;
}


.story__content { grid-area: sc;}
.story__image { grid-area: si;}
.story { 
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "si"
    "sc";
}

.story__image {
    min-height:300px;
  }

@media screen and (min-width: 900px) {
  .story { 
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 40px;
    
    grid-template-areas:
    "si sc";
  }  
}

@media screen and (min-width: 1300px) {
  .story { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    
    grid-template-areas:
    "si sc";
  }  
}

.story__title { grid-area: title; font-size: 2.2em; line-height: 0.95em; font-weight:400;}
@media screen and (min-width: 1020px) { 
  .story__title {  font-size: 3.2em; } 
}
.story__subtitle { grid-area: subtitle; text-transform: uppercase; font-weight: 100;}
.story__copy { grid-area: copy; line-height: 1.654321em; padding-bottom:40px;}

.story__content {
    display: grid;
    grid-template-columns: 20px 1fr 8fr 1fr 20px;
   grid-gap: 0px;

    grid-template-areas:
      ". title title . ."
      ". subtitle subtitle . . "
      ". copy copy copy .";  
  }

@media screen and (min-width: 1020px) {
  .story__content {
    display: grid;
    grid-template-columns: 1fr 1fr 5fr 5fr 40px;
    grid-template-rows: 170px auto auto auto;
    grid-gap: 0px;

    grid-template-areas:
      ". . . . ."
      "title title title . ."
      ". subtitle subtitle subtitle . "
      ". . copy copy .";  
  }
}

.story__quote {
  font-size: 1.25em;
  line-height:1.1em;
  padding: 40px 20px;
  border-top: 6px solid #777;
  border-bottom: 6px solid #777;
  margin: 20px auto;
  max-width: 90%;
  
  }

@media screen and (min-width: 1020px) {
  .story__quote {
    font-size: 1.45em;
    line-height:1.1em;
    padding: 40px ;
    border-top: 6px solid #777;
    border-bottom: 6px solid #777;
    margin-left: -80px;
    max-width: 100%;
  }

}

.story__image {
  background-color: #215;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.