Update card color variant styles

src/scss/components/card/_card.scss

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+
+// Card color variants
+.irsr-cards-color--red,
+.irsr-cards-color--grey {
+  .su-card {
+    .su-link {
+      color: $su-color-white;
+
+      &::after {
+        background-color: $su-color-white;
+      }
+    }
+
+    .su-card__contents {
+      color: $su-color-white;
+
+      a {
+        color: $su-color-white !important;
+      }
+    }
+
+    // Event card
+    .su-event-start-month,
+    .su-event-start-date,
+    .su-event-list-item__date__seperator,
+    .su-event-end-month,
+    .su-event-end-date {
+      color: $su-color-white;
+    }
+
+    .su-event-list-item__details {
+      color: $su-color-white;
+
+      .event-list-item__type a {
+        color: $su-color-white;
+      }
+
+      h2 a {
+        color: $su-color-white;
+      }
+
+      .date-icon::before,
+      .map-icon::before {
+        color: $su-color-white;
+      }
+
+    }
+
+
+  }
+}
+
+.irsr-cards-color--red {
+  .su-card {
+    background-color: $su-color-digital-red;
+  }
+}
+
+.irsr-cards-color--grey {
+  .su-card {
+    background-color: $su-color-black;
+  }
+
+  .su-list-button {
+    .su-button {
+      background-color: $su-color-black;
+    }
+  }
+}

src/scss/components/card/index.scss

@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+@import 'card';

src/scss/components/index.scss

@@ -23,3 +23,4 @@
 // @import 'component-name/index';
 
 @import 'banner/index.scss';
+@import 'card/index.scss';