Varia: Refactoring responsive logic for default, wide, and full alignment settings

- Makes .entry-content 100% wide to let the box-model work determine .alignfull widths
- .alignwide and default widths now have a fixed width, and a responsive 100% max-width
- Updates utility classes to work with this change
- Improves nested block behaviors and reduces CSS load
- Removes .responsive-max-width utility classes from .entry-content and simialr wrappers that no longer need it
- Renames responsive @extends and @mixins to match Gutenberg pre/suffixes

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

@@ -65,12 +65,15 @@
 		$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} ) );
+	max-width: calc(100vw - #{2 * map-deep-get($config-global, "spacing", "horizontal")}); // calc( #{$width} + #{$positive_multiplier * 2} + ( 100vw - #{$width} ) );
+}
+
+/**
+ * Align right widths
+ */
+@mixin alignright-margin( $width: 100%, $multiplier...) {
+	margin-right: calc( 0.5 * (100vw - #{$width}));
 }
 
 /**

varia/sass/abstracts/_responsive-logic.scss

@@ -11,10 +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;
@@ -35,24 +36,24 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(wide) {
 		max-width: $content-width-lg;
 	}
-*/
 }
 
-%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) {
@@ -62,10 +63,9 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(wide) {
 		@include alignwide-width( $content-width-lg );
 	}
-*/
 }
 
-%responsive-width-full {
+%responsive-alignfull {
 
 /*
 	@include align-width( $content-width-flex, -0.5 );
@@ -92,8 +92,71 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 */
 }
 
+%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 {
+
+	/*rtl:ignore*/
+	margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
+
+	@include media(mobile) {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-sm}) );
+	}
+
+	@include media(tablet) {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-md}) );
+	}
+
+	@include media(laptop) {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+	}
+
+	@include media(desktop) {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+	}
+
+	@include media(wide) {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+	}
+}
+
 %responsive-align-container {
 
+/*
 	@include align-container-width( calc( #{$content-width-flex} - #{$horizontal-padding} ) );
 
 	@include media(mobile) {
@@ -115,4 +178,5 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(wide) {
 		@include align-container-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")};
@@ -76,6 +75,7 @@
 		}
 	}
 
+/*
 	&.alignwide,
 	&.alignfull {
 		.wp-block-cover__inner-container,
@@ -84,6 +84,7 @@
 			@extend %responsive-align-container;
 		}
 	}
+*/
 
 	&.has-left-content,
 	&.has-right-content {

varia/sass/blocks/group/_style.scss

@@ -18,6 +18,7 @@
 		}
 	}
 
+/*
 	&.alignwide .wp-block-group__inner-container,
 	&.alignfull .wp-block-group__inner-container {
 		@extend %responsive-align-container;
@@ -34,6 +35,7 @@
 		@extend %responsive-width-full;
 		clear: both;
 	}
+*/
 
 	&.has-background {
 		padding: #{map-deep-get($config-global, "spacing", "horizontal")};

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

@@ -54,7 +54,6 @@
 
 		&:not(.alignleft):not(.alignright) blockquote {
 			@extend %responsive-align-container;
-			// max-width: calc( var(--global--width-content) - (2 * calc( var(--global--width-content) / 12 )) );
 		}
 
 		blockquote {

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*/
@@ -29,21 +29,46 @@
 // - More selector specificity needed here to deal with
 //   group-block expected behavior
 // - See: sass/blocks/group/_style.scss
-.entry-content > *:not(.alignwide):not(.alignfull) {
-	@extend %responsive-width-normal;
-	clear: both;
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+	@extend %responsive-aligndefault;
 }
 
 .entry-content > .alignwide {
-	@extend %responsive-width-wide;
+	@extend %responsive-alignwide;
 	clear: both;
 }
+.entry-content > .alignwide [class*="inner-container"] > .alignwide ,
+.entry-content > .alignwide [class*="inner-container"] > .alignfull {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 100%;
+	width: 100%;
+}
+
+.entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: calc( 100% - #{4 * map-deep-get($config-global, "spacing", "horizontal")} );
+	width: calc( 100% - #{4 * map-deep-get($config-global, "spacing", "horizontal")} );
+}
 
 .entry-content > .alignfull {
-	@extend %responsive-width-full;
+	@extend %responsive-alignfull;
 	clear: both;
 }
 
+.entry-content [class*="inner-container"] > .alignfull {
+	max-width: 100%;
+	width: 100%;
+}
+
+.entry-content [class*="inner-container"] {
+//	@extend %responsive-aligndefault;
+//	@extend %responsive-align-container;
+//	clear: both;
+}
+
 // Content alignment
 .has-left-content {
 	justify-content: flex-start;

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

@@ -85,14 +85,6 @@
 				display: inherit;
 				width: inherit;
 
-				&:first-of-type {
-					margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
-				}
-
-				&:last-of-type {
-					margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
-				}
-
 				/* Submenu display */
 				&:hover > ul,
 				&:focus-within > ul,
@@ -105,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/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;
 }
 
 /*

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

@@ -111,6 +111,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Align wide widths
  * - Sets negative margin for .alignwide and .alignfull blocks
  */
+/**
+ * Align right widths
+ */
 /**
  * Align container widths
  * - Sets a fixed-width on content within alignwide and alignfull blocks

varia/style-rtl.css

@@ -135,6 +135,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Align wide widths
  * - Sets negative margin for .alignwide and .alignfull blocks
  */
+/**
+ * Align right widths
+ */
 /**
  * Align container widths
  * - Sets a fixed-width on content within alignwide and alignfull blocks
@@ -1182,6 +1185,16 @@ input.has-focus[type="submit"],
 	/**
 	 * Block Options
 	 */
+	/*
+	&.alignwide,
+	&.alignfull {
+		.wp-block-cover__inner-container,
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
+			@extend %responsive-align-container;
+		}
+	}
+*/
 }
 
 .wp-block-cover .wp-block-cover__inner-container,
@@ -1190,7 +1203,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;
@@ -1316,6 +1328,27 @@ input.has-focus[type="submit"],
 	max-width: 50%;
 }
 
+.wp-block-group {
+	/*
+	&.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;
+	}
+*/
+}
+
 .wp-block-group .wp-block-group__inner-container {
 	margin-right: auto;
 	margin-left: auto;
@@ -1334,16 +1367,6 @@ 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;
 }
@@ -1421,6 +1444,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%;
@@ -1910,7 +1944,6 @@ table th,
 .alignleft {
 	text-align: left;
 	float: left;
-	margin-right: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
 }
@@ -1928,18 +1961,34 @@ table th,
 	margin-bottom: 32px;
 }
 
-.entry-content > *:not(.alignwide):not(.alignfull) {
+.entry-content > .alignwide {
 	clear: both;
 }
 
-.entry-content > .alignwide {
-	clear: both;
+.entry-content > .alignwide [class*="inner-container"] > .alignwide,
+.entry-content > .alignwide [class*="inner-container"] > .alignfull {
+	margin-right: auto;
+	margin-left: auto;
+	max-width: 100%;
+	width: 100%;
+}
+
+.entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	margin-right: auto;
+	margin-left: auto;
+	max-width: calc( 100% - 64px);
+	width: calc( 100% - 64px);
 }
 
 .entry-content > .alignfull {
 	clear: both;
 }
 
+.entry-content [class*="inner-container"] > .alignfull {
+	max-width: 100%;
+	width: 100%;
+}
+
 .has-left-content {
 	justify-content: flex-start;
 }
@@ -2333,12 +2382,6 @@ table th,
 		width: inherit;
 		/* Submenu display */
 	}
-	.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:hover > ul,
 	.main-navigation > div > ul li[focus-within] > ul,
 	.main-navigation > div > ul li ul:hover,
@@ -2357,6 +2400,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;
 }
@@ -3076,61 +3127,91 @@ img#wpstats {
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull) {
-	/*
-	max-width: $content-width-flex;
+.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+	max-width: 100%;
+	margin-right: auto;
+	margin-left: auto;
+}
 
-	@include media(mobile) {
-		max-width: $content-width-sm;
+@media only screen and (min-width: 560px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+		max-width: calc( 560px - 32px);
 	}
+}
 
-	@include media(tablet) {
-		max-width: $content-width-md;
+@media only screen and (min-width: 640px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+		max-width: calc( 640px - 32px);
 	}
+}
 
-	@include media(laptop) {
-		max-width: $content-width-lg;
+@media only screen and (min-width: 782px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+		max-width: calc( 782px - 32px);
 	}
+}
 
-	@include media(desktop) {
-		max-width: $content-width-lg;
+@media only screen and (min-width: 1024px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+		max-width: calc( 782px - 32px);
 	}
+}
 
-	@include media(wide) {
-		max-width: $content-width-lg;
+@media only screen and (min-width: 1280px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+		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 {
-	/*
-	@include align-width( $content-width-flex, -0.25 );
+.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;
+}
 
-	@include media(mobile) {
-		@include align-width( $content-width-sm, -0.25 );
+@media only screen and (min-width: 560px) {
+	.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);
 	}
+}
 
-	@include media(tablet) {
-		@include align-width( $content-width-md, -0.25 );
+@media only screen and (min-width: 640px) {
+	.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);
 	}
+}
 
-	@include media(laptop) {
-		@include align-width( $content-width-lg, -0.25 );
+@media only screen and (min-width: 782px) {
+	.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);
 	}
+}
 
-	@include media(desktop) {
-		@include alignwide-width( $content-width-lg );
+@media only screen and (min-width: 1024px) {
+	.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);
 	}
+}
 
-	@include media(wide) {
-		@include alignwide-width( $content-width-lg );
+@media only screen and (min-width: 1280px) {
+	.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);
 	}
-*/
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
 	/*
 	@include align-width( $content-width-flex, -0.5 );
 
@@ -3156,130 +3237,103 @@ img#wpstats {
 */
 }
 
-.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));
+.alignright {
+	margin-right: 16px;
+}
+
+@media only screen and (min-width: 560px) {
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.alignright {
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+.alignleft {
+	margin-left: 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));
+	.alignleft {
+		margin-left: 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));
+	.alignleft {
+		margin-left: 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));
+	.alignleft {
+		margin-left: 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));
+	.alignleft {
+		margin-left: 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));
+	.alignleft {
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
+.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 {
+	/*
+	@include align-container-width( calc( 100% - 32px ) );
+
+	@include media(mobile) {
+		@include align-container-width( calc( 560px - 32px) );
+	}
+
+	@include media(tablet) {
+		@include align-container-width( calc( 640px - 32px) );
+	}
+
+	@include media(laptop) {
+		@include align-container-width( calc( 782px - 32px) );
+	}
+
+	@include media(desktop) {
+		@include align-container-width( calc( 782px - 32px) );
+	}
+
+	@include media(wide) {
+		@include align-container-width( calc( 782px - 32px) );
+	}
+*/
+}
+
 /**
  * Vendors
  * - Styles for 3rd party plugins and WP extensions

varia/style.css

@@ -135,6 +135,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Align wide widths
  * - Sets negative margin for .alignwide and .alignfull blocks
  */
+/**
+ * Align right widths
+ */
 /**
  * Align container widths
  * - Sets a fixed-width on content within alignwide and alignfull blocks
@@ -1182,6 +1185,16 @@ input.has-focus[type="submit"],
 	/**
 	 * Block Options
 	 */
+	/*
+	&.alignwide,
+	&.alignfull {
+		.wp-block-cover__inner-container,
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
+			@extend %responsive-align-container;
+		}
+	}
+*/
 }
 
 .wp-block-cover .wp-block-cover__inner-container,
@@ -1190,7 +1203,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;
@@ -1316,6 +1328,27 @@ input.has-focus[type="submit"],
 	max-width: 50%;
 }
 
+.wp-block-group {
+	/*
+	&.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;
+	}
+*/
+}
+
 .wp-block-group .wp-block-group__inner-container {
 	margin-left: auto;
 	margin-right: auto;
@@ -1334,16 +1367,6 @@ 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;
 }
@@ -1421,6 +1444,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%;
@@ -1912,8 +1946,6 @@ table th,
 	text-align: left;
 	/*rtl:ignore*/
 	float: left;
-	/*rtl:ignore*/
-	margin-right: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
 }
@@ -1933,18 +1965,34 @@ table th,
 	margin-bottom: 32px;
 }
 
-.entry-content > *:not(.alignwide):not(.alignfull) {
+.entry-content > .alignwide {
 	clear: both;
 }
 
-.entry-content > .alignwide {
-	clear: both;
+.entry-content > .alignwide [class*="inner-container"] > .alignwide,
+.entry-content > .alignwide [class*="inner-container"] > .alignfull {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 100%;
+	width: 100%;
+}
+
+.entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: calc( 100% - 64px);
+	width: calc( 100% - 64px);
 }
 
 .entry-content > .alignfull {
 	clear: both;
 }
 
+.entry-content [class*="inner-container"] > .alignfull {
+	max-width: 100%;
+	width: 100%;
+}
+
 .has-left-content {
 	justify-content: flex-start;
 }
@@ -2338,12 +2386,6 @@ table th,
 		width: inherit;
 		/* Submenu display */
 	}
-	.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:hover > ul,
 	.main-navigation > div > ul li[focus-within] > ul,
 	.main-navigation > div > ul li ul:hover,
@@ -2362,6 +2404,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;
 }
@@ -3081,61 +3131,91 @@ img#wpstats {
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull) {
-	/*
-	max-width: $content-width-flex;
+.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .post-navigation, .pagination {
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}
 
-	@include media(mobile) {
-		max-width: $content-width-sm;
+@media only screen and (min-width: 560px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .post-navigation, .pagination {
+		max-width: calc( 560px - 32px);
 	}
+}
 
-	@include media(tablet) {
-		max-width: $content-width-md;
+@media only screen and (min-width: 640px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .post-navigation, .pagination {
+		max-width: calc( 640px - 32px);
 	}
+}
 
-	@include media(laptop) {
-		max-width: $content-width-lg;
+@media only screen and (min-width: 782px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .post-navigation, .pagination {
+		max-width: calc( 782px - 32px);
 	}
+}
 
-	@include media(desktop) {
-		max-width: $content-width-lg;
+@media only screen and (min-width: 1024px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .post-navigation, .pagination {
+		max-width: calc( 782px - 32px);
 	}
+}
 
-	@include media(wide) {
-		max-width: $content-width-lg;
+@media only screen and (min-width: 1280px) {
+	.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .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 {
-	/*
-	@include align-width( $content-width-flex, -0.25 );
+.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;
+}
 
-	@include media(mobile) {
-		@include align-width( $content-width-sm, -0.25 );
+@media only screen and (min-width: 560px) {
+	.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);
 	}
+}
 
-	@include media(tablet) {
-		@include align-width( $content-width-md, -0.25 );
+@media only screen and (min-width: 640px) {
+	.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);
 	}
+}
 
-	@include media(laptop) {
-		@include align-width( $content-width-lg, -0.25 );
+@media only screen and (min-width: 782px) {
+	.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);
 	}
+}
 
-	@include media(desktop) {
-		@include alignwide-width( $content-width-lg );
+@media only screen and (min-width: 1024px) {
+	.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);
 	}
+}
 
-	@include media(wide) {
-		@include alignwide-width( $content-width-lg );
+@media only screen and (min-width: 1280px) {
+	.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);
 	}
-*/
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
 	/*
 	@include align-width( $content-width-flex, -0.5 );
 
@@ -3161,128 +3241,113 @@ img#wpstats {
 */
 }
 
-.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));
+.alignright {
+	/*rtl:ignore*/
+	margin-right: 16px;
+}
+
+@media only screen and (min-width: 560px) {
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.alignright {
+		/*rtl:ignore*/
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.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) {
-	.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));
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: 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));
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: 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));
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: 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));
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: 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));
+	.alignleft {
+		/*rtl:ignore*/
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+	}
+}
+
+.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 {
+	/*
+	@include align-container-width( calc( 100% - 32px ) );
+
+	@include media(mobile) {
+		@include align-container-width( calc( 560px - 32px) );
+	}
+
+	@include media(tablet) {
+		@include align-container-width( calc( 640px - 32px) );
+	}
+
+	@include media(laptop) {
+		@include align-container-width( calc( 782px - 32px) );
+	}
+
+	@include media(desktop) {
+		@include align-container-width( calc( 782px - 32px) );
 	}
+
+	@include media(wide) {
+		@include align-container-width( 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(