Make the project info page mobile friendly

www/css/projects.css

@@ -51,7 +51,7 @@ a.nostyle {
 	text-align: right;
 	font-style: italic;
 	opacity: 0.5;
-	padding: 0.1em 0.4em; 
+	padding: 0.1em 0.4em;
 }
 
 .projects-container {
@@ -69,22 +69,52 @@ a.nostyle {
 	}
 }
 
+@media screen and (min-width: 50rem) {
+	.contentsplit {
+		display: grid;
+		grid-template-columns: 17em 2.7fr;
+		grid-template-areas: "left right";
+		grid-column-gap: 0.9em;
+	}
+}
+@media screen and (max-width: 50rem) {
+	.contentsplit {
+		display: grid;
+		grid-template-rows: auto auto;
+		grid-template-areas: "right"
+		                     "left";
+	}
+	.projectmember-container {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: auto auto;
+		grid-template-areas: "organizers members"
+		                     "join join";
 
-.contentsplit {
-	display: grid;
-	grid-template-columns: 1.3fr 2.7fr;
-	grid-template-areas: "left right";
+	}
 }
 
 .gridl {
-	padding: 0 1em 0 1em;
-	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
 	grid-area: left;
 }
 
+.projectmember-container {
+	padding: 0.1em 1em;
+	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
+}
+.projectmember-container h2 {
+	text-align: center;
+}
+.projectmember-container >form {
+	text-align: center;
+	grid-area: join;
+}
+
 .gridr {
 	border-left: 0;
 	grid-area: right;
+	padding:0;
+	margin:0;
 }
 
 .projectmember {