Merge from git

styles/sass/patterns/_card.scss

@@ -68,9 +68,9 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
 }
 
 .card {
-    border: 1px solid $govuk-border-colour; //$panel-colour;
+    border: none;
     font-size: 16px;
-    background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    background-color: $lightgrey_offwhite;
 
     &.inactive {
         color: $govuk-secondary-text-colour;
@@ -82,11 +82,32 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
 
     .card-body {
         //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
-        padding: 12px;
+        padding: 40px 20px;
 
         *:last-child {
             margin-bottom: 0;
         }
+        a,
+        a:active,
+        a:visited {
+            color: $blue;
+            font-weight: bold;
+            &:hover {
+                color: $lightblue;
+            }
+            &.govuk-button {
+                color: $white;
+                &:focus {
+                    color: $black;
+                    background-image: url(https://gov.wales/themes/custom/govwales/storage/smartsurvey/arrow-right--black.svg);
+                }
+            }
+        }
+
+        a:focus {
+            border: $yellow solid 3px;
+            outline: 3px solid transparent;
+        }
 
         &.active {
             background-color: govuk-colour("light-grey", $legacy: "grey-4");
@@ -210,9 +231,9 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
     }
 }
 
-.card-body {
-    width: 93%;
-}
+// .card-body {
+//     width: 93%;
+// }
 
 div.cardModuleItem:last-of-type {
     margin-bottom: 20px !important;