Add keyfigues for operational learning

Author: roshni73

app/src/views/OperationalLearning/styles.module.css

@@ -104,6 +104,40 @@
             }
         }
     }
+    
+    .key-figure-card-list {
+        display: grid;
+        grid-gap: var(--go-ui-spacing-md);
+        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+
+        @media screen and (max-width: 30rem) {
+            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+        }
+
+        .key-figure-card {
+            display: flex;
+            gap: var(--go-ui-spacing-md);
+            border-radius: var(--go-ui-border-radius-lg);
+            box-shadow: var(--go-ui-box-shadow-md);
+            background-color: var(--go-ui-color-white);
+            padding: var(--go-ui-spacing-md);
+    
+            .separator {
+                flex-shrink: 0;
+                border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+            }
+    
+            .key-figure {
+                flex-basis: 0;
+                flex-grow: 1;
+                padding: 0;
+    
+                .key-figure-description {
+                    font-size: var(--go-ui-font-size-sm);
+                }
+            }
+        }
+    }
 }