Add article image

docs/_sass/specific.sass

@@ -33,3 +33,61 @@
     color: $text-strong
     &:hover
       border-bottom-color: $primary
+
+.article-image
+  background-color: $primary
+  display: block
+  height: 240px
+  margin-left: auto
+  margin-right: auto
+  width: 320px
+  position: relative
+  text-align: center
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      background-color: $color
+  &:hover
+    .article-overlay
+      opacity: 0.25
+    .article-icon
+      transform: scale(1.1)
+    .article-title
+      transform: scale(0.9)
+  &.is-single
+    margin-bottom: 2rem
+    width: 100%
+  +mobile
+    height: 180px
+    width: 240px
+
+
+.article-overlay
+  +overlay
+  background-color: $black
+  opacity: 0
+  transition-duration: $speed
+  transition-property: opacity
+  transition-timing-function: $easing
+
+.article-icon,
+.article-title
+  +overlay
+  align-items: center
+  display: flex
+  justify-content: center
+  transition-duration: $speed
+  transition-property: transform
+  transition-timing-function: $easing
+
+.article-icon
+  color: $black
+  opacity: 0.25
+  .fa
+    font-size: 56px
+
+.article-title
+  color: $white
+  font-size: 2.5rem
+  font-weight: $weight-bold
+  line-height: 1.25