Reorder header, make mobile 3x2

styles.css

@@ -76,7 +76,10 @@ header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 10px 0;
+	padding: 10px 24px;
+}
+.brand {
+	flex-shrink: 0;
 }
 .brand img {
 	display: block;
@@ -87,13 +90,15 @@ header {
 	display: flex;
 	gap: 28px;
 	align-items: center;
+	flex-shrink: 0;
 }
 .nav a {
 	color: #fff;
+	white-space: nowrap;
 	text-decoration: none;
 	text-transform: uppercase;
 	font:
-		300 22px/1 "Yanone Kaffeesatz",
+		300 24px/1 "Yanone Kaffeesatz",
 		sans-serif;
 }
 .nav a:hover {
@@ -118,13 +123,14 @@ header {
 }
 .content {
 	max-width: 1140px;
-	width: calc(100% - 40px);
+	width: 100%;
 	margin: 0 auto 72px;
+	padding: 0 20px;
 }
 .layout {
 	display: grid;
-	grid-template-columns: minmax(0, 750px) 300px;
-	gap: 90px;
+	grid-template-columns: minmax(0, 1fr) 300px;
+	gap: 40px;
 	margin-top: 60px;
 }
 .layout.full {
@@ -250,7 +256,7 @@ footer p {
 	height: 30px;
 	vertical-align: middle;
 }
-@media (max-width: 760px) {
+@media (max-width: 820px) {
 	.nav-wrap {
 		padding: 12px 20px;
 		display: block;
@@ -259,16 +265,20 @@ footer p {
 		margin: auto;
 	}
 	.nav {
+		display: grid;
+		grid-template-columns: repeat(3, auto);
 		justify-content: center;
-		gap: 15px;
+		column-gap: 20px;
+		row-gap: 10px;
 		margin-top: 20px;
 	}
 	.nav a {
-		font-size: 22px;
+		justify-self: center;
+		font-size: 24px;
 	}
 	.content {
-		width: calc(100% - 24px);
-		padding: 0;
+		width: 100%;
+		padding: 0 12px;
 	}
 	.layout {
 		display: block;
@@ -337,7 +347,7 @@ footer p {
 }
 @media (max-width: 560px) {
 	.area-grid {
-		width: calc(100% - 56px);
+		width: 80%;
 		margin-right: auto;
 		margin-left: auto;
 		grid-template-columns: 1fr;