Fill fundamentals drawer and add mobile detail page flow

styleguide.css

@@ -1685,6 +1685,7 @@ section + section {
   color: var(--text-card-list-drawer);
   box-shadow: var(--shadow-overlay);
   z-index: 1000;
+  overflow-y: auto;
 }
 
 .sg-card-list-page-drawer[data-open="true"] {
@@ -1707,13 +1708,31 @@ section + section {
 }
 
 .sg-card-list-page-drawer__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
   padding:
-    0
+    var(--card-segment-padding-vertical)
     var(--card-segment-padding-horizontal)
     var(--card-segment-padding-vertical)
     var(--card-segment-padding-horizontal);
 }
 
+.sg-card-list-page-drawer__info-card.sg-card {
+  --surface-card-header-primary: var(--color-light-grey);
+  --text-card-header: var(--color-font-dark);
+}
+
+.sg-card-list-page-mobile-detail {
+  display: none;
+  flex-direction: column;
+  gap: var(--spacing-large);
+}
+
+.sg-card-list-page-mobile-detail[hidden] {
+  display: none;
+}
+
 .sg-card-list-page > * + * {
   margin-top: var(--spacing-large);
 }
@@ -1746,6 +1765,14 @@ section + section {
 }
 
 @media (max-width: 767px) {
+  .sg-card-list-page-drawer {
+    display: none;
+  }
+
+  .sg-card-list-page-mobile-detail {
+    display: flex;
+  }
+
   .sg-card-list-page__intro-card.sg-card {
     align-self: stretch;
     width: 100%;