Improved responsive behaviour

css/style.css

@@ -123,6 +123,10 @@ input, button, select {
   background: #fff;
 }
 
+.search {
+  width: 200px;
+}
+
 button {
   cursor: pointer;
 }
@@ -158,6 +162,12 @@ nav button:last-child {
   margin-right: 0;
 }
 
+aside {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 aside > section {
   display: flex;
   align-items: stretch;
@@ -301,19 +311,31 @@ p span a:last-child {
   margin-right: 0;
 }
 
+header a {
+  display: inline-block;
+}
+
 [v-cloak] {
   display: none;
 }
 
 /* media queries */
 
+@media (max-width: 1200px) {
+
+main > aside {
+  flex-direction: column;
+}
+
+}
+
 @media (max-width: 1000px) {
 
-  body {
-    padding: 30px;
-  }
+body {
+  padding: 30px;
+}
 
-  }
+}
 
 @media (max-width: 670px) {
 
@@ -348,4 +370,8 @@ input, button, select {
   margin: 0 0 5px 0;
 }
 
+.search {
+  width: auto;
+}
+
 }

index.html

@@ -38,7 +38,7 @@
     <main>
       <aside>
         <section>
-          <input placeholder="search" v-model="search" aria-label="search" />
+          <input placeholder="search" v-model="search" aria-label="search" class="search" />
           <select v-model="type" aria-label="film type">
             <option value="all">all types</option> 
             <option value="black & white">black & white</option>