From 4bc81bf4f41937cee6dd51237b6533fe7ac51fa7 Mon Sep 17 00:00:00 2001
From: Marwaxhello <112861555+Marwaxhello@users.noreply.github.com>
Date: Wed, 12 Jun 2024 10:12:46 +0200
Subject: [PATCH] style: added media and container queries to card

---
 packages/components-css/card-group/index.scss | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/components-css/card-group/index.scss b/packages/components-css/card-group/index.scss
index cea95b6a..c2048b48 100644
--- 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;
+  }
 }