Add right-side fundamentals drawer to card list page

styleguide.css

@@ -170,8 +170,11 @@
   --surface-navigation-card-body: var(--color-white);
   --surface-content-block-card-title: var(--color-light-grey);
   --surface-content-block-card-content: var(--color-white);
+  --surface-card-list-drawer: var(--color-light-grey);
   --text-content-block-card-title: var(--color-font-dark);
   --text-content-block-card-content: var(--color-font-dark);
+  --text-card-list-drawer: var(--color-font-dark);
+  --layout-card-list-drawer-width: 30%;
 
   /* Typography */
   --font-family-base: "Open Sans", sans-serif;
@@ -1667,6 +1670,50 @@ section + section {
   flex-direction: column;
 }
 
+.sg-card-list-page-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--layout-card-list-drawer-width);
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 220ms ease;
+  background: var(--surface-card-list-drawer);
+  color: var(--text-card-list-drawer);
+  box-shadow: var(--shadow-overlay);
+  z-index: 1000;
+}
+
+.sg-card-list-page-drawer[data-open="true"] {
+  transform: translateX(0);
+}
+
+.sg-card-list-page-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--card-segment-padding-horizontal);
+}
+
+.sg-card-list-page-drawer__title {
+  margin: 0;
+  color: inherit;
+}
+
+.sg-card-list-page-drawer__content {
+  padding:
+    0
+    var(--card-segment-padding-horizontal)
+    var(--card-segment-padding-vertical)
+    var(--card-segment-padding-horizontal);
+}
+
 .sg-card-list-page > * + * {
   margin-top: var(--spacing-large);
 }