#app
  header.article-header
    .article-header-text
      h1.article-header-title Marley's Ghost
      h2.article-header-byline by Charles Dickens
  article.article-text
    aside.article-text-lead 
      h3 Marley was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner.
    article.article-text-content
      p Marley was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge’s name was good upon ’Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.

      p Mind! I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail. I might have been inclined, myself, to regard a coffin-nail as the deadest piece of ironmongery in the trade. But the wisdom of our ancestors is in the simile; and my unhallowed hands shall not disturb it, or the Country’s done for. You will therefore permit me to repeat, emphatically, that Marley was as dead as a door-nail.

      p Scrooge knew he was dead? Of course he did. How could it be otherwise? Scrooge and he were partners for I don’t know how many years. Scrooge was his sole executor, his sole administrator, his sole assign, his sole residuary legatee, his sole friend, and sole mourner. And even Scrooge was not so dreadfully cut up by the sad event, but that he was an excellent man of business on the very day of the funeral, and solemnised it with an undoubted bargain.

      p The mention of Marley’s funeral brings me back to the point I started from. There is no doubt that Marley was dead. This must be distinctly understood, or nothing wonderful can come of the story I am going to relate. If we were not perfectly convinced that Hamlet’s Father died before the play began, there would be nothing more remarkable in his taking a stroll at night, in an easterly wind, upon his own ramparts, than there would be in any other middle-aged gentleman rashly turning out after dark in a breezy spot—say Saint Paul’s Churchyard for instance—literally to astonish his son’s weak mind.

      p Scrooge never painted out Old Marley’s name. There it stood, years afterwards, above the warehouse door: Scrooge and Marley. The firm was known as Scrooge and Marley. Sometimes people new to the business called Scrooge Scrooge, and sometimes Marley, but he answered to both names. It was all the same to him.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700")

body, html
  font-family: 'Open Sans', sans-serif
  margin: 0
  background:
    color: #F9F9F9
    
@media (min-width: 1200px)
  
  #app
    display: flex
    
  
  @supports (display: grid)
    #app
      display: grid
      grid-template-columns: 1fr 1fr
    
.article-header
  background:
    image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/blake-cheek-631519-unsplash_resized.jpg)
    position: center
    size: cover
  height: 60vh
  position: relative
  
@media (min-width: 600px)
  .article-header
    height: 80vh
    
@media (min-width: 1200px)
  .article-header
    height: 100vh
    width: 50vw
  
.article-header-text
  position: absolute
  top: 1rem
  right: 1rem
  text-align: right
  max-width: 40%  
  
  h1,
  h2
    color: white
    
@media (min-width: 600px)
  .article-header-text
    max-width: 70%

.article-header-title
  text-transform: uppercase
  font-size: 2rem
  line-height: 1
  margin-bottom: 0
  
@media (min-width: 600px)
  .article-header-title
    font-size: 5.25rem
  
.article-header-byline
  font-weight: 400
  font-size: .9rem
    
@media (min-width: 600px)
  .article-header-byline
    font-size: 1.5rem
    
.article-text
  padding: 1rem
  max-width: 650px
  margin: auto
  
.article-text-lead
  padding: 2rem 1rem
  
  h3
    font-weight: 300
    text-align: center
    margin: 0
    line-height: 1.5
    
  @media (min-width: 600px)
    h3
      text-align: right
      font-size: 1.5rem
      
  @media (min-width: 1200px)
    h3
      font-size: 1.1rem
    
@media (min-width: 600px)
  .article-text-lead
    padding: 3rem 0 3rem 2rem  

@media (min-width: 1200px)
  .article-text-lead
    padding: 2rem 0 5rem 3rem
    
@media (min-width: 600px)
  .article-text-content
    columns: 2
    column-width: 300px
    
    p
      &:first-of-type
        margin-top: 0
      
@media (min-width: 1200px)
  .article-text-content
    columns: 3
    column-width: 100px
    
    p
      font-size: .95rem