Merge pull request #1147 from Automattic/fix/group-block-mobile-view

Varia: Fix responsive logic for better mobile view

varia/sass/abstracts/_mixins.scss

@@ -77,9 +77,9 @@
  * Align container widths
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
-@mixin align-container-width( $width: 100%, $multiplier: "2", $columns: "12" ) {
-	max-width: calc( #{$width} - (#{$multiplier} * ( #{$width} / #{$columns} )));
-	width: calc( #{$width} - (#{$multiplier} * ( #{$width} / #{$columns} )));
+@mixin align-container-width( $width: 100% ) {
+	max-width: calc( #{$width} );
+	width: calc( #{$width} );
 }
 
 /**

varia/sass/abstracts/_responsive-logic.scss

@@ -88,25 +88,25 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 
 %responsive-align-container {
 
-	@include align-container-width( $content-width-flex );
+	@include align-container-width( calc( #{$content-width-flex} - #{$horizontal-padding} ) );
 
 	@include media(mobile) {
-		@include align-container-width( $content-width-sm );
+		@include align-container-width( #{$content-width-sm} );
 	}
 
 	@include media(tablet) {
-		@include align-container-width( $content-width-md );
+		@include align-container-width( #{$content-width-md} );
 	}
 
 	@include media(laptop) {
-		@include align-container-width( $content-width-lg );
+		@include align-container-width( #{$content-width-lg} );
 	}
 
 	@include media(desktop) {
-		@include align-container-width( $content-width-lg );
+		@include align-container-width( #{$content-width-lg} );
 	}
 
 	@include media(wide) {
-		@include align-container-width( $content-width-lg );
+		@include align-container-width( #{$content-width-lg} );
 	}
 }

varia/sass/blocks/cover/_style.scss

@@ -8,6 +8,7 @@
 	.wp-block-cover__inner-container,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {
+		width: calc(100% - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
 		color: #{map-deep-get($config-global, "color", "background")};
 		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
@@ -55,14 +56,17 @@
 		}
 	}
 
+	&.alignwide,
+	&.alignfull {
+		.wp-block-cover__inner-container,
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
+			@extend %responsive-align-container;
+		}
+	}
+
 	&.has-left-content,
 	&.has-right-content {
 		justify-content: center;
 	}
 }
-
-.wp-block-cover__inner-container,
-.wp-block-cover-image-text,
-.wp-block-cover-text {
-	@extend %responsive-align-container;
-}

varia/sass/blocks/gallery/_style.scss

@@ -22,6 +22,6 @@
 	// Apply max-width to floated items that have no intrinsic width.
 	&.alignleft,
 	&.alignright {
-		@extend %responsive-align-container;
+		max-width: 50%;
 	}
 }

varia/sass/blocks/group/_style.scss

@@ -1,7 +1,6 @@
 .wp-block-group {
 
 	.wp-block-group__inner-container {
-		@extend %responsive-width-normal;
 		margin-left: auto;
 		margin-right: auto;
 
@@ -19,6 +18,11 @@
 		}
 	}
 
+	&.alignwide .wp-block-group__inner-container,
+	&.alignfull .wp-block-group__inner-container {
+		@extend %responsive-align-container;
+	}
+
 	&.alignwide .alignwide,
 	&.alignwide .alignfull,
 	&.alignfull .alignwide {

varia/sass/blocks/pullquote/_style.scss

@@ -57,17 +57,12 @@
 			// max-width: calc( var(--global--width-content) - (2 * calc( var(--global--width-content) / 12 )) );
 		}
 
-		&.alignleft blockquote,
-		&.alignright blockquote {
+		blockquote {
 			padding-left: #{map-deep-get($config-global, "spacing", "unit")};
 			padding-right: #{map-deep-get($config-global, "spacing", "unit")};
 			max-width: inherit;
 		}
 
-		blockquote {
-			padding-left: 0;
-		}
-
 		.wp-block-pullquote__citation,
 		cite,
 		footer {

varia/style-rtl.css

@@ -1174,6 +1174,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
+	width: calc(100% - 32px);
 	color: white;
 	margin-top: 32px;
 	margin-bottom: 32px;
@@ -1271,6 +1272,10 @@ input.has-focus[type="submit"],
 	width: calc( (100% - 16px) / 2);
 }
 
+.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
+	max-width: 50%;
+}
+
 .wp-block-group .wp-block-group__inner-container {
 	margin-right: auto;
 	margin-left: auto;
@@ -1691,17 +1696,12 @@ p.has-background:not(.has-background-background-color) a {
 	color: white;
 }
 
-.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
-.wp-block-pullquote.is-style-solid-color.alignright blockquote {
+.wp-block-pullquote.is-style-solid-color blockquote {
 	padding-right: 16px;
 	padding-left: 16px;
 	max-width: inherit;
 }
 
-.wp-block-pullquote.is-style-solid-color blockquote {
-	padding-right: 0;
-}
-
 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
 .wp-block-pullquote.is-style-solid-color cite,
 .wp-block-pullquote.is-style-solid-color footer {
@@ -2848,36 +2848,36 @@ table th,
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+.responsive-max-width {
 	max-width: 100%;
 }
 
 @media only screen and (min-width: 560px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 640px - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -2998,73 +2998,127 @@ table th,
 	}
 }
 
-.wp-block-cover__inner-container,
-.wp-block-cover-image-text,
-.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+.wp-block-cover.alignwide .wp-block-cover__inner-container,
+.wp-block-cover.alignwide .wp-block-cover-image-text,
+.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+.wp-block-cover.alignfull .wp-block-cover-image-text,
+.wp-block-cover.alignfull .wp-block-cover-text,
+.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+.wp-block-cover-image.alignwide .wp-block-cover-text,
+.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 .wp-block-pullquote.alignfull > p,
 .wp-block-pullquote.alignwide blockquote,
 .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-	max-width: calc( 100% - (2 * ( 100% / 12 )));
-	width: calc( 100% - (2 * ( 100% / 12 )));
+	max-width: calc( calc( 100% - 32px));
+	width: calc( calc( 100% - 32px));
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
-		width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
+		max-width: calc( calc( 560px - 32px));
+		width: calc( calc( 560px - 32px));
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
-		width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
+		max-width: calc( calc( 640px - 32px));
+		width: calc( calc( 640px - 32px));
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
-		width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
+		max-width: calc( calc( 782px - 32px));
+		width: calc( calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
-		width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
+		max-width: calc( calc( 782px - 32px));
+		width: calc( calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
-		width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
+		max-width: calc( calc( 782px - 32px));
+		width: calc( calc( 782px - 32px));
 	}
 }
 

varia/style.css

@@ -1174,6 +1174,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
+	width: calc(100% - 32px);
 	color: white;
 	margin-top: 32px;
 	margin-bottom: 32px;
@@ -1271,6 +1272,10 @@ input.has-focus[type="submit"],
 	width: calc( (100% - 16px) / 2);
 }
 
+.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
+	max-width: 50%;
+}
+
 .wp-block-group .wp-block-group__inner-container {
 	margin-left: auto;
 	margin-right: auto;
@@ -1691,17 +1696,12 @@ p.has-background:not(.has-background-background-color) a {
 	color: white;
 }
 
-.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
-.wp-block-pullquote.is-style-solid-color.alignright blockquote {
+.wp-block-pullquote.is-style-solid-color blockquote {
 	padding-left: 16px;
 	padding-right: 16px;
 	max-width: inherit;
 }
 
-.wp-block-pullquote.is-style-solid-color blockquote {
-	padding-left: 0;
-}
-
 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
 .wp-block-pullquote.is-style-solid-color cite,
 .wp-block-pullquote.is-style-solid-color footer {
@@ -2853,36 +2853,36 @@ table th,
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+.responsive-max-width {
 	max-width: 100%;
 }
 
 @media only screen and (min-width: 560px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 640px - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3003,73 +3003,127 @@ table th,
 	}
 }
 
-.wp-block-cover__inner-container,
-.wp-block-cover-image-text,
-.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+.wp-block-cover.alignwide .wp-block-cover__inner-container,
+.wp-block-cover.alignwide .wp-block-cover-image-text,
+.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+.wp-block-cover.alignfull .wp-block-cover-image-text,
+.wp-block-cover.alignfull .wp-block-cover-text,
+.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+.wp-block-cover-image.alignwide .wp-block-cover-text,
+.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 .wp-block-pullquote.alignfull > p,
 .wp-block-pullquote.alignwide blockquote,
 .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-	max-width: calc( 100% - (2 * ( 100% / 12 )));
-	width: calc( 100% - (2 * ( 100% / 12 )));
+	max-width: calc( calc( 100% - 32px));
+	width: calc( calc( 100% - 32px));
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
-		width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
+		max-width: calc( calc( 560px - 32px));
+		width: calc( calc( 560px - 32px));
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
-		width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
+		max-width: calc( calc( 640px - 32px));
+		width: calc( calc( 640px - 32px));
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
-		width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
+		max-width: calc( calc( 782px - 32px));
+		width: calc( calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
-		width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
+		max-width: calc( calc( 782px - 32px));
+		width: calc( calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
-		width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 )));
+		max-width: calc( calc( 782px - 32px));
+		width: calc( calc( 782px - 32px));
 	}
 }