🐞 feat: Add contact information section to footer with address, email, and phone icons

styles/components/site-footer.css

@@ -18,6 +18,33 @@
 
         a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
     }
+
+    .contact__item {
+        @apply flex justify-start items-start font-light text-white text-14px mb-2;
+
+        p { @apply m-0 p-0; }
+
+        a { @apply text-white hover:text-secondary-400 focus-visible:text-secondary-400; }
+
+        &::before {
+            @apply inline-block mr-2;
+
+            content: "";
+            height: 1.5rem;
+            width: 1.5rem;
+        }
+
+        &.contact__phone::before {
+            background: url("../../static/img/footer-phone.svg") no-repeat center center;
+        }
+        &.contact__email::before {
+            background: url("../../static/img/footer-email.svg") no-repeat center center;
+        }
+        &.contact__address::before {
+            background: url("../../static/img/footer-map.svg") no-repeat center center;
+            padding-top: 2rem;
+        }
+    }
 }
 
 @media (max-width: 767px) {

styles/fonts/lineicons.css

@@ -52,19 +52,20 @@ Lineicons regular icon font
 .circular-icon {
     @apply box-content bg-secondary rounded-full text-white flex justify-center items-center;
 
-    --size: 2rem;
+    --size: 1.5rem;
     height: var(--size);
     text-align: center;
     width: var(--size);
 
     i {
-        display: inline-block;
-        height: var(--size);
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
         line-height: 1;
-        margin-top: 0.5rem;
-        text-align: center;
-        vertical-align: middle;
-        width: var(--size);
+        margin: 0;
+        padding: 0;
+        width: 100%;
     }
 
     &i::before, span { line-height: var(--size) !important; }