Optimized header for small viewports

components/03_Organisms/header/_header.scss

@@ -3,14 +3,37 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: 70px;
+    height: 60px;
     
     &__Logo {
-        max-width: 300px;
-        width: 35%;
-        object-fit:contain;
-    }
-
-    .LP-Header__Logo{
+        height: 60px;
         margin: 25px;
+        object-fit:cover;
+        max-height: 100%;
+        overflow: hidden;
+
+        .LP-Image{
+            height: 60px;
+        }
+    }
+}
+
+@media(max-width: $-viewport-medium){
+    .LP-Header__Logo{
+        width: 60px;
+        .LP-Image{
+            object-position: 0 0;
+            object-fit: cover;
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Header__Logo{
+        display: none;
+    }
+
+    .LP-Header__Navigation{
+        width: 100%;
     }
 }

components/03_Organisms/header/header.hbs

@@ -1,6 +1,6 @@
 <header class="LP-Header">
     <div class="LP-Header__Logo">
-        {{render '@logo'}}
+        {{> @image source='/images/logo.png'}}
     </div>
     <div class="LP-Header__Navigation">
         {{> @navigation}}