Add columns and cards

resources/less/cards.less

@@ -0,0 +1,42 @@
+@skin-wmau-card-space: 12px;
+
+.card {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid #c0c0c0;
+	border-radius: 4px;
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	position: relative;
+
+	& > * {
+		margin: 0;
+		line-height: 1;
+	}
+
+	.card-body {
+		margin: @skin-wmau-card-space;
+
+		& > * {
+			margin: 0;
+		}
+	}
+
+	.card-title {
+		display: block;
+		font-size: larger;
+		font-weight: bolder;
+		margin-bottom: @skin-wmau-card-space;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+
+	a {
+		color: inherit;
+	}
+}

resources/less/columns.less

@@ -0,0 +1,41 @@
+.row {
+	display: flex;
+	flex-wrap: wrap;
+
+	.col {
+		width: 100%;
+		max-width: 100%;
+		flex: 1 0 0;
+		padding: 1em;
+	}
+
+	.col-1 {
+		.col;
+		flex: 1;
+	}
+
+	.col-2 {
+		.col;
+		flex: 2;
+	}
+
+	.col-3 {
+		.col;
+		flex: 3;
+	}
+}
+
+@media screen and ( max-width: 750px ) {
+	.row {
+		display: block;
+
+		.col,
+		.col-1,
+		.col-2,
+		.col-3 {
+			flex: none;
+			padding: 0;
+			margin: 1em 0;
+		}
+	}
+}

resources/less/style.less

@@ -3,6 +3,8 @@
 @import 'action-drawer';
 @import 'feathericons';
 @import 'searchform';
+@import 'columns';
+@import 'cards';
 // @TODO This shouldn't be necessary. Why is it not working the proper way?
 @import 'ext-wikidata-page-banner';