Fixed card gap

mikael-ros · Oct 27, 2024 · 1dbddfe · 1dbddfe
1 parent f21dee4
commit 1dbddfe
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/src/components/ui/Card.css b/src/components/ui/Card.css
@@ -7,14 +7,39 @@
 
     width: 900px;
     max-width: 900px;
-    gap: 1em;
+    --gap: 1em;
+}
+
+.card-group > *+* {
+    margin-top: var(--gap);
 }
 
 /* A card group that is vertically shared */
 .card-group--vertical {
     flex-direction: row;
 }
 
+.card-group > *+* {
+    margin-top: var(--gap);
+}
+
+.card-group--vertical > *+* {
+    margin-top: 0;
+    margin-left: var(--gap);
+}
+
+@supports ((aspect-ratio: 1 / 1) and (gap: 0)) {
+    .card-group {   
+        gap: var(--gap);
+    }
+
+    .card-group > *+*, .card-group--vertical > *+* {
+        margin: 0;
+    }
+}
+
+
+
 .card{
     --_radius: var(--radius, var(--aggressive-border-radius));
     --_bg-opacity: var(--bg-opacity, 0.1);