Use columns block for the parallelogram style

This avoids the complex mutliply-nested blocks and makes the block style less reliant on a custom class. On mid-sized screens, we switch to plain horizontally-overlapping rectangles, and on small screens we stack the columns, and vertically-overlap.

themes/wporg-5ftf/css/settings/_structure.scss

@@ -1,3 +1,11 @@
 $breakpoint-tablet: 768px !default;
 $breakpoint-desktop: 960px !default;
 $breakpoint-desktop-large: 1200px !default;
+
+// From @wordpress/viewport
+$breakpoint-huge: 1440px !default;
+$breakpoint-wide: 1280px !default;
+$breakpoint-large: 960px !default;
+$breakpoint-medium: 782px !default;
+$breakpoint-small: 600px !default;
+$breakpoint-mobile: 480px !default;

themes/wporg-5ftf/css/utilities/_columns.scss

@@ -0,0 +1,70 @@
+.is-style-wporg-parallelogram {
+
+	.wp-block-column {
+		background: black;
+		color: #fff;
+		margin: 0;
+		opacity: 0.9;
+		padding: 4.7rem 3rem;
+		text-align: center;
+		mix-blend-mode: multiply;
+
+		&:nth-of-type(2n+1) {
+			background: $color__wporg-blue;
+		}
+
+		&:nth-of-type(2n) {
+			background: $color__wporg-purple;
+		}
+
+		// Applies to 768px and above.
+		@include breakpoint( $breakpoint-tablet ) {
+			transform: skew(-15deg);
+
+			&:first-child {
+				position: relative;
+				top: 40px;
+				left: 30px;
+				z-index: 2;
+			}
+
+			&:last-child {
+				position: relative;
+				z-index: 1;
+				right: 30px;
+				padding-left: 4rem;
+			}
+
+			&:before {
+				font-size: ms(12);
+				height: 64px;
+				position: relative;
+				right: 1rem;
+				transform: skew(15deg);
+				width: 64px;
+			}
+
+			> * {
+				transform: skew(15deg);
+			}
+		}
+
+		@include breakpoint( $breakpoint-small, $breakpoint-tablet - 1 ) {
+			padding: 3rem 2rem;
+			flex-basis: calc(50% + 0.5rem);
+
+			&:nth-of-type( n+2 ) {
+				margin-left: -1rem;
+			}
+		}
+
+		// Applies to 0-599px. The columns wrap at 600px.
+		@include breakpoint( 0, $breakpoint-small - 1 ) {
+			padding: 2rem;
+
+			&:nth-of-type( n+2 ) {
+				margin-top: -1rem;
+			}
+		}
+	}
+}

themes/wporg-5ftf/css/utilities/_group.scss

@@ -1,68 +0,0 @@
-.parallelogram-container {
-	width: 80%;
-	margin-left: 10%;
-	margin-right: 10%;
-
-	> .wp-block-group__inner-container {
-		@include breakpoint($breakpoint-tablet) {
-			display: flex;
-		}
-	}
-
-	.wp-block-group__inner-container .is-style-wporg-parallelogram:last-child .wp-block-group__inner-container {
-		/*
-		 * Adjust for the overlapping parralelograms, so that the text in this one appears to be more aligned to
-		 * its container.
-		 */
-		position: relative;
-		left: 10px;
-	}
-}
-
-/*
- * Not just doing `@extend .parallelogram` b/c want to split between breakpoints, which that doesn't do.
- */
-.is-style-wporg-parallelogram {
-	color: #fff;
-	margin: 0 auto;
-	opacity: 0.9;
-	padding: 4.7rem 0;
-	text-align: center;
-
-	// probably need to remove that negative margin from the has-background block? it's shouldn't apply here really, so need to rethink why have it and best way to address that
-	// or maybe just refine how it's implemented, like making sure that have padding to replace margin, and no position:relative crap
-
-	@include breakpoint( $breakpoint-tablet ) {
-		transform: skew(-15deg);
-
-		&:first-child {
-			position: relative;
-			top: 40px;
-			z-index: 2;
-		}
-
-		&:last-child {
-			z-index: 1;
-			padding-left: 40px;
-			// todo the first and second child aren't overlapping as much as they used to, what changed?
-		}
-
-		&:before {
-			font-size: ms(12);
-			height: 64px;
-			position: relative;
-			right: 1rem;
-			transform: skew(15deg);
-			width: 64px;
-		}
-
-		> * {
-			transform: skew(15deg);
-		}
-
-		> .wp-block-group__inner-container {
-			width: 60%;
-			margin: 0 auto;
-		}
-	}
-}

themes/wporg-5ftf/css/utilities/_utilities.scss

@@ -1,4 +1,4 @@
 @import "colors";
-@import "group";
+@import "columns";
 @import "paragraph";
 @import "pullquote";

themes/wporg-5ftf/functions.php

@@ -62,7 +62,7 @@ function setup() {
 
 	if ( function_exists( 'register_block_style' ) ) {
 		register_block_style(
-			'core/group',
+			'core/columns',
 			array(
 				'name'         => 'wporg-parallelogram',
 				'label'        => __( 'Parallelogram', 'wporg-5ftf' ),