Add hover effects on Footer links

src/style/organisms/_footer.scss

@@ -19,6 +19,7 @@
     &__title {
         grid-column: span var(--columns);
         grid-row: 1;
+        display: block;
         margin-bottom: 40px;
         text-decoration: none;
 
@@ -27,6 +28,13 @@
             grid-row: 1;
             margin: auto 0;
         }
+
+        // hover
+        .site-title:hover {
+            strong, span {
+                color: #fff;
+            }
+        }
     }
 
     // Links
@@ -48,6 +56,7 @@
         li {
             display: block;
             margin-bottom: 16px;
+            overflow: hidden;
 
             @include bp (sm) {
                 margin: 0 12px;
@@ -61,7 +70,9 @@
             }
         }
         a {
-            display: block;
+            position: relative;
+            display: flex;
+            align-items: center;
             color: #fff;
             text-decoration: none;
             font-size: rem(14px);
@@ -71,12 +82,57 @@
             @include bp (md) {
                 font-size: rem(16px);
             }
+
+            // Hover effect
+            .text-split__line {
+                &:last-child {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    color: $color-secondary;
+                    transform: translate3d(0, 100%, 0);
+                    opacity: 0;
+                    transition-delay: calc(var(--i-w) * 100ms);
+                }
+            }
+            &:hover {
+                .text-split__line {
+                    &:first-child {
+                        opacity: 0;
+                        transform: translate3d(0, -25%, 0);
+                        transition-duration: 0.5s;
+                    }
+                    &:last-child {
+                        opacity: 1;
+                        transform: translate3d(0, 0, 0);
+                    }
+                }
+            }
         }
         svg {
-            margin-right: 12px;
+            margin-right: 8px;
 
             @include bp (md) {
-                margin-right: 16px;
+                margin-right: 12px;
+            }
+        }
+
+        // Instagram link
+        .instagram {
+            &__text {
+                position: relative;
+            }
+            svg {
+                transition: color 0.35s;
+            }
+
+            // Hover
+            a:hover {
+                svg {
+                    color: $color-secondary;
+                }
             }
         }
     }