Varia: Revise negative margins in header and footer for better box-model behavior

varia/sass/abstracts/_responsive-logic.scss

@@ -13,6 +13,7 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 
 %responsive-width-normal {
 
+/*
 	max-width: $content-width-flex;
 
 	@include media(mobile) {
@@ -34,10 +35,12 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(wide) {
 		max-width: $content-width-lg;
 	}
+*/
 }
 
 %responsive-width-wide {
 
+/*
 	@include align-width( $content-width-flex, -0.25 );
 
 	@include media(mobile) {
@@ -59,10 +62,12 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(wide) {
 		@include alignwide-width( $content-width-lg );
 	}
+*/
 }
 
 %responsive-width-full {
 
+/*
 	@include align-width( $content-width-flex, -0.5 );
 
 	@include media(mobile) {
@@ -84,6 +89,7 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(wide) {
 		@include align-width( $content-width-lg, -0.5 );
 	}
+*/
 }
 
 %responsive-align-container {

varia/sass/blocks/utilities/_style.scss

@@ -25,10 +25,15 @@
 	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 }
 
-// Alignwide & Alignfull
+// *.alignnormal, .alignwide & .alignfull
 // - 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 > .alignwide {
 	@extend %responsive-width-wide;
 	clear: both;

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 {
@@ -85,6 +85,14 @@
 				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,

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/style-rtl.css

@@ -1928,6 +1928,10 @@ table th,
 	margin-bottom: 32px;
 }
 
+.entry-content > *:not(.alignwide):not(.alignfull) {
+	clear: both;
+}
+
 .entry-content > .alignwide {
 	clear: both;
 }
@@ -2300,8 +2304,8 @@ table th,
 	display: flex;
 	flex-wrap: wrap;
 	list-style: none;
+	margin: 0;
 	max-width: none;
-	margin: 0 -16px;
 	position: relative;
 	/* Sub-menus Flyout */
 }
@@ -2329,6 +2333,12 @@ 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,
@@ -2449,7 +2459,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 {
@@ -2467,6 +2485,10 @@ table th,
 	vertical-align: middle;
 }
 
+.site-footer {
+	overflow: hidden;
+}
+
 @media only screen and (min-width: 640px) {
 	.site-footer {
 		align-items: flex-end;
@@ -2527,9 +2549,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) {
@@ -2540,10 +2561,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;
@@ -3047,154 +3076,84 @@ img#wpstats {
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width {
-	max-width: 100%;
-}
+.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull) {
+	/*
+	max-width: $content-width-flex;
 
-@media only screen and (min-width: 560px) {
-	.responsive-max-width {
-		max-width: calc( 560px - 32px);
+	@include media(mobile) {
+		max-width: $content-width-sm;
 	}
-}
 
-@media only screen and (min-width: 640px) {
-	.responsive-max-width {
-		max-width: calc( 640px - 32px);
+	@include media(tablet) {
+		max-width: $content-width-md;
 	}
-}
 
-@media only screen and (min-width: 782px) {
-	.responsive-max-width {
-		max-width: calc( 782px - 32px);
+	@include media(laptop) {
+		max-width: $content-width-lg;
 	}
-}
 
-@media only screen and (min-width: 1024px) {
-	.responsive-max-width {
-		max-width: calc( 782px - 32px);
+	@include media(desktop) {
+		max-width: $content-width-lg;
 	}
-}
 
-@media only screen and (min-width: 1280px) {
-	.responsive-max-width {
-		max-width: calc( 782px - 32px);
+	@include media(wide) {
+		max-width: $content-width-lg;
 	}
+*/
 }
 
 .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% ));
-}
+	/*
+	@include align-width( $content-width-flex, -0.25 );
 
-@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) ));
+	@include media(mobile) {
+		@include align-width( $content-width-sm, -0.25 );
 	}
-}
 
-@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) ));
+	@include media(tablet) {
+		@include align-width( $content-width-md, -0.25 );
 	}
-}
 
-@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) ));
+	@include media(laptop) {
+		@include align-width( $content-width-lg, -0.25 );
 	}
-}
 
-@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;
-		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+	@include media(desktop) {
+		@include alignwide-width( $content-width-lg );
 	}
-}
 
-@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;
-		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+	@include media(wide) {
+		@include alignwide-width( $content-width-lg );
 	}
+*/
 }
 
 .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% ));
-}
+	/*
+	@include align-width( $content-width-flex, -0.5 );
 
-@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) ));
+	@include media(mobile) {
+		@include align-width( $content-width-sm, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(tablet) {
+		@include align-width( $content-width-md, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(laptop) {
+		@include align-width( $content-width-lg, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(desktop) {
+		@include align-width( $content-width-lg, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(wide) {
+		@include align-width( $content-width-lg, -0.5 );
 	}
+*/
 }
 
 .wp-block-cover.alignwide .wp-block-cover__inner-container,

varia/style.css

@@ -1933,6 +1933,10 @@ table th,
 	margin-bottom: 32px;
 }
 
+.entry-content > *:not(.alignwide):not(.alignfull) {
+	clear: both;
+}
+
 .entry-content > .alignwide {
 	clear: both;
 }
@@ -2305,8 +2309,8 @@ table th,
 	display: flex;
 	flex-wrap: wrap;
 	list-style: none;
+	margin: 0;
 	max-width: none;
-	margin: 0 -16px;
 	position: relative;
 	/* Sub-menus Flyout */
 }
@@ -2334,6 +2338,12 @@ 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,
@@ -2454,7 +2464,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 {
@@ -2472,6 +2490,10 @@ table th,
 	vertical-align: middle;
 }
 
+.site-footer {
+	overflow: hidden;
+}
+
 @media only screen and (min-width: 640px) {
 	.site-footer {
 		align-items: flex-end;
@@ -2532,9 +2554,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) {
@@ -2545,10 +2566,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;
@@ -3052,154 +3081,84 @@ img#wpstats {
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width {
-	max-width: 100%;
-}
+.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull) {
+	/*
+	max-width: $content-width-flex;
 
-@media only screen and (min-width: 560px) {
-	.responsive-max-width {
-		max-width: calc( 560px - 32px);
+	@include media(mobile) {
+		max-width: $content-width-sm;
 	}
-}
 
-@media only screen and (min-width: 640px) {
-	.responsive-max-width {
-		max-width: calc( 640px - 32px);
+	@include media(tablet) {
+		max-width: $content-width-md;
 	}
-}
 
-@media only screen and (min-width: 782px) {
-	.responsive-max-width {
-		max-width: calc( 782px - 32px);
+	@include media(laptop) {
+		max-width: $content-width-lg;
 	}
-}
 
-@media only screen and (min-width: 1024px) {
-	.responsive-max-width {
-		max-width: calc( 782px - 32px);
+	@include media(desktop) {
+		max-width: $content-width-lg;
 	}
-}
 
-@media only screen and (min-width: 1280px) {
-	.responsive-max-width {
-		max-width: calc( 782px - 32px);
+	@include media(wide) {
+		max-width: $content-width-lg;
 	}
+*/
 }
 
 .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% ));
-}
+	/*
+	@include align-width( $content-width-flex, -0.25 );
 
-@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) ));
+	@include media(mobile) {
+		@include align-width( $content-width-sm, -0.25 );
 	}
-}
 
-@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) ));
+	@include media(tablet) {
+		@include align-width( $content-width-md, -0.25 );
 	}
-}
 
-@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) ));
+	@include media(laptop) {
+		@include align-width( $content-width-lg, -0.25 );
 	}
-}
 
-@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;
-		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+	@include media(desktop) {
+		@include alignwide-width( $content-width-lg );
 	}
-}
 
-@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;
-		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(calc( 782px - 32px) + 256px);
+	@include media(wide) {
+		@include alignwide-width( $content-width-lg );
 	}
+*/
 }
 
 .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% ));
-}
+	/*
+	@include align-width( $content-width-flex, -0.5 );
 
-@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) ));
+	@include media(mobile) {
+		@include align-width( $content-width-sm, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(tablet) {
+		@include align-width( $content-width-md, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(laptop) {
+		@include align-width( $content-width-lg, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(desktop) {
+		@include align-width( $content-width-lg, -0.5 );
 	}
-}
 
-@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) ));
+	@include media(wide) {
+		@include align-width( $content-width-lg, -0.5 );
 	}
+*/
 }
 
 .wp-block-cover.alignwide .wp-block-cover__inner-container,