Merge pull request #770 from Automattic/fix/issue-745

Add 32px vertical spacing unit to margins between blocks in all 6 theme variations.

calm-business/package-lock.json

@@ -2433,9 +2433,9 @@
       }
     },
     "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
+      "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==",
       "dev": true,
       "requires": {
         "p-defer": "^1.0.0"

calm-business/sass/blocks/_blocks.scss

@@ -2,13 +2,13 @@
 
 .entry .entry-content > *,
 .entry .entry-summary > * {
-	margin: 32px auto;
+	margin: $size__vertical-spacing-unit auto;
 	max-width: 100%;
 
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
-		margin: 32px auto;
+		margin: $size__vertical-spacing-unit auto;
 		max-width: calc(6*(100vw/12) - 28px);
 	}
 
@@ -39,8 +39,8 @@
 		clear: both;
 
 		@include media(tablet) {
-			margin-top: calc(2 * #{$size__spacing-unit});
-			margin-bottom: calc(2 * #{$size__spacing-unit});
+			margin-top: $size__vertical-spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			left: calc( -12.5% - 75px );
 			width: calc( 125% + 150px );
 			max-width: calc( 125% + 150px );
@@ -271,8 +271,8 @@
 	.wp-block-latest-posts.is-grid {
 		li {
 			border-top: 2px solid $color__border;
-			padding-top: (1 * $size__spacing-unit);
-			margin-bottom: (2 * $size__spacing-unit);
+			padding-top: $size__spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			a {
 				&:after {
 					content: '';
@@ -321,8 +321,8 @@
 		blockquote {
 			color: $color__text-main;
 			border: none;
-			margin-top: calc(4 * #{ $size__spacing-unit});
-			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
+			margin-top: calc(3 * #{$size__vertical-spacing-unit});
+			margin-bottom: calc(3.33 * #{$size__vertical-spacing-unit});
 			margin-right: 0;
 			padding-left: 0;
 		}
@@ -363,7 +363,7 @@
 			padding: 0;
 
 			blockquote {
-				margin: $size__spacing-unit 0;
+				margin: $size__vertical-spacing-unit 0;
 				padding: 0;
 				text-align: left;
 				max-width: 100%;
@@ -632,8 +632,8 @@
 	.wp-block-separator,
 	hr {
 		height: 2px;
-		margin-bottom: (2 * $size__spacing-unit);
-		margin-top: (2 * $size__spacing-unit);
+		margin-bottom: $size__vertical-spacing-unit;
+		margin-top: $size__vertical-spacing-unit;
 		text-align: left;
 		background: $color__background-body;
 		max-width: 100%;
@@ -713,7 +713,7 @@
 			padding: ($size__spacing-unit * .75) $size__spacing-unit;
 			color: #fff;
 			margin-left: 0;
-			margin-top: calc(0.75 * #{$size__spacing-unit});
+			margin-top: calc(0.75 * #{$size__vertical-spacing-unit});
 
 			@include media(desktop) {
 				font-size: $font__size-base;
@@ -834,8 +834,8 @@
 				position: absolute;
 				left: 0;
 				width: 100%;
-				border-top: 32px solid $color__background-body;
-				border-bottom: 32px solid $color__background-body;
+				border-top: $size__vertical-spacing-unit solid $color__background-body;
+				border-bottom: $size__vertical-spacing-unit solid $color__background-body;
 				height: 100%;
 				z-index: 1;
 			}
@@ -846,8 +846,8 @@
 			.wp-block-media-text__content {
 				@include post-section-dash-dark;
 				@include media(tablet) {
-					padding-top: 32px;
-					padding-bottom: 32px;
+					padding-top: $size__vertical-spacing-unit;
+					padding-bottom: $size__vertical-spacing-unit;
 				}
 			}
 			&.is-stacked-on-mobile {
@@ -875,8 +875,8 @@
 		.wp-block-media-text__content {
 			@include post-section-dash;
 			@include media(tablet) {
-				padding-top: 32px;
-				padding-bottom: 32px;
+				padding-top: $size__vertical-spacing-unit;
+				padding-bottom: $size__vertical-spacing-unit;
 			}
 		}
 

calm-business/sass/site/primary/_posts-and-pages.scss

@@ -47,7 +47,7 @@
 			margin: 32px auto;
 			max-width: calc(6*(100vw/12) - 28px);
 		}
-		
+
 		margin: 0;
 
 		a {
@@ -236,7 +236,7 @@
 		// Overwrite iframe embeds that have inline styles.
 		> iframe[style] {
 
-			margin: 32px 0 !important;
+			margin: $size__vertical-spacing-unit 0 !important;
 			max-width: 100% !important;
 
 			@include media(tablet) {

calm-business/sass/variables-site/_structure.scss

@@ -1,6 +1,7 @@
 // Responsive widths.
 
 $size__spacing-unit: 1rem;
+$size__vertical-spacing-unit: 32px;
 $size__site-main: 100%;
 $size__site-sidebar: 25%;
 $size__site-margins: calc(10% + 60px);

calm-business/style-rtl.css

@@ -3489,8 +3489,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     right: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3747,7 +3747,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3791,8 +3791,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #242424;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-left: 0;
   padding-right: 0;
 }
@@ -3834,7 +3834,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: right;
   max-width: 100%;
@@ -4124,8 +4124,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-separator,
 .entry .entry-content hr {
   height: 2px;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
   text-align: right;
   background: #FAF8F5;
   max-width: 100%;
@@ -4234,7 +4234,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-right: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

calm-business/style.css

@@ -3495,8 +3495,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     left: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3759,7 +3759,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3803,8 +3803,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #242424;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-right: 0;
   padding-left: 0;
 }
@@ -3846,7 +3846,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: left;
   max-width: 100%;
@@ -4136,8 +4136,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-separator,
 .entry .entry-content hr {
   height: 2px;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
   text-align: left;
   background: #FAF8F5;
   max-width: 100%;
@@ -4246,7 +4246,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-left: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

elegant-business/package-lock.json

@@ -437,7 +437,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "requires": {
@@ -2376,7 +2376,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
       "requires": {
@@ -2481,7 +2481,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
       "requires": {
@@ -2556,7 +2556,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
@@ -2654,7 +2654,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
         },
@@ -2717,7 +2717,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -3209,7 +3209,7 @@
     },
     "pretty-hrtime": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },

elegant-business/sass/blocks/_blocks.scss

@@ -2,13 +2,13 @@
 
 .entry .entry-content > *,
 .entry .entry-summary > * {
-	margin: 32px 0;
+	margin: $size__vertical-spacing-unit 0;
 	max-width: 100%;
 
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
-		margin: 32px auto;
+		margin: $size__vertical-spacing-unit auto;
 	}
 
 	> *:first-child {
@@ -38,8 +38,8 @@
 		clear: both;
 
 		@include media(tablet) {
-			margin-top: calc(2 * #{$size__spacing-unit});
-			margin-bottom: calc(2 * #{$size__spacing-unit});
+			margin-top: $size__vertical-spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			left: calc( -12.5% - 75px + 1rem );
 			width: calc( 125% + 150px );
 			max-width: calc( 125% + 150px - 2rem );
@@ -119,8 +119,8 @@
 	& > h5,
 	& > h6 {
 		text-align: center;
-		margin-top: #{$size__spacing-unit * 2};
-		margin-bottom: #{$size__spacing-unit * 2};
+		margin-top: $size__vertical-spacing-unit;
+		margin-bottom: $size__vertical-spacing-unit;
 	}
 
 	//! Paragraphs
@@ -271,8 +271,8 @@
 	.wp-block-latest-posts.is-grid {
 		li {
 			border-top: 2px solid $color__border;
-			padding-top: (1 * $size__spacing-unit);
-			margin-bottom: (2 * $size__spacing-unit);
+			padding-top: $size__spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			a {
 				&:after {
 					content: '';
@@ -321,8 +321,8 @@
 		blockquote {
 			color: $color__text-main;
 			border: none;
-			margin-top: calc(4 * #{ $size__spacing-unit});
-			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
+			margin-top: calc(3 * #{ $size__vertical-spacing-unit});
+			margin-bottom: calc(3.33 * #{ $size__vertical-spacing-unit});
 			margin-right: 0;
 			padding-left: 0;
 		}
@@ -458,7 +458,7 @@
 
 		&.is-large,
 		&.is-style-large {
-			margin: $size__spacing-unit auto;
+			margin: $size__vertical-spacing-unit auto;
 			padding: 0;
 			border-left: none;
 
@@ -478,7 +478,7 @@
 			}
 
 			@include media(tablet) {
-				margin: $size__spacing-unit auto;
+				margin: $size__vertical-spacing-unit auto;
 				padding: $size__spacing-unit 0;
 
 				p {
@@ -524,7 +524,7 @@
 
 		& + .wp-block-cover:not(.alignleft):not(.alignrights),
 		& + .wp-block-cover-image:not(.alignleft):not(.alignrights) {
-			margin-top: 64px;
+			margin-top: $size__vertical-spacing-unit;
 		}
 
 		.wp-block-cover-image-text,
@@ -629,9 +629,9 @@
 		background-color: #f1f1f1;
 		border: 0;
 		height: 2px;
-		margin-bottom: (2 * $size__spacing-unit);
+		margin-bottom: $size__vertical-spacing-unit;
 		margin-left: auto;
-		margin-top: (2 * $size__spacing-unit);
+		margin-top: $size__vertical-spacing-unit;
 		margin-right: auto;
 		max-width: 5em;
 		text-align: center;
@@ -670,8 +670,8 @@
 
 	//! Separator
 	.wp-block-spacer {
-		margin-bottom: $size__spacing-unit;
-		margin-top: $size__spacing-unit;
+		margin-bottom: $size__vertical-spacing-unit;
+		margin-top: $size__vertical-spacing-unit;
 	}
 
 	//! Twitter Embed
@@ -706,7 +706,7 @@
 			padding: ($size__spacing-unit * .75) $size__spacing-unit;
 			color: #fff;
 			margin-left: 0;
-			margin-top: calc(0.75 * #{$size__spacing-unit});
+			margin-top: calc(0.75 * #{$size__vertical-spacing-unit});
 
 			@include media(desktop) {
 				font-size: $font__size-base;
@@ -742,7 +742,7 @@
 		background: $color__background-screen;
 
 		& + .wp-block-media-text {
-			margin-top: -32px;
+			margin-top: -$size__vertical-spacing-unit;
 		}
 
 		a {

elegant-business/sass/variables-site/_structure.scss

@@ -1,6 +1,7 @@
 // Responsive widths.
 
 $size__spacing-unit: 1rem;
+$size__vertical-spacing-unit: 32px;
 $size__site-main: 100%;
 $size__site-sidebar: 25%;
 $size__site-margins: calc(10% + 60px);

elegant-business/style-rtl.css

@@ -3380,8 +3380,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     right: calc( -12.5% - 75px + 1rem);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px - 2rem);
@@ -3479,8 +3479,8 @@ body.page .main-navigation {
 .entry .entry-content > h5,
 .entry .entry-content > h6 {
   text-align: center;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: 32px;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content p.has-background {
@@ -3638,7 +3638,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid rgba(0, 0, 0, 0.03);
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3682,8 +3682,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #111;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-left: 0;
   padding-right: 0;
 }
@@ -3813,7 +3813,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-right: none;
 }
@@ -3836,7 +3836,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -3882,7 +3882,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover-image + .wp-block-cover-image:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover-image:not(.alignleft):not(.alignrights) {
-  margin-top: 64px;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -4017,9 +4017,9 @@ body.page .main-navigation {
   background-color: #f1f1f1;
   border: 0;
   height: 2px;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
   margin-right: auto;
-  margin-top: 2rem;
+  margin-top: 32px;
   margin-left: auto;
   max-width: 5em;
   text-align: center;
@@ -4085,8 +4085,8 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-spacer {
-  margin-bottom: 1rem;
-  margin-top: 1rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-embed-twitter {
@@ -4116,7 +4116,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-right: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

elegant-business/style.css

@@ -3386,8 +3386,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     left: calc( -12.5% - 75px + 1rem);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px - 2rem);
@@ -3491,8 +3491,8 @@ body.page .main-navigation {
 .entry .entry-content > h5,
 .entry .entry-content > h6 {
   text-align: center;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: 32px;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content p.has-background {
@@ -3650,7 +3650,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid rgba(0, 0, 0, 0.03);
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3694,8 +3694,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #111;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-right: 0;
   padding-left: 0;
 }
@@ -3825,7 +3825,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-left: none;
 }
@@ -3848,7 +3848,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -3894,7 +3894,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover-image + .wp-block-cover-image:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover-image:not(.alignleft):not(.alignrights) {
-  margin-top: 64px;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -4029,9 +4029,9 @@ body.page .main-navigation {
   background-color: #f1f1f1;
   border: 0;
   height: 2px;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
   margin-left: auto;
-  margin-top: 2rem;
+  margin-top: 32px;
   margin-right: auto;
   max-width: 5em;
   text-align: center;
@@ -4097,8 +4097,8 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-spacer {
-  margin-bottom: 1rem;
-  margin-top: 1rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-embed-twitter {
@@ -4128,7 +4128,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-left: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

friendly-business/package-lock.json

@@ -2433,9 +2433,9 @@
       }
     },
     "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
+      "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==",
       "dev": true,
       "requires": {
         "p-defer": "^1.0.0"

friendly-business/sass/blocks/_blocks.scss

@@ -2,13 +2,13 @@
 
 .entry .entry-content > *,
 .entry .entry-summary > * {
-	margin: 32px auto;
+	margin: $size__vertical-spacing-unit auto;
 	max-width: 100%;
 
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
-		margin: 32px auto;
+		margin: $size__vertical-spacing-unit auto;
 	}
 
 	> *:first-child {
@@ -38,8 +38,8 @@
 		clear: both;
 
 		@include media(tablet) {
-			margin-top: calc(2 * #{$size__spacing-unit});
-			margin-bottom: calc(2 * #{$size__spacing-unit});
+			margin-top: $size__vertical-spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			left: calc( -12.5% - 75px );
 			width: calc( 125% + 150px );
 			max-width: calc( 125% + 150px );
@@ -262,8 +262,8 @@
 	.wp-block-latest-posts.is-grid {
 		li {
 			border-top: 2px solid $color__border;
-			padding-top: (1 * $size__spacing-unit);
-			margin-bottom: (2 * $size__spacing-unit);
+			padding-top: $size__spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			a {
 				&:after {
 					content: '';
@@ -312,8 +312,8 @@
 		blockquote {
 			color: $color__text-main;
 			border: none;
-			margin-top: calc(4 * #{ $size__spacing-unit});
-			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
+			margin-top: calc(3 * #{$size__vertical-spacing-unit});
+			margin-bottom: calc(3.33 * #{$size__vertical-spacing-unit});
 			margin-right: 0;
 			padding-left: 0;
 		}
@@ -354,7 +354,7 @@
 			padding: 0;
 
 			blockquote {
-				margin: $size__spacing-unit 0;
+				margin: $size__vertical-spacing-unit 0;
 				padding: 0;
 				text-align: left;
 				max-width: 100%;
@@ -462,7 +462,7 @@
 
 		&.is-large,
 		&.is-style-large {
-			margin: $size__spacing-unit auto;
+			margin: $size__vertical-spacing-unit auto;
 			padding: 0;
 			border-left: none;
 
@@ -624,7 +624,7 @@
 		background-color: $color__text-main;
 		border: 0;
 		height: 3px;
-		margin: (2 * $size__spacing-unit) auto;
+		margin: $size__vertical-spacing-unit auto;
 		max-width: 10rem;
 
 		&.is-style-wide {
@@ -691,7 +691,7 @@
 			padding: ($size__spacing-unit * .75) $size__spacing-unit;
 			color: #fff;
 			margin-left: 0;
-			margin-top: calc(0.75 * #{$size__spacing-unit});
+			margin-top: calc(0.75 * #{$size__vertical-spacing-unit});
 
 			@include media(desktop) {
 				font-size: $font__size-base;
@@ -759,11 +759,11 @@
 
 		&.has-media-on-the-right .wp-block-media-text__content {
 			:first-child {
-				margin-top: 1.5em;
+				margin-top: $size__vertical-spacing-unit;
 			}
 
 			:last-child {
-				margin-bottom: $size__spacing-unit;
+				margin-bottom: $size__vertical-spacing-unit;
 			}
 		}
 
@@ -797,7 +797,7 @@
 
 			.wp-block-media-text__content {
 				:last-child {
-					margin-bottom: $size__spacing-unit;
+					margin-bottom: $size__vertical-spacing-unit;
 				}
 			}
 
@@ -806,7 +806,7 @@
 				.wp-block-media-text__content {
 
 					:first-child {
-						margin-top: $size__spacing-unit;
+						margin-top: $size__vertical-spacing-unit;
 					}
 				}
 			}

friendly-business/sass/variables-site/_structure.scss

@@ -1,6 +1,7 @@
 // Responsive widths.
 
 $size__spacing-unit: 1rem;
+$size__vertical-spacing-unit: 32px;
 $size__site-main: 100%;
 $size__site-sidebar: 25%;
 $size__site-margins: calc(10% + 60px);

friendly-business/style-rtl.css

@@ -3334,8 +3334,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     right: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3586,7 +3586,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3630,8 +3630,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #3c2323;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-left: 0;
   padding-right: 0;
 }
@@ -3673,7 +3673,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: right;
   max-width: 100%;
@@ -3772,7 +3772,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-right: none;
 }
@@ -3959,7 +3959,7 @@ body.page .main-navigation {
   background-color: #3c2323;
   border: 0;
   height: 3px;
-  margin: 2rem auto;
+  margin: 32px auto;
   max-width: 10rem;
   /* Remove duplicate rule-line when a separator
 		 * is followed by an H1, or H2 */
@@ -4049,7 +4049,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-right: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {
@@ -4116,11 +4116,11 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :first-child {
-  margin-top: 1.5em;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :last-child {
-  margin-bottom: 1rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
@@ -4146,10 +4146,10 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content :last-child {
-    margin-bottom: 1rem;
+    margin-bottom: 32px;
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :first-child {
-    margin-top: 1rem;
+    margin-top: 32px;
   }
 }
 

friendly-business/style.css

@@ -3340,8 +3340,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     left: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3598,7 +3598,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3642,8 +3642,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #3c2323;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-right: 0;
   padding-left: 0;
 }
@@ -3685,7 +3685,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: left;
   max-width: 100%;
@@ -3784,7 +3784,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-left: none;
 }
@@ -3971,7 +3971,7 @@ body.page .main-navigation {
   background-color: #3c2323;
   border: 0;
   height: 3px;
-  margin: 2rem auto;
+  margin: 32px auto;
   max-width: 10rem;
   /* Remove duplicate rule-line when a separator
 		 * is followed by an H1, or H2 */
@@ -4061,7 +4061,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-left: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {
@@ -4128,11 +4128,11 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :first-child {
-  margin-top: 1.5em;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :last-child {
-  margin-bottom: 1rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
@@ -4158,10 +4158,10 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content :last-child {
-    margin-bottom: 1rem;
+    margin-bottom: 32px;
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :first-child {
-    margin-top: 1rem;
+    margin-top: 32px;
   }
 }
 

modern-business/package-lock.json

@@ -437,7 +437,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "requires": {
@@ -2376,7 +2376,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
       "requires": {
@@ -2481,7 +2481,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
       "requires": {
@@ -2556,7 +2556,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
@@ -2654,7 +2654,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
         },
@@ -2717,7 +2717,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -3209,7 +3209,7 @@
     },
     "pretty-hrtime": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },

modern-business/sass/blocks/_blocks.scss

@@ -2,13 +2,13 @@
 
 .entry .entry-content > *,
 .entry .entry-summary > * {
-	margin: 32px 0;
+	margin: $size__vertical-spacing-unit 0;
 	max-width: 100%;
 
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
-		margin: 32px auto;
+		margin: $size__vertical-spacing-unit auto;
 	}
 
 	> *:first-child {
@@ -38,8 +38,8 @@
 		clear: both;
 
 		@include media(tablet) {
-			margin-top: calc(2 * #{$size__spacing-unit});
-			margin-bottom: calc(2 * #{$size__spacing-unit});
+			margin-top: $size__vertical-spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			left: calc( -12.5% - 75px );
 			width: calc( 125% + 150px );
 			max-width: calc( 125% + 150px );
@@ -125,7 +125,7 @@
 	& > h4,
 	& > h5,
 	& > h6 {
-		margin: 2rem auto;
+		margin: $size__vertical-spacing-unit auto;
 		text-align: center;
 	}
 
@@ -200,31 +200,31 @@
 		}
 
 		@include media(tablet) {
-			padding: 60px 0;
+			padding: #{2 * $size__vertical-spacing-unit} 0;
 
 			.wp-block-media-text__media {
-				margin-left: -60px;
-				margin-right: 60px;
+				margin-left: -#{2 * $size__vertical-spacing-unit};
+				margin-right: #{2 * $size__vertical-spacing-unit};
 				max-width: calc( 100% );
 			}
 
 			.wp-block-media-text__content {
-				padding: 0 60px 0 0;
+				padding: 0 #{2 * $size__vertical-spacing-unit} 0 0;
 			}
 
 			&.alignfull {
-				margin-left: 60px;
-				margin-right: 60px;
+				margin-left: #{2 * $size__vertical-spacing-unit};
+				margin-right: #{2 * $size__vertical-spacing-unit};
 				max-width: calc( 125% + 30px );
 			}
 
 			&.has-media-on-the-right .wp-block-media-text__media {
-				margin-right: -60px;
-				margin-left: 60px;
+				margin-right: -#{2 * $size__vertical-spacing-unit};
+				margin-left: #{2 * $size__vertical-spacing-unit};
 			}
 
 			&.has-media-on-the-right .wp-block-media-text__content {
-				padding: 0 0 0 60px;
+				padding: 0 0 0 #{2 * $size__vertical-spacing-unit};
 			}
 
 		}
@@ -359,7 +359,7 @@
 			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
 			font-weight: bold;
 			line-height: $font__line-height-heading;
-			padding-bottom: ( .75 * $size__spacing-unit );
+			padding-bottom: #{ .75 * $size__vertical-spacing-unit };
 
 			&.menu-item-has-children,
 			&:last-child {
@@ -384,7 +384,7 @@
 	.wp-block-categories {
 
 		ul {
-			padding-top: ( .75 * $size__spacing-unit );
+			padding-top: #{ .75 * $size__vertical-spacing-unit };
 		}
 
 		li ul {
@@ -399,8 +399,8 @@
 	.wp-block-latest-posts.is-grid {
 		li {
 			border-top: 2px solid $color__border;
-			padding-top: (1 * $size__spacing-unit);
-			margin-bottom: (2 * $size__spacing-unit);
+			padding-top: #{1 * $size__spacing-unit};
+			margin-bottom: $size__vertical-spacing-unit;
 			a {
 				&:after {
 					content: '';
@@ -449,8 +449,8 @@
 		blockquote {
 			color: $color__text-main;
 			border: none;
-			margin-top: calc(4 * #{ $size__spacing-unit});
-			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
+			margin-top: calc(3 * #{ $size__vertical-spacing-unit});
+			margin-bottom: calc(3.33 * #{ $size__vertical-spacing-unit});
 			margin-right: 0;
 			padding-left: 0;
 		}
@@ -491,7 +491,7 @@
 			padding: 0;
 
 			blockquote {
-				margin: $size__spacing-unit 0;
+				margin: $size__vertical-spacing-unit 0;
 				padding: 0;
 				text-align: left;
 				max-width: 100%;
@@ -599,7 +599,7 @@
 
 		&.is-large,
 		&.is-style-large {
-			margin: $size__spacing-unit auto;
+			margin: $size__vertical-spacing-unit auto;
 			padding: 0;
 			border-left: none;
 
@@ -619,7 +619,7 @@
 			}
 
 			@include media(tablet) {
-				margin: $size__spacing-unit auto;
+				margin: $size__vertical-spacing-unit auto;
 				padding: $size__spacing-unit 0;
 
 				p {
@@ -762,7 +762,7 @@
 		background-color: $color__text-light;
 		border: 0;
 		height: 1px;
-		margin: (2 * $size__spacing-unit) auto;
+		margin: $size__vertical-spacing-unit auto;
 		max-width: 5em;
 		text-align: left;
 
@@ -828,7 +828,7 @@
 			padding: ($size__spacing-unit * .75) $size__spacing-unit;
 			color: #fff;
 			margin-left: 0;
-			margin-top: calc(0.75 * #{$size__spacing-unit});
+			margin-top: calc(0.75 * #{$size__vertical-spacing-unit});
 
 			@include media(desktop) {
 				font-size: $font__size-base;

modern-business/sass/site/primary/_posts-and-pages.scss

@@ -231,7 +231,7 @@
 		// Overwrite iframe embeds that have inline styles.
 		> iframe[style] {
 
-			margin: 32px 0 !important;
+			margin: $size__vertical-spacing-unit 0 !important;
 			max-width: 100% !important;
 
 			@include media(tablet) {

modern-business/sass/variables-site/_structure.scss

@@ -1,6 +1,7 @@
 // Responsive widths.
 
 $size__spacing-unit: 1rem;
+$size__vertical-spacing-unit: 32px;
 $size__site-main: 100%;
 $size__site-sidebar: 25%;
 $size__site-margins: calc(10% + 60px);

modern-business/style-rtl.css

@@ -3403,8 +3403,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     right: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3507,7 +3507,7 @@ body.page .main-navigation {
 .entry .entry-content > h4,
 .entry .entry-content > h5,
 .entry .entry-content > h6 {
-  margin: 2rem auto;
+  margin: 32px auto;
   text-align: center;
 }
 
@@ -3586,27 +3586,27 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text {
-    padding: 60px 0;
+    padding: 64px 0;
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__media {
-    margin-right: -60px;
-    margin-left: 60px;
+    margin-right: -64px;
+    margin-left: 64px;
     max-width: calc( 100%);
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding: 0 0 0 60px;
+    padding: 0 0 0 64px;
   }
   .entry .entry-content .wp-block-media-text.alignfull {
-    margin-right: 60px;
-    margin-left: 60px;
+    margin-right: 64px;
+    margin-left: 64px;
     max-width: calc( 125% + 30px);
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
-    margin-left: -60px;
-    margin-right: 60px;
+    margin-left: -64px;
+    margin-right: 64px;
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
-    padding: 0 60px 0 0;
+    padding: 0 64px 0 0;
   }
 }
 
@@ -3734,7 +3734,7 @@ body.page .main-navigation {
   font-size: calc(22px * 1.125);
   font-weight: bold;
   line-height: 1.2;
-  padding-bottom: 0.75rem;
+  padding-bottom: 24px;
 }
 
 .entry .entry-content .wp-block-archives li.menu-item-has-children, .entry .entry-content .wp-block-archives li:last-child,
@@ -3757,7 +3757,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-categories ul {
-  padding-top: 0.75rem;
+  padding-top: 24px;
 }
 
 .entry .entry-content .wp-block-categories li ul {
@@ -3779,7 +3779,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3823,8 +3823,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #181818;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-left: 0;
   padding-right: 0;
 }
@@ -3866,7 +3866,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: right;
   max-width: 100%;
@@ -3965,7 +3965,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-right: none;
 }
@@ -3988,7 +3988,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -4154,7 +4154,7 @@ body.page .main-navigation {
   background-color: #686868;
   border: 0;
   height: 1px;
-  margin: 2rem auto;
+  margin: 32px auto;
   max-width: 5em;
   text-align: right;
   /* Remove duplicate rule-line when a separator
@@ -4243,7 +4243,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-right: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

modern-business/style.css

@@ -3409,8 +3409,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     left: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3519,7 +3519,7 @@ body.page .main-navigation {
 .entry .entry-content > h4,
 .entry .entry-content > h5,
 .entry .entry-content > h6 {
-  margin: 2rem auto;
+  margin: 32px auto;
   text-align: center;
 }
 
@@ -3598,27 +3598,27 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text {
-    padding: 60px 0;
+    padding: 64px 0;
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__media {
-    margin-left: -60px;
-    margin-right: 60px;
+    margin-left: -64px;
+    margin-right: 64px;
     max-width: calc( 100%);
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding: 0 60px 0 0;
+    padding: 0 64px 0 0;
   }
   .entry .entry-content .wp-block-media-text.alignfull {
-    margin-left: 60px;
-    margin-right: 60px;
+    margin-left: 64px;
+    margin-right: 64px;
     max-width: calc( 125% + 30px);
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
-    margin-right: -60px;
-    margin-left: 60px;
+    margin-right: -64px;
+    margin-left: 64px;
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
-    padding: 0 0 0 60px;
+    padding: 0 0 0 64px;
   }
 }
 
@@ -3746,7 +3746,7 @@ body.page .main-navigation {
   font-size: calc(22px * 1.125);
   font-weight: bold;
   line-height: 1.2;
-  padding-bottom: 0.75rem;
+  padding-bottom: 24px;
 }
 
 .entry .entry-content .wp-block-archives li.menu-item-has-children, .entry .entry-content .wp-block-archives li:last-child,
@@ -3769,7 +3769,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-categories ul {
-  padding-top: 0.75rem;
+  padding-top: 24px;
 }
 
 .entry .entry-content .wp-block-categories li ul {
@@ -3791,7 +3791,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3835,8 +3835,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #181818;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-right: 0;
   padding-left: 0;
 }
@@ -3878,7 +3878,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: left;
   max-width: 100%;
@@ -3977,7 +3977,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-left: none;
 }
@@ -4000,7 +4000,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -4166,7 +4166,7 @@ body.page .main-navigation {
   background-color: #686868;
   border: 0;
   height: 1px;
-  margin: 2rem auto;
+  margin: 32px auto;
   max-width: 5em;
   text-align: left;
   /* Remove duplicate rule-line when a separator
@@ -4255,7 +4255,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-left: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

professional-business/package-lock.json

@@ -2433,9 +2433,9 @@
       }
     },
     "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
+      "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==",
       "dev": true,
       "requires": {
         "p-defer": "^1.0.0"

professional-business/sass/blocks/_blocks.scss

@@ -2,13 +2,13 @@
 
 .entry .entry-content > *,
 .entry .entry-summary > * {
-	margin: 32px 0;
+	margin: $size__vertical-spacing-unit 0;
 	max-width: 100%;
 
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
-		margin: 32px auto;
+		margin: $size__vertical-spacing-unit auto;
 	}
 
 	> *:first-child {
@@ -38,8 +38,8 @@
 		clear: both;
 
 		@include media(tablet) {
-			margin-top: calc(2 * #{$size__spacing-unit});
-			margin-bottom: calc(2 * #{$size__spacing-unit});
+			margin-top: $size__vertical-spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			left: calc( -12.5% - 75px );
 			width: calc( 125% + 150px );
 			max-width: calc( 125% + 150px );
@@ -263,8 +263,8 @@
 	.wp-block-latest-posts.is-grid {
 		li {
 			border-top: 2px solid $color__border;
-			padding-top: (1 * $size__spacing-unit);
-			margin-bottom: (2 * $size__spacing-unit);
+			padding-top: $size__spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			a {
 				&:after {
 					content: '';
@@ -313,8 +313,8 @@
 		blockquote {
 			color: $color__text-main;
 			border: none;
-			margin-top: calc(4 * #{ $size__spacing-unit});
-			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
+			margin-top: calc(3 * #{$size__vertical-spacing-unit});
+			margin-bottom: calc(3.33 * #{ $size__vertical-spacing-unit});
 			margin-right: 0;
 		}
 
@@ -469,7 +469,7 @@
 			}
 
 			@include media(tablet) {
-				margin: $size__spacing-unit auto;
+				margin: $size__vertical-spacing-unit auto;
 				padding: $size__spacing-unit 0;
 
 				p {
@@ -515,7 +515,7 @@
 
 		& + .wp-block-cover:not(.alignleft):not(.alignrights),
 		& + .wp-block-cover-image:not(.alignleft):not(.alignrights) {
-			margin-top: 64px;
+			margin-top: $size__vertical-spacing-unit;
 		}
 
 		.wp-block-cover-image-text,
@@ -600,8 +600,8 @@
 	hr {
 		background: #fff;
 		border: 0;
-		margin-bottom: (2 * $size__spacing-unit);
-		margin-top: (2 * $size__spacing-unit);
+		margin-bottom: $size__vertical-spacing-unit;
+		margin-top: $size__vertical-spacing-unit;
 		max-width: 100%;
 		@include postContentMaxWidth();
 
@@ -686,7 +686,7 @@
 			padding: ($size__spacing-unit * .75) $size__spacing-unit;
 			color: #fff;
 			margin-left: 0;
-			margin-top: calc(0.75 * #{$size__spacing-unit});
+			margin-top: calc(0.75 * #{$size__vertical-spacing-unit});
 
 			@include media(desktop) {
 				font-size: $font__size-base;

professional-business/sass/site/primary/_posts-and-pages.scss

@@ -228,7 +228,7 @@
 		// Overwrite iframe embeds that have inline styles.
 		> iframe[style] {
 
-			margin: 32px 0 !important;
+			margin: $size__vertical-spacing-unit 0 !important;
 			max-width: 100% !important;
 
 			@include media(tablet) {

professional-business/sass/variables-site/_structure.scss

@@ -1,6 +1,7 @@
 // Responsive widths.
 
 $size__spacing-unit: 1rem;
+$size__vertical-spacing-unit: 32px;
 $size__site-main: 100%;
 $size__site-sidebar: 25%;
 $size__site-margins: calc(10% + 60px);

professional-business/style-rtl.css

@@ -3384,8 +3384,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     right: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3639,7 +3639,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3683,8 +3683,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #1e1e1e;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-left: 0;
 }
 
@@ -3836,7 +3836,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -3882,7 +3882,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover-image + .wp-block-cover-image:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover-image:not(.alignleft):not(.alignrights) {
-  margin-top: 64px;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -4003,8 +4003,8 @@ body.page .main-navigation {
 .entry .entry-content hr {
   background: #fff;
   border: 0;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
   max-width: 100%;
   /* Remove duplicate rule-line when a separator
 		 * is followed by an H1, or H2 */
@@ -4128,7 +4128,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-right: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

professional-business/style.css

@@ -3390,8 +3390,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     left: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3651,7 +3651,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #ccc;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3695,8 +3695,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #1e1e1e;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-right: 0;
 }
 
@@ -3848,7 +3848,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -3894,7 +3894,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover-image + .wp-block-cover-image:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover:not(.alignleft):not(.alignrights),
 .entry .entry-content .wp-block-cover + .wp-block-cover-image:not(.alignleft):not(.alignrights) {
-  margin-top: 64px;
+  margin-top: 32px;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -4015,8 +4015,8 @@ body.page .main-navigation {
 .entry .entry-content hr {
   background: #fff;
   border: 0;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
   max-width: 100%;
   /* Remove duplicate rule-line when a separator
 		 * is followed by an H1, or H2 */
@@ -4140,7 +4140,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #fff;
   margin-left: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {

sophisticated-business/package-lock.json

@@ -437,7 +437,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "requires": {
@@ -2376,7 +2376,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
       "requires": {
@@ -2481,7 +2481,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
       "requires": {
@@ -2556,7 +2556,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
@@ -2654,7 +2654,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
         },
@@ -2717,7 +2717,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -3209,7 +3209,7 @@
     },
     "pretty-hrtime": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },

sophisticated-business/sass/blocks/_blocks.scss

@@ -2,13 +2,13 @@
 
 .entry .entry-content > *,
 .entry .entry-summary > * {
-	margin: 32px 0;
+	margin: $size__vertical-spacing-unit 0;
 	max-width: 100%;
 
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
-		margin: 32px auto;
+		margin: $size__vertical-spacing-unit auto;
 	}
 
 	> *:first-child {
@@ -38,8 +38,8 @@
 		clear: both;
 
 		@include media(tablet) {
-			margin-top: calc(2 * #{$size__spacing-unit});
-			margin-bottom: calc(2 * #{$size__spacing-unit});
+			margin-top: $size__vertical-spacing-unit;
+			margin-bottom: $size__vertical-spacing-unit;
 			left: calc( -12.5% - 75px );
 			width: calc( 125% + 150px );
 			max-width: calc( 125% + 150px );
@@ -122,8 +122,8 @@
 	& > h4,
 	& > h5,
 	& > h6 {
-		margin-top: #{$size__spacing-unit * 2};
-		margin-bottom: #{$size__spacing-unit * 2};
+		margin-top: $size__vertical-spacing-unit;
+		margin-bottom: $size__vertical-spacing-unit;
 		text-align: center;
 	}
 
@@ -286,7 +286,7 @@
 		li {
 			border-top: 2px solid $color__border;
 			padding-top: (1 * $size__spacing-unit);
-			margin-bottom: (2 * $size__spacing-unit);
+			margin-bottom: $size__vertical-spacing-unit;
 			a {
 				&:after {
 					content: '';
@@ -335,8 +335,8 @@
 		blockquote {
 			color: $color__text-main;
 			border: none;
-			margin-top: calc(4 * #{ $size__spacing-unit});
-			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
+			margin-top: calc(3 * #{$size__vertical-spacing-unit});
+			margin-bottom: calc(3.33 * #{$size__vertical-spacing-unit});
 			margin-right: 0;
 			padding-left: 0;
 		}
@@ -377,7 +377,7 @@
 			padding: 0;
 
 			blockquote {
-				margin: $size__spacing-unit 0;
+				margin: $size__vertical-spacing-unit 0;
 				padding: 0;
 				text-align: left;
 				max-width: 100%;
@@ -486,7 +486,7 @@
 
 		&.is-large,
 		&.is-style-large {
-			margin: $size__spacing-unit auto;
+			margin: $size__vertical-spacing-unit auto;
 			padding: 0;
 			border-left: none;
 
@@ -506,7 +506,7 @@
 			}
 
 			@include media(tablet) {
-				margin: $size__spacing-unit auto;
+				margin: $size__vertical-spacing-unit auto;
 				padding: $size__spacing-unit 0;
 
 				p {
@@ -678,8 +678,8 @@
 		background-color: $color__background-hr;
 		border: 0;
 		height: 2px;
-		margin-bottom: (2 * $size__spacing-unit);
-		margin-top: (2 * $size__spacing-unit);
+		margin-bottom: $size__vertical-spacing-unit;
+		margin-top: $size__vertical-spacing-unit;
 		max-width: 5em;
 		text-align: left;
 
@@ -737,7 +737,7 @@
 			padding: ($size__spacing-unit * .75) $size__spacing-unit;
 			color: $color__background-body;
 			margin-left: 0;
-			margin-top: calc(0.75 * #{$size__spacing-unit});
+			margin-top: calc(0.75 * #{$size__vertical-spacing-unit});
 
 			@include media(desktop) {
 				font-size: $font__size-base;
@@ -774,7 +774,7 @@
 		background: $color__background-screen;
 
 		& + .wp-block-media-text {
-			margin-top: -32px;
+			margin-top: -$size__vertical-spacing-unit;
 		}
 
 		&.has-media-on-the-right.is-stacked-on-mobile {
@@ -821,7 +821,7 @@
 			}
 
 			&.alignfull + .wp-block-media-text {
-				margin-top: -44px;
+				margin-top: -$size__vertical-spacing-unit;
 			}
 		}
 

sophisticated-business/sass/site/primary/_posts-and-pages.scss

@@ -231,7 +231,7 @@
 		// Overwrite iframe embeds that have inline styles.
 		> iframe[style] {
 
-			margin: 32px 0 !important;
+			margin: $size__vertical-spacing-unit 0 !important;
 			max-width: 100% !important;
 
 			@include media(tablet) {

sophisticated-business/sass/variables-site/_structure.scss

@@ -1,6 +1,7 @@
 // Responsive widths.
 
 $size__spacing-unit: 1rem;
+$size__vertical-spacing-unit: 32px;
 $size__site-main: 100%;
 $size__site-sidebar: 25%;
 $size__site-margins: calc(10% + 60px);

sophisticated-business/style-editor.scss

@@ -610,7 +610,7 @@ figcaption,
 	}
 
 	& + [data-type="core/media-text"] {
-		margin-top: -32px;
+		margin-top: -$size__vertical-spacing-unit;
 	}
 
 	@include media(desktop) {

sophisticated-business/style-rtl.css

@@ -3350,8 +3350,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     right: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3456,8 +3456,8 @@ body.page .main-navigation {
 .entry .entry-content > h4,
 .entry .entry-content > h5,
 .entry .entry-content > h6 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: 32px;
+  margin-bottom: 32px;
   text-align: center;
 }
 
@@ -3625,7 +3625,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #333333;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3669,8 +3669,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #fff;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-left: 0;
   padding-right: 0;
 }
@@ -3712,7 +3712,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: right;
   max-width: 100%;
@@ -3812,7 +3812,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-right: none;
 }
@@ -3835,7 +3835,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -4050,8 +4050,8 @@ body.page .main-navigation {
   background-color: #595959;
   border: 0;
   height: 2px;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
   max-width: 5em;
   text-align: right;
 }
@@ -4133,7 +4133,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #080808;
   margin-right: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {
@@ -4211,7 +4211,7 @@ body.page .main-navigation {
     margin-right: 7.5%;
   }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
-    margin-top: -44px;
+    margin-top: -32px;
   }
 }
 

sophisticated-business/style.css

@@ -3356,8 +3356,8 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
   .entry .entry-summary > *.alignfull {
-    margin-top: calc(2 * 1rem);
-    margin-bottom: calc(2 * 1rem);
+    margin-top: 32px;
+    margin-bottom: 32px;
     left: calc( -12.5% - 75px);
     width: calc( 125% + 150px);
     max-width: calc( 125% + 150px);
@@ -3468,8 +3468,8 @@ body.page .main-navigation {
 .entry .entry-content > h4,
 .entry .entry-content > h5,
 .entry .entry-content > h6 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: 32px;
+  margin-bottom: 32px;
   text-align: center;
 }
 
@@ -3637,7 +3637,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-latest-posts.is-grid li {
   border-top: 2px solid #333333;
   padding-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 
 .entry .entry-content .wp-block-latest-posts.is-grid li a:after {
@@ -3681,8 +3681,8 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-pullquote blockquote {
   color: #fff;
   border: none;
-  margin-top: calc(4 * 1rem);
-  margin-bottom: calc(4.33 * 1rem);
+  margin-top: calc(3 * 32px);
+  margin-bottom: calc(3.33 * 32px);
   margin-right: 0;
   padding-left: 0;
 }
@@ -3724,7 +3724,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
-  margin: 1rem 0;
+  margin: 32px 0;
   padding: 0;
   text-align: left;
   max-width: 100%;
@@ -3824,7 +3824,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-  margin: 1rem auto;
+  margin: 32px auto;
   padding: 0;
   border-left: none;
 }
@@ -3847,7 +3847,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large {
-    margin: 1rem auto;
+    margin: 32px auto;
     padding: 1rem 0;
   }
   .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p {
@@ -4062,8 +4062,8 @@ body.page .main-navigation {
   background-color: #595959;
   border: 0;
   height: 2px;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+  margin-bottom: 32px;
+  margin-top: 32px;
   max-width: 5em;
   text-align: left;
 }
@@ -4145,7 +4145,7 @@ body.page .main-navigation {
   padding: 0.75rem 1rem;
   color: #080808;
   margin-left: 0;
-  margin-top: calc(0.75 * 1rem);
+  margin-top: calc(0.75 * 32px);
 }
 
 @media only screen and (min-width: 1168px) {
@@ -4223,7 +4223,7 @@ body.page .main-navigation {
     margin-left: 7.5%;
   }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
-    margin-top: -44px;
+    margin-top: -32px;
   }
 }