responsive

assets/css/components/_card-folder.scss

@@ -36,6 +36,7 @@
         
         font-weight: 500;
         font-size: var(--fs-normal);
+        line-height: var(--leading-title);
 
         margin-bottom: 0.75em;  
          text-wrap: balance;
@@ -110,6 +111,7 @@
     padding-left: 0;
     padding-right: 0;
     border-bottom: var(--border-light);
+
     &:first-of-type{
         border-top: var(--border-light);
     }
@@ -126,33 +128,44 @@
         font-size: var(--fs-small);
     }
 
+   
+
 }
 
    
 
 
 
+@media #{$x-small} {
 
-@container cardfolder (width < 680px) {
-    figure{
-        aspect-ratio: inherit;
-        width: 100%;
-        height: 100%;
-    }
-    .short{
-        margin-top: calc(var(--spacing)*0.5);
-    }
-}
+    .card--folder{
 
-@container cardfolder (width < 520px) {
-    figure{
-        aspect-ratio: inherit;
-        width: 100%;
-        height: 100%;
-    }
-    .short, ul{
-        font-size: var(--fs-small);
+        .content {
+            display: contents;
+        }
+        figure {
+            grid-row: 1/3;
+        }
+    
+        .title {
+            font-size: var(--fs-small);
+            padding-top: calc(var(--spacing)*0.25);
+            margin-bottom: 0;
+        }
+    
+        .short {
+            grid-column: span 2;
+        }
+    
+        ul{
+            grid-column: 2;
+            grid-row: 2;
+            padding-top: 0;
         
+        }
+
     }
-   
+
+ 
+
 }