Replace CSS columns with flexbox

Columns are a bloody nightmare with a horribly broken implementation in Chrome.
This allows us to get rid of a bunch of fixed media queries (yay!) and instead
dynamically reflows into columns if the space allows.

site-assets/main.css

@@ -126,18 +126,18 @@ header nav a:not(:last-child) {
 	list-style: none;
 	margin: 0;
 	padding: 0;
-	column-count: 1;
 	font-size: 17px;
+	display: flex;
+	flex-wrap: wrap;
 }
 
 .applist li {
 	padding: 10px 0;
-	column-break-inside: avoid;
+	width: 160px;
 }
 
 .applist a {
 	position: relative; /* popover */
-	column-break-inside: avoid;
 }
 
 .applist-intro {
@@ -342,10 +342,6 @@ a.zocial {
 }
 
 @media (max-width: 480px) {
-	body .applist {
-		column-count: auto !important;
-	}
-
 	.credit a {
 		display: block;
 	}
@@ -372,26 +368,6 @@ a.zocial {
 	}
 }
 
-@media (min-width: 480px) {
-	.applist {
-		column-count: 2;
-	}
-}
-
-@media (min-width: 640px) and (max-width: 770px) {
-	.applist {
-		column-count: 3;
-	}
-}
-
-
-@media (min-width: 771px) {
-	.js,
-	.ctojs {
-		column-count: 4;
-	}
-}
-
 @media (min-width: 992px) {
 	.logo-icon {
 		display: block;