Wrap cards in padded divs to make columns behave

rpg-docs/client/style/cards.scss

@@ -3,17 +3,24 @@
 $thickColumnWidth: 304px;
 $thinColumnWidth: 240px;
 
-//Column layouts of cards
+//Column layout
 .column-container {
 	@include column-fill(balance);
-	@include column-gap(8px);
+	@include column-gap(0px);
 	@include column-width($thickColumnWidth);
-	padding: 8px;
+	padding: 4px;
 
 	&.thin-columns {
 		@include column-count(4);
 		@include column-width($thinColumnWidth);
 	}
+	& > div {
+		padding: 4px;
+		//stop divs breaking over multiple columns
+		-webkit-column-break-inside: avoid;
+		page-break-inside: avoid;
+		break-inside: avoid;
+	}
 }
 
 //Cards
@@ -21,20 +28,6 @@ $thinColumnWidth: 240px;
 	background: white;
 	border-radius: 2px;
 
-	.column-container & {
-		margin-bottom: 8px;
-		width: 100%;
-		//hack to stop flickering
-		-webkit-backface-visibility: hidden;
-		-webkit-transform: translateX(0);
-		//stop breaking over column divide
-		-webkit-column-break-inside: avoid;
-		page-break-inside: avoid;
-		break-inside: avoid;
-		//Fixes extra margin at top of columns
-		display: inline-block;
-	}
-
 	.top {
 		cursor: pointer;
 		padding: 16px;