feat: Responsive layout

* add breakpoints for size beyond phone portrait width
* add grid and flex layouts for content blocks beyond assumed default of
  vertical stacking

Resolves: #13

css/styles.css

@@ -77,7 +77,7 @@ section {
 #maincontent {
   background-color: #f3f3f3;
   min-height: 100%;
-  width: 100%;
+  min-width: 100%;
 }
 
 #footer {
@@ -117,7 +117,7 @@ nav h1 a {
   background-color: #eee;
   font-size: 17px;
   margin: 0;
-  width: calc(50% - 80px);
+  width: calc;
 }
 
 /* Display list items side by side */
@@ -202,7 +202,6 @@ nav h1 a {
   min-height: 380px;
   padding: 0 30px 25px;
   text-align: left;
-  /* width: 270px; */
 }
 
 #restaurants-list .restaurant-img {
@@ -253,23 +252,12 @@ nav h1 a {
 
 .inside #map-container {
   background: blue none repeat scroll 0 0;
-  height: 87%;
-  position: fixed;
-  right: 0;
-  top: 80px;
-  width: 50%;
-}
-
-.inside #map {
-  background-color: #ccc;
-  height: 100%;
-  width: 100%;
 }
 
 .inside #footer {
   bottom: 0;
   position: absolute;
-  width: 50%;
+  width: 100%;
 }
 
 #restaurant-name {
@@ -309,11 +297,6 @@ nav h1 a {
 #reviews-container {
   border-bottom: 1px solid #d9d9d9;
   border-top: 1px solid #fff;
-  padding: 140px 40px 30px;
-  width: 50%;
-}
-
-#reviews-container {
   padding: 30px 40px 80px;
 }
 
@@ -351,49 +334,63 @@ nav h1 a {
 }
 
 /* ====================== Media and property queries ====================== */
+
 @supports (display: flex) {
   #restaurants-list li a {
     align-self: end;
   }
 }
+
 @supports (display: grid) {
-  #restaurants-list { background-color: magenta;
+  #maincontent,
+  #restaurants-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
     grid-gap: 15px;
   }
+  #restaurant-container {
+    order: -1;
+  }
+  #restaurants-list {
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  }
   #restaurants-list li {
     margin: 0;
     display: inline-grid;
   }
 }
+
 @media (min-width: 500px) {
   @supports (display: flex) {
     .filter-options {
       display: flex;
       align-items: center;
     }
   }
-
 }
 
 @media (min-width: 585px) {
-  @supports (display: grid) {
-    #restaurants-list {
-      background-color: turquoise;
-    }
+  #breadcrumb {
+    width: calc(50% - 80px);
   }
-}
-
-@media (min-width: 855px) {
   @supports (display: grid) {
-    #restaurants-list {
-      background-color: orange;
+    .inside #maincontent {
+      grid-template-columns: 50% 50%;
+    }
+    .inside #restaurant-container,
+    .inside #reviews-container {
+      grid-column: 1;
+    }
+
+    .inside #map-container {
+      grid-column: 2;
+      height: 87%;
+      position: fixed;
+      right: 0;
+      top: 80px;
+      width: 50%;
+    }
+    .inside #map {
+      height: 100%;
     }
   }
 }
-
-@media (min-width: 40em) {
-  @supports (display: flex) {}
-  @supports (display: grid) {}
-}