partstyle.css

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@font-face {
  font-family: 'Queens Park';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/queens-park.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
section { display: flex; }
body > h1 { 
  font-family: Queens Park, serif;
  font-size: 4rem;
  text-align: center; 
}
article { 
  margin: 1rem;
  -ms-flex: 1 0 0px;
  flex: 1; 
  /* shortcut for "flex-grow: 1". Note that it MUST be a unitless value to work; defined with a unit (e.g. flex: 1px) the shortcut would alter the flex-basis property. */
}
article.breaking { 
  -ms-flex-grow: 2; 
  flex: 2; 
  /* shortcut for "flex-grow: 2" */
} 
 
article img { 
  width: 100%; height: auto; 
}
article h1, article h2, article h3 { font-family: Oswald, serif; }
article h1 { 
  font-size: 2rem; 
  line-height: 1.3;
}
article h2, article h3 { 
  font-size: 1.2rem; 
  text-align: right; 
  line-height: 1.3;
  margin: .3rem 0;
  font-weight: 300;
}
article h3 { 
  font-size: 1.1rem; 
}
article p { 
  font-family: Merriweather;
  line-height: 1.6; 
}
@media screen and (max-width: 750px) {
  body > h1 { font-size: 3rem; }
  section { 
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    flex-direction: column; 
  }
}