/**
 * General
 */

body {
  background-color: #fdfcfa;
  color: #444;
}

h1, h2, h3, h4, h5, h6 {
  color: #222;
}

hr {
  width: 3em;
  margin-top: 2em;
  margin-bottom: 2em;
  border-bottom-style: hidden;
  color: #444;
}

small {
  color: #999;
}

/**
 * Links
 */

a:link,
a:active,
a:focus,
a:visited {
  color: #2996D2;
  text-decoration: none;
  border-bottom: 0.075em dotted #2996D2;
  transition: background-color 200ms ease;
}

a:hover {
  background-color: rgba(41, 150, 210, 0.05);
}

/**
 * Article info.
 */

.article-info__topics li:after {
  content: ', ';
}

.article-info__topics li:last-of-type:before {
  content: ' and ';
}

.article-info__topics li:last-of-type:after {
  content: '';
}

.article-info__topics li:first-of-type:before {
  content: '';
}

/**
 * General
 */

body {
  background-color: #fdfcfa;
  color: #444;
}

h1, h2, h3, h4, h5, h6 {
  color: #222;
}

hr {
  width: 3em;
  margin-top: 2em;
  margin-bottom: 2em;
  border-bottom-style: hidden;
  color: #444;
}

small {
  color: #999;
}

/**
 * Links
 */

a:link,
a:active,
a:focus,
a:visited {
  color: #2996D2;
  text-decoration: none;
  border-bottom: 0.075em dotted #2996D2;
  transition: background-color 200ms ease;
}

a:hover {
  background-color: rgba(41, 150, 210, 0.05);
}

/**
 * Images.
 */

figure img {
  filter: drop-shadow(0.15em 0.15em 0.1em #eee);
}

/**
 * Article info.
 */

.article-info__topics li:after {
  content: ', ';
}

.article-info__topics li:last-of-type:before {
  content: ' and ';
}

.article-info__topics li:last-of-type:after {
  content: '';
}

.article-info__topics li:first-of-type:before {
  content: '';
}

Add slight drop shadow around images.
Add slight drop shadow around images.

For all images inside `figure` tags, add a little drop-shadow. Very
progressive enhancement, so used the new filter vs box-shadow. This is
added so that images with a white background will pop against the
slightly warmer background.
