transform css to sass

assets/css/_home-item-nav.scss

@@ -0,0 +1,52 @@
+.item-nav{
+    border: 1px solid var(--color-txt-light);
+    border-radius: var(--radius-small);
+    background-color: var(--white);
+
+    padding: var(--padding-inner);
+    padding-bottom: calc(var(--padding-inner)*0.5);
+
+    min-height: calc(var(--unit)*5);
+    max-width: 440px;
+
+    display: flex;
+    flex-direction: column;
+
+    cursor: pointer;
+
+    .title{
+        font-family: var(--font-title);
+        font-size: 1.4rem;
+        line-height: 1.1;
+        padding-right: 1ch;
+        font-weight: normal;
+    }
+
+    .btn--go-to{
+        width: var(--unit);
+        height: var(--unit);
+        align-self: end;
+        font-family: var(--font-title);
+        position: relative;
+        font-size: 14px;
+        left: calc(var(--unit)*-0.25);
+        transition: left .4s ease-in-out;
+    }
+
+    .description{
+        margin-top: 0.5em;
+        flex-grow: 2;
+        padding-right: 2ch;
+        font-weight: 500;
+    }
+
+    &:hover{
+        border-color: var(--color-txt);
+        .btn--go-to{
+            left: calc(var(--unit)*0.25);
+        }
+
+    }
+
+    
+}

assets/css/_home.scss

@@ -1,8 +1,4 @@
-#home__hero{
-    --color: var(--color-green);
-    --color-medium: var(--color-green-medium);
-    --color-light: var(--color-green-light);
-}
+
 
 
 #home__livrets{
@@ -45,43 +41,6 @@
 
 
 
-.item-nav{
-    border: 1px solid var(--color-txt-light);
-    border-radius: var(--radius-small);
-    background-color: var(--white);
-
-    padding: var(--padding-inner);
-    padding-bottom: calc(var(--padding-inner)*0.5);
-
-    min-height: calc(var(--unit)*5);
-    max-width: 440px;
-
-    display: flex;
-    flex-direction: column;
-
-    .title{
-        font-family: var(--font-title);
-        font-size: 1.4rem;
-            line-height: 1.1;
-            padding-right: 1ch;
-
-        font-weight: normal;
-        
-    }
-
-    button{
-        width: var(--unit);
-        align-self: end;
-    }
-
-    .description{
-        margin-top: 0.5em;
-        flex-grow: 2;
-        padding-right: 2ch;
-    }
-
-    
-}
 
 .item-nav__group{
     display: flex;
@@ -105,18 +64,9 @@
         padding: calc(var(--padding-inner)*1.5) var(--padding-inner); 
         width: 100%;
         height: 100%;
-         /* max-width: 440px; */
-        /* text-align: center; */
         display: flex;
         justify-content: space-between;
         gap: var(--unit);
-        /* flex-direction: column; */
-        /* justify-content: center;
-        align-items: center; */
-
-    
-      
-
 
         figure{
             width: 100%;
@@ -138,6 +88,7 @@
             margin-bottom: calc(var(--unit)*0.5);
             /* text-decoration: 1px underline;
             text-underline-offset: 3px; */
+            color: var(--color);
 
             display: inline-flex;
             align-items: center;
@@ -153,10 +104,15 @@
             font-weight: normal;
             margin-top: 0.5em;
              margin-bottom: 0.25em;
+             color: var(--color-light);
+
         }
         .details{
               margin-bottom: calc(var(--unit)*0.75);
-              font-size: 0.8rem;
+            //   font-size: 0.8rem;
+              color: var(--color-light);
+              font-weight: 500;
+
         }
 
 }
@@ -388,17 +344,3 @@
 }
 
 
-     /* .btn--outline{
-                    font-weight: 500;
-                    font-size: 1.2rem;
-
-        border: 1px solid var(--color);
-        color: var(--color);
-
-         display: inline-flex;
-            align-items: center;
-            height: calc(var(--unit)*1.5);
-            padding: 0px 1ch;
-            border-radius: var(--radius-btn);
-            cursor: pointer;
-    } */

assets/css/_site-header.scss

@@ -83,80 +83,4 @@
 }
 
 
-
-/*----------------*/
-/*       nav      */
-/*----------------*/
-
-
-/*----------------*/
-/*       nav      */
-/*----------------*/
-
-/* #site-nav a {
-    text-decoration: none;
-    color: var(--color-txt);
-}
-
-#site-nav .nav-level-1_li{
-    position: relative;
-    float: left;
-}
-
-#site-nav .nav-level-2_li {
-    display: block;
-
-    float: left;
-    padding: var(--padding-inner);
-    position: relative;
-    text-decoration: none;
-
-}
-
-#site-nav .nav-level-1_ul{
-    display: flex;
-    gap: 40px;
-}
-
-#site-nav .nav-level-1_li{
-    font-weight: 500;
-}
-
-
-#site-nav li:hover {
-    cursor: pointer;
-}
-
-.nav-level-2_ul {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    display: none;
-    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
-    margin-top: var(--padding-inner); 
-    width: 200px;
-    border-top: solid 1px black;
-}
-
-ul li:hover > ul,
-.nav-level-2_ul:hover {
-    visibility: visible;
-    opacity: 1;
-    display: block;
-}
-.nav-level-2_li{
-    width: 100%;
-}
-.nav-level-2_li:hover{
-    background-color: bisque;
-}
-
-
-.li-dropdown::after{
-    content: "›";
-    padding-left: 0.5ch;
-    font-size: 1.2em;
-    line-height: 0;
-
-} */
+ 

assets/css/_var.scss

@@ -27,7 +27,7 @@
     --color-violet-medium:   #9b92c4;
     --color-violet-light:    #e1dfec;
 
-    --color-yellow:          #cdaa38;
+    --color-yellow:          #c4a233;
     --color-yellow-medium:   #e0c46a;
     --color-yellow-light:    #f5f0d5;
     --color-map:        #ad8422;