style.css

@import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700');

body {
  font-family: 'Quattrocento Sans', sans-serif;
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: 700;
}

h1 {
  margin-top: 50px;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
}

nav {
  height: 50px;
  padding-top: 5px;
  background-color: #222;
  font-size: 28px;
  text-align: center;
  color: #FFF;
}

footer {
  margin-bottom: 20px;
  text-align: center;
}

a, a:hover {
  text-decoration: none;
}

a.home-link {
  color: #FFF;
}

a.article-link {
  color: #446CB3;
}

a.article-link:hover {
  color: #2E569B;
}

span.button {
  font-weight: 700;
  color: #446CB3;
}

.centerpiece {
  margin-top: 20px;
  margin-bottom: 20px;
}

.all-projects {
  display: none;
}

.image {
  width: 100%;
  height: auto;
}

.article-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.date-section {
  margin-top: 10px;
  margin-bottom: 10px;
}

.date-section p {
  margin-bottom: 0;
  text-transform: uppercase;
}

.credit {
  margin-bottom: 0;
  font-weight: 700;
}

@media screen and (min-width: 768px) {
  .article-text {
    padding-left: 0;
  }

  .featured:first-of-type {
    padding-right: 20px;
    border-right: 1px solid rgba(0,0,0,.1);
  }

  .featured:last-of-type {
    padding-left: 20px;
  }
}