From 92ce0ce50732137cae5d2da619fb905881b4913e Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 2 Mar 2020 16:56:39 -0500
Subject: [PATCH] Block Library: Columns: Force 50% column width at mid-range
 viewport (#20597)

---
 packages/block-library/src/columns/style.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 44ec7ae38bb857..4499ac92f1a4fe 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -31,8 +31,11 @@
 	overflow-wrap: break-word; // New standard.
 
 	// Between mobile and large viewports, allow 2 columns.
-	@include break-small() {
-		flex-basis: calc(50% - #{$grid-size-large});
+	@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
+		// As with mobile styles, this must be important since the Column
+		// assigns its own width as an inline style, which should take effect
+		// starting at `break-medium`.
+		flex-basis: calc(50% - #{$grid-size-large}) !important;
 		flex-grow: 0;
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.