chore: add a Card component

1 files changed, 27 insertions, 15 deletions

diff --git a/src/components/atoms/lists/description-list.module.scss b/src/components/atoms/lists/description-list.module.scss
index 4758816..caa2711 100644
--- a/src/components/atoms/lists/description-list.module.scss
+++ b/src/components/atoms/lists/description-list.module.scss
@@ -6,18 +6,6 @@
   gap: var(--spacing-2xs);
   margin: 0;
 
-  &__item {
-    display: flex;
-    flex-flow: column wrap;
-    gap: var(--spacing-2xs);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        flex-flow: row wrap;
-      }
-    }
-  }
-
   &__term {
     flex: 0 0 max-content;
     color: var(--color-fg-light);
@@ -27,16 +15,40 @@
   &__description {
     flex: 0 0 auto;
     margin: 0;
+  }
+
+  &__item {
+    display: flex;
+  }
+
+  &--inline &__item {
+    flex-flow: column wrap;
 
     @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        &:not(:first-of-type) {
+      @include mix.dimensions("xs") {
+        flex-flow: row wrap;
+        gap: var(--spacing-2xs);
+
+        .list__description:not(:first-of-type) {
           &::before {
             content: "/";
-            margin: 0 var(--spacing-2xs);
+            margin-right: var(--spacing-2xs);
           }
         }
       }
     }
   }
+
+  &--column#{&}--responsive {
+    @include mix.media("screen") {
+      @include mix.dimensions("xs") {
+        flex-flow: row wrap;
+        gap: var(--spacing-lg);
+      }
+    }
+  }
+
+  &--column &__item {
+    flex-flow: column wrap;
+  }
 }