Wire dynamic commentary and dictionary margin resources

src/App.css

@@ -635,6 +635,58 @@ textarea:focus-visible {
   color: #ffffff;
 }
 
+.resource-card {
+  display: grid;
+  gap: 9px;
+  margin-top: 14px;
+  padding: 12px;
+  border: 1px solid #dfd6c2;
+  border-radius: 6px;
+  background: #fffdf6;
+}
+
+.commentary-list,
+.dictionary-list {
+  display: grid;
+  gap: 12px;
+}
+
+.commentary-list section,
+.dictionary-list section {
+  display: grid;
+  gap: 5px;
+}
+
+.commentary-list h3,
+.dictionary-list h3 {
+  margin: 0;
+  color: #252821;
+  font-size: 14px;
+  letter-spacing: 0;
+}
+
+.commentary-list p,
+.dictionary-list p {
+  margin: 0;
+  color: #3f443d;
+  font-size: 13px;
+  line-height: 1.48;
+}
+
+.commentary-list small {
+  color: #657061;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.dictionary-list p strong {
+  display: block;
+  margin-bottom: 2px;
+  color: #657061;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
 .notes-workspace {
   display: flex;
   flex-direction: column;