Responsify header

src/app/app.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <header class="app-header">
       <router-link :to="{ path: '/' }">
-        <img :src="euromatLogo" width="90" height="90" />
+        <img class="header-logo" :src="euromatLogo" width="90" height="90" />
       </router-link>
 
       <app-menu :main="topMenu" :languages="languages" />
@@ -228,6 +228,20 @@
     justify-content: space-between;
     align-items: flex-start;
     padding: $base-gap $small-gap 0 $base-gap;
+
+    @media (max-width: 650px) {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: $small-gap - 5;
+      margin-bottom: $base-gap;
+    }
+  }
+
+  .header-logo {
+    @media (max-width: 650px) {
+      margin-bottom: $small-gap;
+    }
   }
 
   .app-background {

src/components/menu.vue

@@ -49,10 +49,16 @@
   @import "~styles/colors";
   @import "~styles/layout";
 
+  $language-btn-size: 45px;
+
   .app-menu {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+
+    @media (max-width: 480px) {
+      flex-direction: column;
+    }
   }
 
   ul {
@@ -64,6 +70,14 @@
     width: 100%;
     display: flex;
 
+    @media (max-width: 480px) {
+      margin-bottom: $small-gap + 5;
+
+      li:last-child {
+        margin-right: 0;
+      }
+    }
+
     li {
       margin-right: $base-gap;
     }
@@ -86,8 +100,8 @@
       margin-right: 5px;
       background: rgba(0, 0, 0, 0.1);
       border-radius: 100%;
-      width: 40px;
-      height: 40px;
+      width: $language-btn-size;
+      height: $language-btn-size;
       transform: scale(1);
       transition:
         transform 150ms $easeInOutQuint,