Merge pull request #1246 from Automattic/enhancement/update-cover-block-three

Varia: Refactor responsive logic to better support nested blocks with varying widths

varia/comments.php

@@ -20,7 +20,7 @@ if ( post_password_required() ) {
 }
 ?>
 
-<div id="comments" class="comments-area">
+<div id="comments" class="comments-area responsive-max-width">
 
 	<?php
 	// You can start editing here -- including this comment!

varia/index.php

@@ -18,7 +18,7 @@ get_header();
 ?>
 
 	<section id="primary" class="content-area">
-		<main id="main" class="site-main responsive-max-width">
+		<main id="main" class="site-main">
 
 		<?php
 		if ( have_posts() ) {

varia/sass/abstracts/_mixins.scss

@@ -41,23 +41,9 @@
 	}
 }
 
-/**
- * Align widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-@mixin align-width( $width: 100%, $multiplier: -0.25 ) {
-
-	$positive_multiplier: abs($multiplier);
-
-	margin-left: calc( #{$multiplier} * ( 100vw - #{$width} ) );
-	margin-right: calc( #{$multiplier} * ( 100vw - #{$width} ) );
-	width: calc( #{$width} + (#{$positive_multiplier} * 2) * ( 100vw - #{$width} ) );
-	max-width: calc( #{$width} + (#{$positive_multiplier} * 2) * ( 100vw - #{$width} ) );
-}
-
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
+ * - Sets .alignwide widths
  */
 @mixin alignwide-width( $width: 100%, $multiplier...) {
 
@@ -65,21 +51,18 @@
 		$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
 	}
 
-	//margin-left: calc( #{$multiplier} - ( 100vw - #{$width} ) );
-	//margin-right: calc( #{$multiplier} - ( 100vw - #{$width} ) );
-	margin-left: #{-1 * $multiplier};
-	margin-right: #{-1 * $multiplier};
-	width: calc(#{$width} + #{2 * $multiplier}); // calc( #{$width} + #{$positive_multiplier * 2} + ( 100vw - #{$width} ) );
-	max-width: calc(#{$width} + #{2 * $multiplier}); // calc( #{$width} + #{$positive_multiplier * 2} + ( 100vw - #{$width} ) );
+	width: calc(#{$width} + #{2 * $multiplier});
+	max-width: calc(100vw - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
 }
 
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
- */
-@mixin align-container-width( $width: 100% ) {
-	max-width: calc( #{$width} );
-	width: calc( #{$width} );
+@mixin alignwide-width-nested( $width: 100%, $multiplier...) {
+
+	@if length($multiplier) == 0 {
+		$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
+	}
+
+	width: calc(#{$width} + #{2 * $multiplier});
+	max-width: 100%;
 }
 
 /**

varia/sass/abstracts/_responsive-logic.scss

@@ -11,9 +11,11 @@ $content-width-lg: calc( #{map-deep-get($config-global, "breakpoint", "lg")} - #
 $content-width-xl: calc( #{map-deep-get($config-global, "breakpoint", "xl")} - #{$horizontal-padding} );
 $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} - #{$horizontal-padding} );
 
-%responsive-width-normal {
+%responsive-aligndefault {
 
 	max-width: $content-width-flex;
+	margin-left: auto;
+	margin-right: auto;
 
 	@include media(mobile) {
 		max-width: $content-width-sm;
@@ -36,20 +38,22 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	}
 }
 
-%responsive-width-wide {
+%responsive-alignwide {
 
-	@include align-width( $content-width-flex, -0.25 );
+	@include alignwide-width( $content-width-flex );
+	margin-left: auto;
+	margin-right: auto;
 
 	@include media(mobile) {
-		@include align-width( $content-width-sm, -0.25 );
+		@include alignwide-width( $content-width-sm );
 	}
 
 	@include media(tablet) {
-		@include align-width( $content-width-md, -0.25 );
+		@include alignwide-width( $content-width-md );
 	}
 
 	@include media(laptop) {
-		@include align-width( $content-width-lg, -0.25 );
+		@include alignwide-width( $content-width-lg );
 	}
 
 	@include media(desktop) {
@@ -61,52 +65,123 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	}
 }
 
-%responsive-width-full {
+%responsive-alignwide-nested {
+
+	@include alignwide-width-nested( $content-width-flex );
+	margin-left: auto;
+	margin-right: auto;
+
+	@include media(mobile) {
+		@include alignwide-width-nested( $content-width-sm );
+	}
+
+	@include media(tablet) {
+		@include alignwide-width-nested( $content-width-md );
+	}
+
+	@include media(laptop) {
+		@include alignwide-width-nested( $content-width-lg );
+	}
+
+	@include media(desktop) {
+		@include alignwide-width-nested( $content-width-lg );
+	}
+
+	@include media(wide) {
+		@include alignwide-width-nested( $content-width-lg );
+	}
+}
+
+%responsive-alignfull {
+	/* Letting the box-model do all the work here. */
+}
+
+%responsive-alignright {
+
+	/*rtl:ignore*/
+	margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+
+	@include media(mobile) {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - #{$content-width-sm}) );
+	}
+
+	@include media(tablet) {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - #{$content-width-md}) );
+	}
+
+	@include media(laptop) {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+	}
+
+	@include media(desktop) {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+	}
+
+	@include media(wide) {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+	}
+}
+
+%responsive-alignleft {
 
-	@include align-width( $content-width-flex, -0.5 );
+	/*rtl:ignore*/
+	margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
 
 	@include media(mobile) {
-		@include align-width( $content-width-sm, -0.5 );
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-sm}) );
 	}
 
 	@include media(tablet) {
-		@include align-width( $content-width-md, -0.5 );
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-md}) );
 	}
 
 	@include media(laptop) {
-		@include align-width( $content-width-lg, -0.5 );
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
 	}
 
 	@include media(desktop) {
-		@include align-width( $content-width-lg, -0.5 );
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
 	}
 
 	@include media(wide) {
-		@include align-width( $content-width-lg, -0.5 );
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
 	}
 }
 
 %responsive-align-container {
 
-	@include align-container-width( calc( #{$content-width-flex} - #{$horizontal-padding} ) );
+/*
+	max-width: calc( #{$content-width-flex} - #{$horizontal-padding} );
+	width: calc( #{$content-width-flex} - #{$horizontal-padding} );
 
 	@include media(mobile) {
-		@include align-container-width( #{$content-width-sm} );
+		max-width: #{$content-width-sm};
 	}
 
 	@include media(tablet) {
-		@include align-container-width( #{$content-width-md} );
+		max-width: #{$content-width-md};
 	}
 
 	@include media(laptop) {
-		@include align-container-width( #{$content-width-lg} );
+		max-width: #{$content-width-lg};
 	}
 
 	@include media(desktop) {
-		@include align-container-width( #{$content-width-lg} );
+		max-width: #{$content-width-lg};
 	}
 
 	@include media(wide) {
-		@include align-container-width( #{$content-width-lg} );
+		max-width: #{$content-width-lg};
 	}
+*/
 }

varia/sass/blocks/cover/_style.scss

@@ -8,7 +8,6 @@
 	.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", "default")};
 		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
@@ -41,6 +40,9 @@
 	}
 
 	.wp-block-cover__inner-container {
+
+		width: calc(100% - #{ 2 * map-deep-get($config-global, "spacing", "vertical") };
+
 		& > * {
 			margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 			margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
@@ -76,15 +78,6 @@
 		}
 	}
 
-	&.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;

varia/sass/blocks/group/_style.scss

@@ -23,42 +23,11 @@
 		}
 	}
 
-	&.alignwide .wp-block-group__inner-container,
-	&.alignfull .wp-block-group__inner-container {
-		@extend %responsive-align-container;
-	}
-
-	&.alignwide .alignwide,
-	&.alignwide .alignfull,
-	&.alignfull .alignwide {
-		@extend %responsive-width-wide;
-		clear: both;
-	}
-
-	&.alignfull .alignfull, {
-		@extend %responsive-width-full;
-		clear: both;
-	}
-
 	&.has-background {
-		padding: #{map-deep-get($config-global, "spacing", "horizontal")};
-
-		&.alignwide > .wp-block-group__inner-container > .alignwide:first-of-type,
-		&.alignwide > .wp-block-group__inner-container > .alignfull:first-of-type {
-			margin-top: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
-		}
-
-		&.alignwide > .wp-block-group__inner-container > .alignwide:last-of-type,
-		&.alignwide > .wp-block-group__inner-container > .alignfull:last-of-type {
-			margin-bottom: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
-		}
-
-		&.alignfull > .wp-block-group__inner-container > .alignfull:first-of-type {
-			margin-top: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
-		}
+		padding: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 
-		&.alignfull > .wp-block-group__inner-container > .alignfull:last-of-type {
-			margin-bottom: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
+		@include media(mobile) {
+			padding: #{map-deep-get($config-global, "spacing", "vertical")};
 		}
 	}
 }

varia/sass/blocks/image/_style.scss

@@ -10,6 +10,18 @@
 	}
 }
 
+// Remove vertical margins from image block wrappers when floated
+.entry-content > *[class="wp-block-image"],
+.entry-content [class*="inner-container"] > *[class="wp-block-image"] {
+	margin-top: 0;
+	margin-bottom: 0;
+
+	// Remove top margins from the following element when previous image block is floated
+	& + * {
+		margin-top: 0;
+	}
+}
+
 img {
 	height: auto;
 	max-width: 100%;

varia/sass/blocks/pullquote/_style.scss

@@ -35,6 +35,10 @@
 	 */
 	&:not(.is-style-solid-color) {
 		background: none;
+
+		blockquote {
+			padding-left: 0;
+		}
 	}
 
 	&.is-style-default {
@@ -53,8 +57,7 @@
 		color: #{map-deep-get($config-global, "color", "background", "default")};
 
 		&:not(.alignleft):not(.alignright) blockquote {
-			@extend %responsive-align-container;
-			// max-width: calc( var(--global--width-content) - (2 * calc( var(--global--width-content) / 12 )) );
+			@extend %responsive-aligndefault;
 		}
 
 		blockquote {
@@ -76,6 +79,6 @@
 	&.alignfull blockquote {
 		margin-left: auto;
 		margin-right: auto;
-		@extend %responsive-align-container;
+		@extend %responsive-aligndefault;
 	}
 }

varia/sass/blocks/utilities/_style.scss

@@ -1,11 +1,10 @@
 /* Text Alignments */
 .alignleft {
+	@extend %responsive-alignleft;
 	/*rtl:ignore*/
 	text-align: left;
 	/*rtl:ignore*/
 	float: left;
-	/*rtl:ignore*/
-	margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
 	margin-top: 0;
 	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 }
@@ -17,6 +16,7 @@
 }
 
 .alignright {
+	@extend %responsive-alignright;
 	/*rtl:ignore*/
 	float: right;
 	/*rtl:ignore*/
@@ -25,18 +25,46 @@
 	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 }
 
-// Alignwide & Alignfull
-// - More selector specificity needed here to deal with
-//   group-block expected behavior
-// - See: sass/blocks/group/_style.scss
+/**
+ * .aligndefault
+ */
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
+	@extend %responsive-aligndefault;
+}
+
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
+}
+
+/**
+ * .alignwide
+ */
+.alignwide {
+	clear: both;
+}
+
 .entry-content > .alignwide {
-	@extend %responsive-width-wide;
+	@extend %responsive-alignwide;
+}
+
+.entry-content > .alignwide [class*="inner-container"] > .alignwide {
+	@extend %responsive-alignwide-nested;
+}
+
+/**
+ * .alignfull
+ */
+.alignfull {
 	clear: both;
 }
 
 .entry-content > .alignfull {
-	@extend %responsive-width-full;
-	clear: both;
+	@extend %responsive-alignfull;
+}
+
+.entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	@extend %responsive-alignwide-nested;
 }
 
 // Content alignment

varia/sass/components/content/_entry-content.scss

@@ -50,6 +50,6 @@
 
 	// Classic editor audio embeds.
 	.wp-audio-shortcode {
-		@extend %responsive-align-container;
+		@extend %responsive-aligndefault;
 	}
 }

varia/sass/components/footer/_footer-navigation.scss

@@ -17,9 +17,8 @@
 	.footer-menu {
 
 		color: #{map-deep-get($config-footer, "color", "text")};
+		margin: 0;
 		padding-left: 0;
-		margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
-		margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
 
 		@include media(tablet) {
 			display: flex;
@@ -27,8 +26,16 @@
 			justify-content: flex-end;
 		}
 
-		li {
+		& > li {
 			display: inline;
+
+			&:first-of-type {
+				margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
+			}
+
+			&:last-of-type {
+				margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
+			}
 		}
 
 		a {

varia/sass/components/footer/_footer.scss

@@ -1,5 +1,7 @@
 .site-footer {
 
+	overflow: hidden;
+
 	@include media(tablet) {
 		align-items: flex-end;
 		display: flex;

varia/sass/components/header/_site-main-navigation.scss

@@ -61,8 +61,8 @@
 		display: flex;
 		flex-wrap: wrap;
 		list-style: none;
+		margin: 0;
 		max-width: none;
-		margin: 0 #{-1 * map-deep-get($config-header, "main-nav", "link-padding")};
 		position: relative;
 
 		li {
@@ -97,8 +97,19 @@
 			}
 		}
 
-		& > li > a {
-			@include crop-text(map-deep-get($config-header, "main-nav", "font", "line-height"));
+		& > li {
+
+			&:first-of-type {
+				margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
+			}
+
+			&:last-of-type {
+				margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
+			}
+
+			& > a {
+				@include crop-text(map-deep-get($config-header, "main-nav", "font", "line-height"));
+			}
 		}
 
 		/* Sub-menus Flyout */

varia/sass/components/header/_site-social-navigation.scss

@@ -6,7 +6,15 @@
 		align-content: center;
 		display: flex;
 		list-style: none;
-		margin: 0 calc(-0.5 * #{map-deep-get($config-global, "spacing", "unit")});
+		margin: 0;
+
+		& > li:first-of-type {
+			margin-left: calc(-0.5 * #{map-deep-get($config-global, "spacing", "unit")})
+		}
+
+		& > li:last-of-type {
+			margin-right: calc(-0.5 * #{map-deep-get($config-global, "spacing", "unit")})
+		}
 	}
 
 	a {

varia/sass/components/pagination/_next-previous.scss

@@ -2,6 +2,7 @@
 
 // Singular navigation
 .post-navigation {
+	@extend %responsive-aligndefault;
 
 	.meta-nav {
 		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
@@ -30,6 +31,7 @@
 
 // Index/archive navigation
 .pagination {
+	@extend %responsive-aligndefault;
 
 	.nav-links {
 		justify-content: start;

varia/sass/layout/_structure.scss

@@ -60,7 +60,7 @@
  * .widget-area
  */
 .responsive-max-width {
-	@extend %responsive-width-normal;
+	@extend %responsive-aligndefault;
 }
 
 /*
@@ -86,6 +86,7 @@
 .site-footer > *,
 .site-main > article > *, // apply vertical margins to article level
 .entry-content > *,
+[class*="inner-container"] > *,
 .widget-area > * {
 
 	margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

varia/sass/vendors/_jetpack.scss

@@ -2,7 +2,7 @@
 
 	&.wp-block-jetpack-gif,
 	&.wp-block-jetpack-tiled-gallery {
-		@extend %responsive-width-wide;
+		@extend %responsive-alignwide;
 	}
 }
 
@@ -10,6 +10,6 @@
 
 	&.wp-block-jetpack-gif,
 	&.wp-block-jetpack-tiled-gallery {
-		@extend %responsive-width-full;
+		@extend %responsive-alignfull;
 	}
 }

varia/single.php

@@ -13,7 +13,7 @@ get_header();
 ?>
 
 	<section id="primary" class="content-area">
-		<main id="main" class="site-main responsive-max-width">
+		<main id="main" class="site-main">
 
 			<?php
 

varia/style-editor.css

@@ -103,17 +103,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Responsive breakpoints
  * - breakpoints values are defined in _config-global.scss
  */
-/**
- * Align widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
+ * - Sets .alignwide widths
  */
 /**
  * Crop Text Boundry

varia/style-rtl.css

@@ -127,17 +127,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Responsive breakpoints
  * - breakpoints values are defined in _config-global.scss
  */
-/**
- * Align widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
+ * - Sets .alignwide widths
  */
 /**
  * Crop Text Boundry
@@ -777,6 +769,7 @@ footer {
 .site-footer > *,
 .site-main > article > *,
 .entry-content > *,
+[class*="inner-container"] > *,
 .widget-area > * {
 	margin-top: 21.312px;
 	margin-bottom: 21.312px;
@@ -786,6 +779,7 @@ footer {
 	.site-footer > *,
 	.site-main > article > *,
 	.entry-content > *,
+	[class*="inner-container"] > *,
 	.widget-area > * {
 		margin-top: 32px;
 		margin-bottom: 32px;
@@ -795,6 +789,7 @@ footer {
 .site-footer > *:first-child,
 .site-main > article > *:first-child,
 .entry-content > *:first-child,
+[class*="inner-container"] > *:first-child,
 .widget-area > *:first-child {
 	margin-top: 0;
 }
@@ -802,6 +797,7 @@ footer {
 .site-footer > *:last-child,
 .site-main > article > *:last-child,
 .entry-content > *:last-child,
+[class*="inner-container"] > *:last-child,
 .widget-area > *:last-child {
 	margin-bottom: 0;
 }
@@ -1190,7 +1186,6 @@ 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;
@@ -1230,6 +1225,11 @@ input.has-focus[type="submit"],
 	text-align: left;
 }
 
+.wp-block-cover .wp-block-cover__inner-container,
+.wp-block-cover-image .wp-block-cover__inner-container {
+	width: calc(100% - 64px);
+}
+
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-cover-image .wp-block-cover__inner-container > * {
 	margin-top: 21.312px;
@@ -1341,36 +1341,14 @@ input.has-focus[type="submit"],
 	margin-bottom: 0;
 }
 
-.wp-block-group.alignwide .alignwide,
-.wp-block-group.alignwide .alignfull,
-.wp-block-group.alignfull .alignwide {
-	clear: both;
-}
-
-.wp-block-group.alignfull .alignfull {
-	clear: both;
-}
-
 .wp-block-group.has-background {
-	padding: 16px;
-}
-
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:first-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
+	padding: 21.312px;
 }
 
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:last-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
+@media only screen and (min-width: 560px) {
+	.wp-block-group.has-background {
+		padding: 32px;
+	}
 }
 
 h1, .h1,
@@ -1428,6 +1406,17 @@ h6, .h6 {
 	text-align: center;
 }
 
+.entry-content > *[class="wp-block-image"],
+.entry-content [class*="inner-container"] > *[class="wp-block-image"] {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.entry-content > *[class="wp-block-image"] + *,
+.entry-content [class*="inner-container"] > *[class="wp-block-image"] + * {
+	margin-top: 0;
+}
+
 img {
 	height: auto;
 	max-width: 100%;
@@ -1742,6 +1731,10 @@ p.has-background:not(.has-background-background-color) a {
 	background: none;
 }
 
+.wp-block-pullquote:not(.is-style-solid-color) blockquote {
+	padding-right: 0;
+}
+
 .wp-block-pullquote.is-style-default.alignleft blockquote > *, .wp-block-pullquote.is-style-default.aligncenter blockquote > *, .wp-block-pullquote.is-style-default.alignright blockquote > * {
 	text-align: center;
 }
@@ -1925,7 +1918,6 @@ table th,
 .alignleft {
 	text-align: left;
 	float: left;
-	margin-right: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
 }
@@ -1943,11 +1935,24 @@ table th,
 	margin-bottom: 32px;
 }
 
-.entry-content > .alignwide {
+/**
+ * .aligndefault
+ */
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
+}
+
+/**
+ * .alignwide
+ */
+.alignwide {
 	clear: both;
 }
 
-.entry-content > .alignfull {
+/**
+ * .alignfull
+ */
+.alignfull {
 	clear: both;
 }
 
@@ -2315,8 +2320,8 @@ table th,
 	display: flex;
 	flex-wrap: wrap;
 	list-style: none;
+	margin: 0;
 	max-width: none;
-	margin: 0 -16px;
 	position: relative;
 	/* Sub-menus Flyout */
 }
@@ -2362,6 +2367,14 @@ table th,
 	}
 }
 
+.main-navigation > div > ul > li:first-of-type {
+	margin-right: -16px;
+}
+
+.main-navigation > div > ul > li:last-of-type {
+	margin-left: -16px;
+}
+
 .main-navigation > div > ul > li > a {
 	line-height: 1;
 }
@@ -2464,7 +2477,15 @@ table th,
 	align-content: center;
 	display: flex;
 	list-style: none;
-	margin: 0 calc(-0.5 * 16px);
+	margin: 0;
+}
+
+.social-navigation > div > ul > li:first-of-type {
+	margin-right: calc(-0.5 * 16px);
+}
+
+.social-navigation > div > ul > li:last-of-type {
+	margin-left: calc(-0.5 * 16px);
 }
 
 .social-navigation a {
@@ -2482,6 +2503,10 @@ table th,
 	vertical-align: middle;
 }
 
+.site-footer {
+	overflow: hidden;
+}
+
 @media only screen and (min-width: 640px) {
 	.site-footer {
 		align-items: flex-end;
@@ -2542,9 +2567,8 @@ table th,
 
 .footer-navigation .footer-menu {
 	color: #767676;
+	margin: 0;
 	padding-right: 0;
-	margin-right: -16px;
-	margin-left: -16px;
 }
 
 @media only screen and (min-width: 640px) {
@@ -2555,10 +2579,18 @@ table th,
 	}
 }
 
-.footer-navigation .footer-menu li {
+.footer-navigation .footer-menu > li {
 	display: inline;
 }
 
+.footer-navigation .footer-menu > li:first-of-type {
+	margin-right: -16px;
+}
+
+.footer-navigation .footer-menu > li:last-of-type {
+	margin-left: -16px;
+}
+
 .footer-navigation .footer-menu a {
 	font-family: sans-serif;
 	font-size: 0.83333rem;
@@ -3062,277 +3094,219 @@ img#wpstats {
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width {
+.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
+	margin-right: auto;
+	margin-left: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
-.wp-block-group.alignwide .alignwide,
-.wp-block-group.alignwide .alignfull,
-.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-	margin-right: calc( -0.25 * ( 100vw - 100% ));
-	margin-left: calc( -0.25 * ( 100vw - 100% ));
-	width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
-	max-width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	width: calc(100% + 256px);
+	max-width: calc(100vw - 32px);
+	margin-right: auto;
+	margin-left: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
-		margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
-		width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
-		max-width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+		width: calc(calc( 560px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
-		margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
-		width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
-		max-width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+		width: calc(calc( 640px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
-		margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-right: -128px;
-		margin-left: -128px;
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-right: -128px;
-		margin-left: -128px;
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-	margin-right: calc( -0.5 * ( 100vw - 100% ));
-	margin-left: calc( -0.5 * ( 100vw - 100% ));
-	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
-	max-width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	width: calc(100% + 256px);
+	max-width: 100%;
+	margin-right: auto;
+	margin-left: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
-		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
-		width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
-		max-width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 560px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
-		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
-		width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
-		max-width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 640px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-	}
-}
-
-.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( 100% - 32px));
-	width: calc( calc( 100% - 32px));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
+	/* Letting the box-model do all the work here. */
+}
+
+.alignright {
+	margin-right: 16px;
 }
 
 @media only screen and (min-width: 560px) {
-	.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));
-		width: calc( calc( 560px - 32px));
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.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));
-		width: calc( calc( 640px - 32px));
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.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));
-		width: calc( calc( 782px - 32px));
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.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));
-		width: calc( calc( 782px - 32px));
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.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));
-		width: calc( calc( 782px - 32px));
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+.alignleft {
+	margin-left: 16px;
+}
+
+@media only screen and (min-width: 560px) {
+	.alignleft {
+		margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.alignleft {
+		margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.alignleft {
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.alignleft {
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.alignleft {
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 

varia/style.css

@@ -127,17 +127,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Responsive breakpoints
  * - breakpoints values are defined in _config-global.scss
  */
-/**
- * Align widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
+ * - Sets .alignwide widths
  */
 /**
  * Crop Text Boundry
@@ -777,6 +769,7 @@ footer {
 .site-footer > *,
 .site-main > article > *,
 .entry-content > *,
+[class*="inner-container"] > *,
 .widget-area > * {
 	margin-top: 21.312px;
 	margin-bottom: 21.312px;
@@ -786,6 +779,7 @@ footer {
 	.site-footer > *,
 	.site-main > article > *,
 	.entry-content > *,
+	[class*="inner-container"] > *,
 	.widget-area > * {
 		margin-top: 32px;
 		margin-bottom: 32px;
@@ -795,6 +789,7 @@ footer {
 .site-footer > *:first-child,
 .site-main > article > *:first-child,
 .entry-content > *:first-child,
+[class*="inner-container"] > *:first-child,
 .widget-area > *:first-child {
 	margin-top: 0;
 }
@@ -802,6 +797,7 @@ footer {
 .site-footer > *:last-child,
 .site-main > article > *:last-child,
 .entry-content > *:last-child,
+[class*="inner-container"] > *:last-child,
 .widget-area > *:last-child {
 	margin-bottom: 0;
 }
@@ -1190,7 +1186,6 @@ 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;
@@ -1230,6 +1225,11 @@ input.has-focus[type="submit"],
 	text-align: right;
 }
 
+.wp-block-cover .wp-block-cover__inner-container,
+.wp-block-cover-image .wp-block-cover__inner-container {
+	width: calc(100% - 64px);
+}
+
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-cover-image .wp-block-cover__inner-container > * {
 	margin-top: 21.312px;
@@ -1341,36 +1341,14 @@ input.has-focus[type="submit"],
 	margin-bottom: 0;
 }
 
-.wp-block-group.alignwide .alignwide,
-.wp-block-group.alignwide .alignfull,
-.wp-block-group.alignfull .alignwide {
-	clear: both;
-}
-
-.wp-block-group.alignfull .alignfull {
-	clear: both;
-}
-
 .wp-block-group.has-background {
-	padding: 16px;
-}
-
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:first-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
+	padding: 21.312px;
 }
 
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:last-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
+@media only screen and (min-width: 560px) {
+	.wp-block-group.has-background {
+		padding: 32px;
+	}
 }
 
 h1, .h1,
@@ -1428,6 +1406,17 @@ h6, .h6 {
 	text-align: center;
 }
 
+.entry-content > *[class="wp-block-image"],
+.entry-content [class*="inner-container"] > *[class="wp-block-image"] {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.entry-content > *[class="wp-block-image"] + *,
+.entry-content [class*="inner-container"] > *[class="wp-block-image"] + * {
+	margin-top: 0;
+}
+
 img {
 	height: auto;
 	max-width: 100%;
@@ -1742,6 +1731,10 @@ p.has-background:not(.has-background-background-color) a {
 	background: none;
 }
 
+.wp-block-pullquote:not(.is-style-solid-color) blockquote {
+	padding-left: 0;
+}
+
 .wp-block-pullquote.is-style-default.alignleft blockquote > *, .wp-block-pullquote.is-style-default.aligncenter blockquote > *, .wp-block-pullquote.is-style-default.alignright blockquote > * {
 	text-align: center;
 }
@@ -1927,8 +1920,6 @@ table th,
 	text-align: left;
 	/*rtl:ignore*/
 	float: left;
-	/*rtl:ignore*/
-	margin-right: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
 }
@@ -1948,11 +1939,24 @@ table th,
 	margin-bottom: 32px;
 }
 
-.entry-content > .alignwide {
+/**
+ * .aligndefault
+ */
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
+}
+
+/**
+ * .alignwide
+ */
+.alignwide {
 	clear: both;
 }
 
-.entry-content > .alignfull {
+/**
+ * .alignfull
+ */
+.alignfull {
 	clear: both;
 }
 
@@ -2320,8 +2324,8 @@ table th,
 	display: flex;
 	flex-wrap: wrap;
 	list-style: none;
+	margin: 0;
 	max-width: none;
-	margin: 0 -16px;
 	position: relative;
 	/* Sub-menus Flyout */
 }
@@ -2367,6 +2371,14 @@ table th,
 	}
 }
 
+.main-navigation > div > ul > li:first-of-type {
+	margin-left: -16px;
+}
+
+.main-navigation > div > ul > li:last-of-type {
+	margin-right: -16px;
+}
+
 .main-navigation > div > ul > li > a {
 	line-height: 1;
 }
@@ -2469,7 +2481,15 @@ table th,
 	align-content: center;
 	display: flex;
 	list-style: none;
-	margin: 0 calc(-0.5 * 16px);
+	margin: 0;
+}
+
+.social-navigation > div > ul > li:first-of-type {
+	margin-left: calc(-0.5 * 16px);
+}
+
+.social-navigation > div > ul > li:last-of-type {
+	margin-right: calc(-0.5 * 16px);
 }
 
 .social-navigation a {
@@ -2487,6 +2507,10 @@ table th,
 	vertical-align: middle;
 }
 
+.site-footer {
+	overflow: hidden;
+}
+
 @media only screen and (min-width: 640px) {
 	.site-footer {
 		align-items: flex-end;
@@ -2547,9 +2571,8 @@ table th,
 
 .footer-navigation .footer-menu {
 	color: #767676;
+	margin: 0;
 	padding-left: 0;
-	margin-left: -16px;
-	margin-right: -16px;
 }
 
 @media only screen and (min-width: 640px) {
@@ -2560,10 +2583,18 @@ table th,
 	}
 }
 
-.footer-navigation .footer-menu li {
+.footer-navigation .footer-menu > li {
 	display: inline;
 }
 
+.footer-navigation .footer-menu > li:first-of-type {
+	margin-left: -16px;
+}
+
+.footer-navigation .footer-menu > li:last-of-type {
+	margin-right: -16px;
+}
+
 .footer-navigation .footer-menu a {
 	font-family: sans-serif;
 	font-size: 0.83333rem;
@@ -3067,277 +3098,231 @@ img#wpstats {
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width {
+.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.responsive-max-width {
+	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
-.wp-block-group.alignwide .alignwide,
-.wp-block-group.alignwide .alignfull,
-.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-	margin-left: calc( -0.25 * ( 100vw - 100% ));
-	margin-right: calc( -0.25 * ( 100vw - 100% ));
-	width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
-	max-width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	width: calc(100% + 256px);
+	max-width: calc(100vw - 32px);
+	margin-left: auto;
+	margin-right: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
-		margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
-		width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
-		max-width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+		width: calc(calc( 560px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
-		margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
-		width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
-		max-width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+		width: calc(calc( 640px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
-		margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-left: -128px;
-		margin-right: -128px;
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignwide .alignwide,
-	.wp-block-group.alignwide .alignfull,
-	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		margin-left: -128px;
-		margin-right: -128px;
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+		max-width: calc(100vw - 32px);
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-	margin-left: calc( -0.5 * ( 100vw - 100% ));
-	margin-right: calc( -0.5 * ( 100vw - 100% ));
-	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
-	max-width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	width: calc(100% + 256px);
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
-		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
-		width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
-		max-width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 560px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
-		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
-		width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
-		max-width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 640px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
-		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-		max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
-	}
-}
-
-.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( 100% - 32px));
-	width: calc( calc( 100% - 32px));
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
+	/* Letting the box-model do all the work here. */
+}
+
+.alignright {
+	/*rtl:ignore*/
+	margin-right: 16px;
 }
 
 @media only screen and (min-width: 560px) {
-	.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));
-		width: calc( calc( 560px - 32px));
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.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));
-		width: calc( calc( 640px - 32px));
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.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));
-		width: calc( calc( 782px - 32px));
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.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));
-		width: calc( calc( 782px - 32px));
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.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));
-		width: calc( calc( 782px - 32px));
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+.alignleft {
+	/*rtl:ignore*/
+	margin-left: 16px;
+}
+
+@media only screen and (min-width: 560px) {
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 

varia/template-parts/content/content-excerpt.php

@@ -23,7 +23,7 @@
 
 	<?php varia_post_thumbnail(); ?>
 
-	<div class="entry-content responsive-max-width">
+	<div class="entry-content">
 		<?php the_excerpt(); ?>
 	</div><!-- .entry-content -->
 

varia/template-parts/content/content-page.php

@@ -17,7 +17,7 @@
 		<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
 	</header>
 
-	<div class="entry-content responsive-max-width">
+	<div class="entry-content">
 		<?php
 		the_content();
 

varia/template-parts/content/content-single.php

@@ -13,7 +13,7 @@
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
-	<header class="entry-header">
+	<header class="entry-header responsive-max-width">
 		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
 		<?php if ( ! is_page() ) : ?>
 		<div class="entry-meta">
@@ -24,7 +24,7 @@
 
 	<?php varia_post_thumbnail(); ?>
 
-	<div class="entry-content responsive-max-width">
+	<div class="entry-content">
 		<?php
 		the_content(
 			sprintf(

varia/template-parts/content/content.php

@@ -27,7 +27,7 @@
 
 	<?php varia_post_thumbnail(); ?>
 
-	<div class="entry-content responsive-max-width">
+	<div class="entry-content">
 		<?php
 		the_content(
 			sprintf(