style: added media and container queries to card

frameless · Jun 12, 2024 · 4bc81bf · 4bc81bf
1 parent 861007b
commit 4bc81bf
Showing 1 changed file with 31 additions and 2 deletions.
diff --git a/packages/components-css/card-group/index.scss b/packages/components-css/card-group/index.scss
@@ -1,5 +1,34 @@
 .frameless-card-group {
-  border-radius: var(--frameless-border-radius-sm);
+  container-type: inline-size;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  grid-auto-flow: dense;
+}
+
+@media (width >= 600px) {
+  .frameless-card-group {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (width <= 900px) {
+  .frameless-card-group {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: 1fr;
+  }
+}
+
+@container (min-width: 450px) {
+  .frameless-card {
+    background-color: red;
+  }
+}
+
+@container (max-width: 450px) {
+  .frameless-card {
+    background-color: blue;
+  }
 }