finish page species

assets/css/pages/_home-item-nav.scss

@@ -0,0 +1,57 @@
+.item-nav{
+    border: 1.5px solid var(--color-txt);
+    border-radius: var(--radius-btn);
+        background-color: var(--white);
+        color: var(--color-txt);
+    // background-color: transparent;
+
+    padding: var(--padding-inner);
+    padding-bottom: calc(var(--padding-inner)*0.5);
+
+    min-height: calc(var(--unit)*5);
+
+    display: flex;
+    flex-direction: column;
+
+    &:hover{
+        background-color: var(--color-light);
+        // color: white;
+    }
+
+    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;
+    }
+
+    &:hover{
+        border-color: var(--color-txt);
+        .btn--go-to{
+            left: calc(var(--unit)*0.25);
+        }
+
+    }
+
+    
+}