Use different backgound colors for different goals

The same way it's done by the United Nations.

app/assets/stylesheets/_consul_settings.scss

@@ -123,3 +123,23 @@ $pagination-radius: $global-radius;
 $show-header-for-stacked: true;
 
 $tooltip-background-color: $brand;
+
+$sdg-colors: (
+  1: #e5243b,
+  2: #dda63a,
+  3: #4c9f38,
+  4: #c5192d,
+  5: #ff3a21,
+  6: #26bde2,
+  7: #fcc30b,
+  8: #a21942,
+  9: #fd6925,
+  10: #dd1367,
+  11: #fd9d24,
+  12: #bf8b2e,
+  13: #3f7e44,
+  14: #0a97d9,
+  15: #56c02b,
+  16: #00689d,
+  17: #19486a
+);

app/assets/stylesheets/sdg/goals/show.scss

@@ -4,4 +4,22 @@
   > * {
     @include grid-column-gutter;
   }
+
+  .sdg-goal {
+
+    > header {
+      color: #fff;
+      margin-top: $line-height / 2;
+      padding-left: rem-calc(24);
+      text-shadow: 0 0 1px $black;
+    }
+
+    @each $code, $color in $sdg-colors {
+      &.sdg-goal-#{$code} {
+        > header {
+          background-color: $color;
+        }
+      }
+    }
+  }
 }