summary list styling

src/all.scss

@@ -9,6 +9,7 @@
 @import "components/card/card";
 @import "components/tag/tag";
 @import "components/timeline/timeline";
+@import "components/summary-list";
 
 // utilities
 @import "utilities/truncate";

src/components/summary-list/_index.scss

@@ -0,0 +1,34 @@
+.nhsapp-summary-list {
+  // Override the NHS UK Frontend summary list component to display two columns on mobile
+  &--two-columns-mobile {
+    @include mq($until: tablet) {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+    }
+
+    .nhsuk-summary-list__key,
+    .nhsuk-summary-list__value,
+    .nhsuk-summary-list__actions {
+      border-bottom: 1px solid $nhsuk-border-color;
+      display: table-cell;
+      padding-bottom: nhsuk-spacing(2);
+      padding-right: nhsuk-spacing(4);
+      padding-top: nhsuk-spacing(2);
+    }
+
+    .nhsuk-summary-list__row {
+      display: table-row;
+    }
+
+    .nhsuk-summary-list__key {
+      @include mq($until: tablet) {
+        width: 50%;
+      }
+    }
+
+    .nhsuk-summary-list__value {
+      width: 50%;
+    }
+  }
+}