arrow go-to

assets/css/components/_buttons.scss

@@ -169,6 +169,51 @@ button:disabled{
 }
 
 
+@mixin btn--go-to(){
+    position: relative;
+    .btn--go-to{
+        position: absolute;
+        right: var(--padding-inner);
+        bottom: calc(var(--padding-inner) - 3px);
+        svg{
+            width: 15px;
+            height: 15px;
+            fill: var(--color-txt);
+        }
+        @media #{$small}{
+             svg{
+                width: 11px;
+                height: 11px;
+              }
+        }
+        @media #{$x-small}{
+                right: calc(var(--padding-inner)*0.5);
+                bottom: calc(var(--padding-inner)*0.25);
+             svg{
+                width: 11px;
+                height: 11px;
+              }
+        }
+    }
+    &:hover{
+        .btn--go-to{
+            animation: wiggle-left 0.8s ease-in-out;
+        }
+    }
+
+  
+}
+
+
+
+
+@keyframes wiggle-left {
+    0%   { transform: translateX(0); }
+    40%  { transform: translateX(-10px); }
+    80%  { transform: translateX(0); }
+    100% { transform: translateX(0); }
+}
+        
 
 
 .btn--back-to-top{

assets/css/components/_card-article-small.scss

@@ -13,13 +13,13 @@
         border-top: var(--border-light);
     }
 
-    @include figure-16-9-hover();
+    @include figure-16-9();
   
     .content{
         display: flex;
         flex-direction: column;
         padding-top: calc(var(--spacing)*0.25);
-
+        padding-right: calc(var(--padding-inner)*3);
     }
 
     .title{
@@ -48,6 +48,9 @@
         .title{ text-decoration: underline;}
     }
 
+    @include btn--go-to();
+  
+
     @media #{$medium}{
         .title{
             font-size: var(--fs-normal);

assets/css/components/_card-folder.scss

@@ -0,0 +1,75 @@
+.card--folder{
+    position: relative;
+
+    border: var(--border-light);
+    padding: var(--padding-inner);
+
+
+    @include grid-content();
+    @include figure-16-9();
+
+    .content{
+        display: flex;
+        flex-direction: column;
+    }
+
+
+    .title{
+        flex-grow: 1;
+        font-weight: normal;
+        font-size: var(--fs-medium);
+        margin-bottom: 0.25em;  
+         text-wrap: balance;
+        max-width: 42ch;
+        a{ text-decoration: none;}
+       
+         @media #{$small}{
+             font-size: var(--fs-normal);
+            }
+
+    }
+
+    .short{
+          @include clamp(2);
+    }
+
+    ul{
+        display: flex;
+        list-style: none;
+        gap: 1ch;
+        color: var(--color-txt-light);
+        padding-top: calc(var(--spacing)*0.5);
+
+        li + li{
+            &::before{
+                content: "|";
+                padding-right: 1ch;
+            }
+        }
+        @media #{$small}{
+             font-size: var(--fs-small);
+        }
+    }
+
+    .btn--go-to{
+        position: absolute;
+        right: calc(var(--padding-inner)*1);
+        bottom: var(--padding-inner);
+    }
+
+  @include btn--go-to();
+
+    &:hover{
+        border-color: var(--color-txt); 
+    }
+
+
+    @media #{$x-small}{
+        padding: calc(var(--padding-inner)*0.5);
+        .short{ display: none; }
+    }
+
+
+ 
+}
+