page folder

assets/css/components/_buttons.scss

@@ -3,6 +3,9 @@ button{
     font-family: var(--font);
     font-size: var(--fons-normal);
     color: var(--color-txt);
+    svg{
+        fill: var(--color-txt);
+    }
     &:hover{
         color: var(--grey-100);
         svg{ fill: var(--grey-100); }

assets/css/components/_card-article.scss

@@ -3,20 +3,21 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    padding: var(--padding-inner);
 
 
-    @include figure-16-9-hover();
+    @include figure-16-9();
 
     .content{
-        padding: var(--padding-inner);
+        // padding: var(--padding-inner);
         display: flex;
         flex-direction: column;
         flex-grow: 2;
     }
     .pin{
         position: absolute;
-        top: var(--padding-inner);
-        left: var(--padding-inner);
+        top: calc(var(--padding-inner)*1.5);
+        left: calc(var(--padding-inner)*1.5);
         z-index: 10;
         width: 24px;
         height: 24px;

assets/css/components/_card-folder.scss

@@ -1,14 +1,13 @@
 .card--folder{
     position: relative;
     max-width: var(--max-w-cards);
-
     border: var(--border-light);
     padding: var(--padding-inner);
-
-
     @include grid-content();
     @include figure-16-9();
 
+
+
     .content{
         display: flex;
         flex-direction: column;
@@ -73,6 +72,7 @@
         display: flex;
         flex-direction: column;
         padding: calc(var(--padding-inner)*0.5);
+        background-color: yellow;
         // .short{ display: none; }
 
         .content{ display: contents;}
@@ -87,3 +87,5 @@
  
 }
 
+
+

assets/css/components/_card-impact.scss

@@ -2,6 +2,10 @@
     @include grid-content();
     padding: calc(var(--spacing)*0.5) 0;
     border-bottom: var(--border-light);
+
+    container-type: inline-size;
+    container-name: impact;
+
     &:first-of-type{
         border-top: var(--border-light);
     }
@@ -44,7 +48,6 @@
     }
 
 
-        // @media #{$x-small-up}{
 
             .open-graph__details{
                 summary{
@@ -68,10 +71,12 @@
               
             }
         
-
-        // }
+}
 
 
-   
 
+@container impact (width < 420px) {
+    .date, .content, details{
+        font-size: 14px!important;
+    }
 }

assets/css/components/_card-open-graph.scss

@@ -1,5 +1,7 @@
 .card--open-graph{
 
+
+
     @include grid-content();
     
     border: var(--border-light);
@@ -9,11 +11,9 @@
     figure{
         grid-column: 1;
         grid-row: 1;
-
-    
     }
 
-    @include figure-16-9-hover();
+    @include figure-16-9();
     
 
     @media #{$x-small}{
@@ -33,11 +33,14 @@
     .site-name{
         color: var(--color-txt-light);
         font-size: var(--fs-small);
+        margin-bottom: 3px;
     }
 
     .title{
         font-size: var(--fs-normal);
         font-weight: normal;
+        line-height: 1.1;
+        padding-top: 2px;
         display: -webkit-box;
         -webkit-line-clamp: 2;    
         -webkit-box-orient: vertical;
@@ -57,7 +60,26 @@
     }
 
     &:hover{
-        .title{ text-decoration: underline;}
+        border-color: var(--color-txt);
 
     }
+}
+
+
+.open-graph__inner{
+
+    container-type: inline-size;
+    container-name: opengraph;
+}
+@container opengraph (width < 500px) {
+    .card--open-graph{
+
+        .content{
+            padding: calc(var(--padding-inner)*0.5);
+        }
+
+        figure{
+            aspect-ratio: inherit;
+        }
+    }
 }