see-more

assets/css/_home.scss

@@ -115,6 +115,18 @@
 
         }
 
+        .content{
+            position: relative;
+        }
+
+        .see-more{
+            position: absolute;
+            bottom: 0;
+            font-size: var(--fs-small);
+            --hover-bg: var(--color);
+        }
+        
+
 }
 
 
@@ -215,8 +227,8 @@
 
     .see-more{
         display: block;
-            color: var(--color-txt);
-            font-weight: bold;
+            // color: var(--color-txt);
+            // font-weight: bold;
             padding-top: calc(var(--unit)*1.5);
     }
 

assets/css/_see-more.scss

@@ -0,0 +1,26 @@
+.see-more{
+
+    --hover-bg: var(--color-bg);
+    font-weight: 500;
+    color: var(--color-txt);
+    color: currentColor;
+    text-decoration: none;
+    span{ display: none;}
+
+    &::after{ 
+        content: "→";
+        position: relative;
+        display: inline-block;
+        padding-left: 0.75ch;
+        left: 0;
+        transition: left .4s ease-in-out;
+    }
+    &:hover{
+        text-decoration: underline;
+        &::after{
+            left: 0.5ch;
+            text-decoration: underline var(--hover-bg);
+        }
+    }
+}
+

assets/css/_var.scss

@@ -4,6 +4,7 @@
     --font-title: 'Borna', Arial, sans-serif;
     --font: 'Nunito', Arial, sans-serif;
 
+    --fs-small: 11px;
     --fs-normal: 14px;
 
     font-size: 14px;
@@ -21,6 +22,7 @@
     --header-h: 60px;
 
     --white: white;
+    --color-bg: white;
 
 
     --color-violet:          #6e62a4;