Zlepšení struktury responzivity v CSS

sass/style.scss

@@ -5,59 +5,6 @@
 @import "tables";
 @import "fonts";
 
-@media screen and (max-width: 699px){
-
-	main {
-		margin:0;
-
-		&.recipe {
-			padding:1em;
-			border:none;
-			border-radius:0;
-
-			table {
-				float:none;
-				width:100%;
-				margin:0 0 2em 0;
-			}
-		}
-
-		h2 { margin-top:0.85em; }
-	}
-
-	main section article {
-		width:$article-width-narrow;
-		margin:$article-margin-narrow;
-	}
-
-}
-
-@media screen and (min-width: 700px){
-
-	main {
-		margin:3em auto;
-
-		&.recipe {
-			padding:1em 4em;
-			border:1px solid $border;
-			border-radius:8px;
-
-			table {
-				float:right;
-				width:45%;
-				margin:0 0 2em 2em;
-			}
-		}
-
-		h2 { margin:0; }
-	}
-
-	main section article {
-		width:$article-width;
-		margin:$article-margin;
-	}
-
-}
 
 html, body {
 	margin:0;
@@ -85,6 +32,7 @@ img {
 main {
 	max-width:$main-wrap;
 	padding:$main-padding;
+	margin:3em auto;
 		
 	h2 {
 		font-size:3em;
@@ -94,6 +42,15 @@ main {
 	&.recipe {
 		background:$recipe-background;
 		max-width:$recipe-wrap;
+		padding:1em 4em;
+		border:1px solid $border;
+		border-radius:8px;
+
+		table {
+			float:right;
+			width:45%;
+			margin:0 0 2em 2em;
+		}
 
 		img {
 			display:block;
@@ -138,6 +95,8 @@ main {
 			border-radius:$article-border-radius;
 			overflow:hidden;
 			box-sizing:border-box;
+			width:$article-width;
+			margin:$article-margin;
 
 			&:hover {
 				color:$anchor-hover-color;
@@ -162,3 +121,29 @@ main {
 	}
 }
 
+@media screen and (max-width: 699px){
+
+	main {
+		margin:0;
+
+		&.recipe {
+			padding:1em;
+			border:none;
+			border-radius:0;
+
+			table {
+				float:none;
+				width:100%;
+				margin:0 0 2em 0;
+			}
+		}
+
+		h2 { margin-top:0.85em; }
+	}
+
+	main section article {
+		width:$article-width-narrow;
+		margin:$article-margin-narrow;
+	}
+
+}