Make list of projects look nice. Added Drift and Styret on the top

www/css/projects.css

@@ -1,14 +1,19 @@
 .project-card {
 	position: relative;
-	display: inline-block;
-	vertical-align: top;
-	border-radius: 4px;
-	width: 18em;
-	height: 8em;
-	padding: 0;
-	margin: 0 1em 1em 0;
-	border: 1px solid #002244;
-	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+	box-sizing: border-box;
+	border-radius: 0.3em;
+	border: 0 solid #048;
+	border-left-width: 0.7em;
+	box-shadow: 0.1em 0.2em 0.5em 0em rgba(0,0,0,0.3);
+	overflow: hidden;
+	top:0;
+	min-height: 6em;
+	margin:0;
+	height: 100%;
+}
+
+.project-card:hover {
+	box-shadow: 0.1em 0.2em 0.5em 0em rgba(0,0,0,0.5);
 }
 
 .project-title {
@@ -19,50 +24,61 @@
 
 .card-content {
 	display: block;
-	overflow: hidden;
-	margin: 0;
-	padding: .6em;
-	height: 4.3em;
+	margin: .6em;
+	margin-bottom: 0;
 }
 
 .card-content p {
-	height: 2.5em;
-	overflow: hidden;
 	line-height: 1.25em;
 }
 
-.project-organizer {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	margin: 0;
-	padding: .3em .6em;
-	border-top: 1px solid #002244;
-	font-size: .8em;
-}
-
 .card-content * {
 	margin-top: 0;
 }
 
-.projects-divider {
-	border: 0;
-	margin-bottom: 2em;
+.project-organizer {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	margin: 0;
+	font-size: .8em;
+	text-align: right;
+	font-style: italic;
+	opacity: 0.5;
+	padding: 0.1em 0.4em; 
 }
 
+.projects-container {
+	margin-top: 2em;
+	margin-bottom: 3em;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-column-gap: 0.5em;
+	grid-row-gap: 1.3em;
+}
+
+@media screen and (min-width: 60em) {
+	.projects-container {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+
 .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;
 }
 
 .gridr {
 	border-left: 0;
+	grid-area: right;
 }
 
 .projectmember {
@@ -103,4 +119,4 @@
 		display: inline-block;
 
 	}
-}
+}