// An article design based upon this magazine layout:
// https://s-media-cache-ak0.pinimg.com/736x/06/f4/2a/06f42afedb3c123913797d5d84a516a2.jpg

// Beware: It's not very responsive


.masthead
  h1 Small
  .butterfly-image
    img(src="https://67.media.tumblr.com/482c18c3fb67efe185946bba6dd3632f/tumblr_mgyayf4tBV1rgpyeqo1_400.png")
  h2 Wonders
.subhead
  h3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium totam libero nesciunt nostrum nulla! Minus accusantium nulla corporis esse reiciendis.
.article
  p.lead Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium totam libero nesciunt nostrum nulla! Minus accusantium nulla corporis esse reiciendis.
  .article-text
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia animi velit iusto fugiat cumque. Accusantium iure cumque ratione eligendi quia sit, harum quos esse, vero assumenda dicta, consequatur debitis nemo perferendis! Quas sunt, fugit enim maxime numquam repudiandae quasi autem.

    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero excepturi quam voluptatum perspiciatis velit tempore est quas. Impedit dicta provident ab, magni voluptatibus eius modi unde porro, sit excepturi, atque! Totam iste cum officia, quis nam sunt! Dolorum hic voluptatibus unde soluta cupiditate repellat dignissimos culpa, saepe tempora inventore est?

    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus saepe autem voluptatum harum numquam, ad placeat sit fugiat, quia consequuntur suscipit consectetur accusantium! Delectus sint explicabo totam, a corporis.

    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus saepe autem voluptatum harum numquam, ad placeat sit fugiat, quia consequuntur suscipit consectetur accusantium! Delectus sint explicabo totam, a corporis.

    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia animi velit iusto fugiat cumque. Accusantium iure cumque ratione eligendi quia sit, harum quos esse, vero assumenda dicta, consequatur debitis nemo perferendis! Quas sunt, fugit enim maxime numquam repudiandae quasi autem.
      img(src="https://67.media.tumblr.com/482c18c3fb67efe185946bba6dd3632f/tumblr_mgyayf4tBV1rgpyeqo1_400.png")

body
  font-size: 18px
  padding: 30px
  max-width: 1000px
  margin: auto
  background: radial-gradient(at 48% 35px,white, #FFF8E1, #FFF8E1)
  background: -webkit-radial-gradient(48% 350px,white, #FFF8E1, #FFF8E1)
  font-family: 'Cormorant Garamond', serif
  
.masthead
  position: relative
  text-align: center
  text-transform: uppercase
  font-family: 'Crimson Text', serif
  
  h1,
  h2
    padding: 0
    margin: 0
    font-weight: normal
  
  h1
    font-size: 10em
    letter-spacing: .6em
    padding-bottom: 10px
    border-bottom: 5px solid #444
    margin-bottom: 10px
      
  h2
    font-size: 6.8em
    letter-spacing: .55em
    padding-bottom: 10px
    border-bottom: 5px solid #444
    
.butterfly-image
  position: absolute
  left: 340px
  top: 100px
  
.subhead
  font-size: 1.3em
  border-bottom: 5px solid #444
  margin-bottom: 1em
  text-align: justify
  line-height: 1.7
  text-transform: uppercase
  
  h3:first-letter
    font-size: 1.3em
  
.lead
  margin-top: 0
  font-size: 1.5vw
  padding-bottom: 1em
  border-bottom: 5px solid #444
  text-align: justify
  line-height: 1.7
  text-transform: uppercase
  
  &:first-letter
    font-size: 1.3em

.article
  columns: 2
  column-gap: 2em
  column-width: 300px
  
.article-text
  font-size: 2vw
  text-align: justify
  
  p
    img
      width: 1em
      margin: 0 10px -5px 10px
  
.article-text:first-letter
  float: left
  font-size: 4em
  padding: 0 10px 0 0
  line-height: .9