<div class="wrapper">
  
  <div class="page-decoration">
  </div>
  
  <div class="page-cat">
    <p>modern world<br /><span class="green">houses we love</span></p>
  </div>
  
  <div class="page-credits">
    <p><span class="green">text by</span>Nate Berg</p>
    <p><span class="green">photos by</span>Zack Benson</p>
  </div>
  
  <header class="page-header">
    <h1>Mountain Song</h1>
    <h2>A San Diego architect creates a bold, energy-efficient compliment to the Western landscape.</h2>
  </header>
  
  <div class="page-hero">
     <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10859/dwell-mountain-song.jpg" width="700">
     </figure>
    <aside>
      <p class="green">Solar panels are affixed to the garage roof, which is angled to maximize exposure (left). A custom rain-gutter system collects even slight amounts of precipitation in an underground cistern and distributes it to the yard. The Cor-Ten pivoting window is by Brian Linn of Vincent Designs (below).</p>
    </aside>
  </div>
  
  <div class="page-content">
    <p><strong>From the floor of Pauma Valley, in</strong> consectetur adipiscing elit. Proin scelerisque tempus elit maximus egestas. Donec hendrerit malesuada varius. Sed leo eros, laoreet quis aliquam ut, feugiat vel elit. Proin sagittis sodales lacus, porttitor euismod ligula maximus in. Curabitur mollis diam ut aliquet maximus. Ut fermentum libero a tellus blandit, eu venenatis lectus tincidunt. Mauris varius lorem et tortor maximus blandit.</p>

    <p>Vivamus facilisis hendrerit tortor at porta. Mauris magna elit, ultrices vitae nisi nec, mollis egestas felis. Mauris dapibus, odio a pharetra cursus, erat ipsum tristique erat, maximus finibus nisi sem efficitur diam. Etiam euismod urna augue, ac scelerisque tellus eleifend elementum. Aliquam rhoncus vel mi a viverra. Nam ac augue non dui euismod fringilla id et sem. Aenean nec arcu placerat lorem ultrices interdum.</p>

    <p>Vivamus nec mauris vitae nunc facilisis ullamcorper quis non tortor. Phasellus ut finibus ligula. Fusce ut sagittis dui, nec tincidunt neque. Phasellus a lorem scelerisque, elementum turpis et, semper ipsum. Nulla facilisi. Vivamus sit amet pulvinar mauris, vitae fringilla lorem. Pellentesque sed erat vitae lacus consequat fermentum. Sed molestie nisl ante. Maecenas faucibus diam egestas ipsum pharetra fringilla. Proin laoreet nisi felis, sed lobortis ante aliquam in. Pellentesque sit amet nibh tortor.</p>
    
  </div>
  
  <div class="page-sidebar">
    <img src="https://d3df8ea8ea59eq.cloudfront.net/photos/6255455486444908544/6270294909871820800/large.jpg">
  </div>
  
  
  
</div>

*, *:before, *:after {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;
  background-color: #ebfdf6;
}
strong {
  font-weight: bold;
}
.green {
  color: #159850;
}
img {
  max-width: 100%;
  height: auto;
}
.page-content {
  font-family: Georiga, serif;
  line-height: 1.3;
  padding: 30px 30px 0 30px;
}
.page-content p {
  margin-bottom: 1em;
}
h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
  display: inline-block;
  padding: 19px 0;
  background-image: linear-gradient(#666, #666);
  background-repeat: no-repeat;
  background-size: 98% 1px;
  background-position: center bottom 25%;
  text-shadow: 
    3px 0 #fff,
    2px 0 #fff,
    1px 0 #fff,
    -1px 0 #fff,
    -2px 0 #fff,
    -3px 0 #fff;
}
h2 {
  font-size: 20px;
  font-weight: bold;
}

.wrapper {
  display: grid;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  grid-template-columns: [col] 16% [col] 16% [col] 16% [col] 16% [col] 16% [col] 16%;
  grid-template-rows: [row] auto [row] auto [row] auto [row];
/*   grid-auto-columns: 100px; */
}

.page-cat {
  grid-column: col / span 4;
  grid-row: row ;
  padding-top: 20px;
}
.page-credits {
  grid-column: col 5 / span 2;
  grid-row: row ;
  padding-top: 20px;
}
.page-header {
  grid-column: col 2 / span 4;
  grid-row: row 2;
  
  padding: 50px 0 20px;
}
.page-hero {
  grid-column: col / span 6;
  grid-row: row 3;
  
  display: flex;
  flex-direction: row;
}
.page-content {
  grid-column: col / span 4;
  grid-row: row 4;
  
  column-count: 2;
  column-gap: 20px;
}
.page-sidebar {
  grid-column: col 5 / span 2;
  grid-row: row 4;
  margin-top: -20px;
}
.page-decoration {
  grid-column: col 5 / span 1;
  background-color: #fff;
  grid-row: row 1 / span 4;
  width: 20px;
  z-index: -1;
  margin-left: -30px;
}

.page-hero figure {
 
}
aside {
  padding: 0 0 0 15px;
  max-width: 140px;
}
aside p {
  font-size: 11px;
}
.page-credits {
  font-size: 13px;
  display: flex;
}
.page-credits p:first-of-type {
  padding-right: 20px;
}
.page-credits span {
  font-size: 10px;
  text-transform: uppercase;
  display: block;
}