Cards keep style with form tag wrapped around header and footer in article

scss/_settings.scss

@@ -1,10 +1,36 @@
 @use "sass:map";
+@use "sass:math";
+@use "sass:list";
 
 // Settings
 // ––––––––––––––––––––
 
 // Theme color
-$theme-color: "lime" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
+$yo-themes: (
+  "amber",
+  "azure",
+  "blue",
+  "cyan",
+  "fuchsia",
+  "green",
+  "grey",
+  "indigo",
+  "jade",
+  "lime",
+  "orange",
+  "pink",
+  "pumpkin",
+  "purple",
+  "red",
+  "sand",
+  "slate",
+  "violet",
+  "yellow",
+  "zinc"
+);
+$random: list.nth($yo-themes, math.random(list.length($yo-themes)));
+// picks a random theme to use as default
+$theme-color: $random !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
 
 // Prefix for CSS variables
 $css-var-prefix: "--pico-" !default; // Must start with "--"

scss/components/_card.scss

@@ -1,13 +1,15 @@
 @use "sass:map";
 @use "../settings" as *;
 
-@if map.get($modules, "components/card") {
+@if map.get($modules, "components/card") or map.get($modules, "components/modal") {
   /**
    * Card (<article>, role="article")
    */
 
-  #{$parent-selector} article,
-  #{$parent-selector} [role="article"] {
+  #{$parent-selector} article:not(:has(> form)),
+  #{$parent-selector} [role="article"]:not(:has(> form)),
+  #{$parent-selector} article > form,
+  #{$parent-selector} [role="article"] > form {
     margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
     padding: var(#{$css-var-prefix}block-spacing-vertical)
       var(#{$css-var-prefix}block-spacing-horizontal);
@@ -41,6 +43,17 @@
       > h6 {
         margin-bottom: 0;
       }
+
+      > hgroup {
+        > h1,
+        > h2,
+        > h3,
+        > h4,
+        > h5,
+        > h6 {
+          margin-bottom: 0;
+        }
+      }
     }
 
     > footer {
@@ -56,7 +69,11 @@
       [type="submit"],
       [type="reset"],
       [type="button"],
-      [role="group"] {
+      [role="group"],
+      p,
+      nav,
+      ul,
+      ol {
         margin-bottom: 0px;
 
         &:last-child {

scss/components/_modal.scss

@@ -37,7 +37,8 @@
     }
 
     // Content
-    > article {
+    > article:not(:has(> form)),
+    > article > form {
       $close-selector: if(
         $enable-classes,
         ".close, :is(a, button)[rel=prev]",