diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass
index 1d338685..1a219793 100644
--- a/src/styles/components/_card.sass
+++ b/src/styles/components/_card.sass
@@ -4,23 +4,37 @@
 		@extend .row
 
 		.card
-			@extend .col-md-3
-			+media-xs
+			@extend .col-md-4
+
+			+media-sm
 				flex: 1 0 50%
 				max-width: 50%
 
-			+media-sm
+			+media-md
 				flex: 1 0 33%
 				max-width: 33%
 
-			+media-md
+			+media-lg
+				flex: 1 0 33%
+				max-width: 33%
+
+			+media-xl
 				flex: 1 0 25%
 				max-width: 25%
 
-			+media-lg
+			+media-xxl
 				flex: 1 0 20%
 				max-width: 20%
 
+		&.card-3-columns .card
+			+media-xl
+				flex: 1 0 33%
+				max-width: 33%
+
+			+media-xxl
+				flex: 1 0 33%
+				max-width: 33%
+
 	&.card-deck-vertical
 		@extend .flex-column
 		flex-wrap: initial
diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug
index 8213b0a3..cecdeecc 100644
--- a/src/templates/mixins/components.pug
+++ b/src/templates/mixins/components.pug
@@ -48,8 +48,8 @@ mixin nav-secondary-link()
 		a.nav-link&attributes(attributes)
 			block
 
-mixin card-deck()
-	.card-deck.card-padless.card-deck-responsive()&attributes(attributes)
+mixin card-deck(max_columns)
+	.card-deck.card-padless.card-deck-responsive(class="card-" + max_columns + "-columns")&attributes(attributes)
 		if block
 			block
 		else