custom <Image /> wrapper now supports static imports too

components/Header/Header.module.css

@@ -21,26 +21,13 @@
   margin: 0 auto;
 }
 
-.nav > div {
-  line-height: 0;
-}
-
-.name {
-  flex: 1;
-}
-
 @media screen and (max-width: 768px) {
   .header {
     padding: 0.75em 1.25em;
     height: 5.9em;
   }
 
-  .name {
-    flex: 0;
-  }
-
   .menu {
-    flex: 1;
     max-width: 325px;
     margin-left: 2.5em;
   }

components/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import Name from "../Name/Name";
+import Selfie from "../Selfie/Selfie";
 import Menu from "../Menu/Menu";
 
 import styles from "./Header.module.css";
@@ -7,13 +7,8 @@ import styles from "./Header.module.css";
 const Header = () => (
   <header className={styles.header}>
     <nav className={styles.nav}>
-      <div className={styles.name}>
-        <Name />
-      </div>
-
-      <div className={styles.menu}>
-        <Menu />
-      </div>
+      <Selfie className={styles.selfie} />
+      <Menu className={styles.menu} />
     </nav>
   </header>
 );