fix max-width

blocks/card/card.css

@@ -21,7 +21,6 @@ raqn-card > div {
   position: relative;
   background-color: var(--scope-inner-background, transparent);
   padding: var(--scope-inner-padding, 20px);
-  padding-block-end: var(--scope-icon-size, 20px);
 }
 
 raqn-card > div div:last-child > a {
@@ -36,6 +35,11 @@ raqn-card > div div:last-child > a {
   padding: 0;
 }
 
+raqn-card > div:has(raqn-icon) {
+  padding-block-end: 0;
+  padding-block-end: var(--scope-icon-size, 20px);
+}
+
 raqn-card p:has(raqn-icon) {
   display: inline-grid;
 }

blocks/theme/theme.js

@@ -78,12 +78,10 @@ export default class Theme extends ComponentBase {
       } else {
         variable = `\n--raqn-${this.getKey(key)}-${row}: ${this.escapeHtml(
           value,
-        ).trim()};\n`;
-        this.atomic += `\nbody .${this.getKey(
+        ).trim()};`;
+        this.atomic += `body .${this.getKey(key)}-${row} {--scope-${this.getKey(
           key,
-        )}-${row} {\n--scope-${this.getKey(key)}: var(--raqn-${this.getKey(
-          key,
-        )}-${row});}\n`;
+        )}: var(--raqn-${this.getKey(key)}-${row});}\n`;
       }
     }
     return variable;
@@ -119,29 +117,30 @@ export default class Theme extends ComponentBase {
         (theme) => `.theme-${theme} {${k(t)
           .filter((key) => ![...this.skip, ...this.toTags].includes(key))
           .map((key) =>
-            t[key][theme]
-              ? `\n--scope-${key}: var(--raqn-${key}-${theme});`
-              : '',
+            t[key][theme] ? `--scope-${key}: var(--raqn-${key}-${theme});` : '',
           )
           .filter((v) => v !== '')
           .join('')}
         }`,
       )
       .join('');
 
-    this.variables = k(t)
+    this.variables = `body{${k(t)
       .filter((key) => ![...this.skip].includes(key))
       .map((key) => {
         const rows = k(t[key]);
         return rows.map((row) => this.renderVariables(key, row, t)).join('');
       })
-      .join('');
+      .join('')}}`;
   }
 
   styles() {
-    const style = document.createElement('style');
-    style.innerHTML = `${this.fontFace}body {${this.variables}}${this.tags}${this.atomic}${this.themes}`;
-    document.head.appendChild(style);
+    ['variables', 'tags', 'atomic', 'themes'].forEach((cssSegment) => {
+      const style = document.createElement('style');
+      style.innerHTML = this[cssSegment];
+      style.classList.add(cssSegment);
+      document.head.appendChild(style);
+    });
     document.body.classList.add('theme-default');
     document.body.style.display = 'block';
   }

styles/styles.css

@@ -156,7 +156,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-block: var(--scope-font-block-margins, 1em);
+  margin-block: var(--scope-margin-block, 1em);
 }
 
 @media screen and (min-width: 1024px) {