feat(nav): add image/icon to header

src/assets/styles/components/header.css

@@ -0,0 +1,48 @@
+.main-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  align-items: center;
+  width: var(--sizing-full);
+  padding-top: var(--spacing-3xl);
+
+  h1,
+  h1 a {
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+
+    img {
+      max-width: calc(var(--sizing-3xl) * 1.25);
+      transform: var(--transform-icon-default);
+      border: none;
+      filter: none;
+    }
+
+    span {
+      display: none;
+    }
+
+    @media screen and (min-width: 280px) {
+      span:first-of-type {
+        display: inline;
+      }
+    }
+
+    @media screen and (min-width: 480px) {
+      span:last-of-type {
+        display: inline;
+      }
+    }
+  }
+
+  h1 a:is(:hover, :focus, :active) img {
+    transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
+    transform: var(--transform-icon-tilt);
+  }
+}