feat: ✨ add quick info component

src/components/quick-info.webc

@@ -0,0 +1,44 @@
+<div class="quick-info">
+  <h3 class="title">Key Facts</h3>
+  <slot></slot>
+</div>
+
+<style>
+  .quick-info {
+    position: relative;
+    background: linear-gradient(
+      to bottom right,
+      oklch(from var(--clr-box-background) calc(l + 0.2) c h) 0%,
+      oklch(from var(--clr-box-background) l c h) 50%
+    );
+
+    box-shadow: 0em 1em 1.875em var(--clr-box-shadow);
+    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+    margin-block: 1em;
+    border-radius: 1em;
+    padding: 1em;
+
+    z-index: 1;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: var(--border-thin);
+      background: linear-gradient(
+        to bottom right,
+        var(--clr-quick-info-bg-start) 0%,
+        var(--clr-quick-info-bg-end) 50%
+      );
+      border-radius: inherit;
+      z-index: -1;
+    }
+
+    & .title {
+      margin-block: 0 1em;
+    }
+
+    & > :last-child {
+      grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    }
+  }
+</style>