Merge pull request #940 from comicrelief/361_school_lookup

feat(SR payin update): Update audience images and style audience page

Author: AndyEPhipps

README.md

@@ -1,7 +1,7 @@
 # Comic Relief Pattern Lab [![NPM version][npm-image]][npm-url] [![Build Status][concourse-image]][concourse-url]
 > A Node-based project to supply Sass components and a styleguide generator.
 
-## The idea
+## The idea 
 To have a centralised hub supply common styling across Comic Relief products. 
 
 ## Quicklinks

sass/themes/payin/sportrelief/components/cards/_cards.scss

@@ -14,6 +14,7 @@
   .card {
     height: 350px;
     margin: 0 5% 20px;
+    border-radius: 4%;
 
     @include breakpoint($screen-md) {
       max-width: span(4 of 12);
@@ -25,15 +26,15 @@
     }
 
     &--school {
-      background: url($image-path + "nursery-school-university.jpg") 0 0/cover no-repeat;
+      background: url($image-path + "nursery-school.jpg") 0 0/cover no-repeat;
     }
 
     &--work {
       background: url($image-path + "workplace-organisation.jpg") 0 0/cover no-repeat;
     }
 
-    &--leisure {
-      background: url($image-path + "gym-leisure-sports.jpg") 0 0/cover no-repeat;
+    &--youth {
+      background: url($image-path + "youth-university.jpg") 0 0/cover no-repeat;
     }
 
     a {
@@ -49,14 +50,22 @@
 
     .cards__content {
 
-      h3 {
-        color: $colour-white;
+      .cards__title {
+        background-color: $colour-white;
+        opacity: 0.9;
         position: absolute;
-        bottom: 0;
+        bottom: -15px;
+        width:100%;
+      }
+      h3 {
+        color: $colour-black;
+        font-family: $montserrat;
+        @include font-size($h4-font-size);
+        font-weight: bold;
         left: auto;
         right: auto;
-        padding:0 30px 20px;
-        text-align: left;
+        padding:20px 30px 20px;
+        text-align: center;
       }
 
     }

sass/themes/payin/sportrelief/components/cards/images/gym-leisure-sports.jpg

@@ -0,0 +1,3 @@
+footer[role=contentinfo] {
+  background-color: $colour-SR20-light-blue;
+}

sass/themes/payin/sportrelief/components/cards/images/myself-friends-family.jpg

@@ -1,5 +1,5 @@
 .promo-header {
-  background-color: $colour-black-pearl;
+  background-color: $colour-SR20-light-blue;
 
   .promo-header__content {
     top: 0;