Varia: Add Blog Posts support and code style cleanup

varia/sass/blocks/blog-posts/_editor.scss

@@ -1,19 +1,81 @@
 .wp-block-a8c-blog-posts {
+	&.image-aligntop {
+		.post-thumbnail {
+			margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
+
+	&.image-alignleft {
+		.post-thumbnail {
+			margin-right: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
+
+	&.image-alignright {
+		.post-thumbnail {
+			margin-left: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
+
+	&.image-alignbehind .post-has-image {
+		 .entry-wrapper {
+			padding: #{map-deep-get($config-global, "spacing", "vertical")};;
+		}
+
+		a:hover {
+			color: currentColor;
+		}
+	}
+
+	.article-section-title {
+		font-size: (strip-unit(map-deep-get($config-global, "font", "size", "base")) + 0em);
+		margin-top: 0;
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+	}
+
 	article {
-		margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+		margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+
+		@include media(mobile) {
+			margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
+
+	.post-thumbnail {
+		img {
+			vertical-align: middle;
+			width: auto;
+		}
 	}
 
-	.post-thumbnail img {
-		width: auto;
+	.entry-wrapper > * {
+		/* Vertical margins logic between post details */
+		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+		margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
 	}
 
 	.entry-title {
 		a {
 			color: #{map-deep-get($config-global, "color", "primary", "default")};
-			text-decoration: underline;
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+
 
 			&:hover {
 				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+				text-decoration: underline;
 			}
 
 			.has-background:not(.has-background-background-color) &,
@@ -24,11 +86,34 @@
 		}
 	}
 
+	.more-link {
+		display: block;
+		color: inherit;
+		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+
+		&:after {
+			content: "\02192";
+			display: inline-block;
+			margin-left: 0.5em;
+		}
+
+		&:hover,
+		&:active {
+			color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			text-decoration: none;
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+		}
+	}
+
 	.entry-meta,
-	.entry-footer,
 	.cat-links {
 		color: #{map-deep-get($config-global, "color", "foreground", "light")};
-		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+		font-size: (strip-unit(map-deep-get($config-global, "font", "size", "sm")) + 0em);
 
 		.has-background:not(.has-background-background-color) &,
 		[class*="background-color"]:not(.has-background-background-color) &,
@@ -36,18 +121,48 @@
 			color: currentColor;
 		}
 
-		> * {
-			display: inline-block;
+		.byline:not(:last-child) {
 			margin-right: #{map-deep-get($config-global, "spacing", "unit")};
-			vertical-align: middle;
-
-			&:last-child {
-				margin-right: 0;
-			}
 		}
 
 		.published + .updated {
 			display: none;
 		}
+
+		a {
+			color: currentColor;
+			text-decoration: underline;
+
+			&:hover,
+			&:active {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+				text-decoration: none;
+
+				.has-background:not(.has-background-background-color) &,
+				[class*="background-color"]:not(.has-background-background-color) &,
+				[style*="background-color"] & {
+					color: currentColor;
+				}
+			}
+		}
+	}
+
+	& + .button {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "md")) + 0em);
+
+		&:hover {
+			cursor: default;
+		}
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] & {
+			background-color: transparent;
+			border: 2px solid currentColor;
+			color: currentColor;
+		}
 	}
-}
+}

varia/sass/blocks/blog-posts/_style.scss

@@ -1,107 +1,154 @@
-.wp-block-newspack-blocks-homepage-articles article {
-	display: block;
-
-	/* Vertical margins logic between posts */
-	margin-top: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
-	margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+.wp-block-newspack-blocks-homepage-articles {
+	&.image-aligntop {
+		.post-thumbnail {
+			margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
 
-	&:first-child {
-		margin-top: 0;
+	&.image-alignleft {
+		.post-thumbnail {
+			margin-right: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
 	}
 
-	&:last-child {
-		margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	&.image-alignright {
+		.post-thumbnail {
+			margin-left: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
 	}
 
-	.post-thumbnail img {
-		width: auto;
+	&.image-alignbehind .post-has-image .entry-wrapper {
+		padding: #{map-deep-get($config-global, "spacing", "vertical")};;
 	}
 
-	.entry-title {
-		a {
-			color: #{map-deep-get($config-global, "color", "primary", "default")};
-			text-decoration: underline;
+	&.is-grid article {
+		margin-top: 0;
+		margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 
-			&:hover {
-				color: #{map-deep-get($config-global, "color", "primary", "hover")};
-			}
+		@include media(mobile) {
+			margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
 
-			.has-background:not(.has-background-background-color) &,
-			[class*="background-color"]:not(.has-background-background-color) &,
-			[style*="background-color"] & {
-				color: currentColor;
-			}
+	.article-section-title {
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+
+		& + article {
+			margin-top: 0;
 		}
 	}
 
-	.entry-wrapper > * {
-		/* Vertical margins logic between post details */
-		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
-		margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+	article {
+		display: block;
+
+		/* Vertical margins logic between posts */
+		margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+
+		@include media(mobile) {
+			margin-top: #{3 * map-deep-get($config-global, "spacing", "vertical")};
+			margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
+		}
 
 		&:first-child {
 			margin-top: 0;
 		}
 
 		&:last-child {
-			margin-bottom: 0;
+			margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
 		}
-	}
-
-	.more-link {
-		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
-	}
 
-	.entry-meta,
-	.entry-footer,
-	.cat-links {
-		color: #{map-deep-get($config-global, "color", "foreground", "light")};
-		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
-
-		.has-background:not(.has-background-background-color) &,
-		[class*="background-color"]:not(.has-background-background-color) &,
-		[style*="background-color"] & {
-			color: currentColor;
+		.post-thumbnail img {
+			width: auto;
 		}
 
-		> * {
-			display: inline-block;
-			margin-right: #{map-deep-get($config-global, "spacing", "unit")};
-			vertical-align: middle;
+		.entry-wrapper > * {
+			/* Vertical margins logic between post details */
+			margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+
+			&:first-child {
+				margin-top: 0;
+			}
 
 			&:last-child {
-				margin-right: 0;
+				margin-bottom: 0;
 			}
 		}
 
-		.published + .updated {
-			display: none;
+		.entry-title {
+			a {
+				color: #{map-deep-get($config-global, "color", "primary", "default")};
+
+				.has-background:not(.has-background-background-color) &,
+				[class*="background-color"]:not(.has-background-background-color) &,
+				[style*="background-color"] & {
+					color: currentColor;
+				}
+
+				&:hover {
+					color: #{map-deep-get($config-global, "color", "primary", "hover")};
+					text-decoration: underline;
+
+					.has-background:not(.has-background-background-color) &,
+					[class*="background-color"]:not(.has-background-background-color) &,
+					[style*="background-color"] & {
+						color: currentColor;
+					}
+				}
+			}
 		}
 
-		a {
-			color: currentColor;
-
-			&:hover,
-			&:active {
-				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+		.more-link {
+			@include media(mobile) {
+				margin-top: #{map-deep-get($config-global, "spacing", "unit")};
 			}
 		}
 
-		.svg-icon {
-			fill: currentColor;
-			position: relative;
-			display: inline-block;
-			vertical-align: middle;
-			margin-right: calc(0.25 * #{map-deep-get($config-global, "spacing", "unit")});
+		.entry-meta,
+		.cat-links {
+			color: #{map-deep-get($config-global, "color", "foreground", "light")};
+			font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+
+			> span > * {
+				vertical-align: top;
+			}
+
+			.byline:not(:last-child) {
+				margin-right: #{map-deep-get($config-global, "spacing", "unit")};
+			}
+
+			.published + .updated {
+				display: none;
+			}
+
+			a {
+				color: currentColor;
+				text-decoration: underline;
+
+				&:hover,
+				&:active {
+					color: #{map-deep-get($config-global, "color", "primary", "hover")};
+					text-decoration: none;
+
+					.has-background:not(.has-background-background-color) &,
+					[class*="background-color"]:not(.has-background-background-color) &,
+					[style*="background-color"] & {
+						color: currentColor;
+					}
+				}
+			}
 		}
 	}
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
-}
-
 button[data-load-more-btn] {
 	// Extend button style
 	@extend %button-style;
@@ -114,4 +161,4 @@ button[data-load-more-btn] {
 		border: 2px solid currentColor;
 		color: currentColor;
 	}
-}
+}

varia/style-editor.css

@@ -125,7 +125,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-.fse-template-part .main-navigation .button {
+.wp-block-a8c-blog-posts + .button, .fse-template-part .main-navigation .button {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -139,22 +139,22 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 	padding: 16px 16px;
 }
 
-.fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .button:after {
+.wp-block-a8c-blog-posts + .button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, .fse-template-part .main-navigation .button:after {
 	content: '';
 	display: block;
 	height: 0;
 	width: 0;
 }
 
-.fse-template-part .main-navigation .button:before {
+.wp-block-a8c-blog-posts + .button:before, .fse-template-part .main-navigation .button:before {
 	margin-bottom: -0.12em;
 }
 
-.fse-template-part .main-navigation .button:after {
+.wp-block-a8c-blog-posts + .button:after, .fse-template-part .main-navigation .button:after {
 	margin-top: -0.11em;
 }
 
-.fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .has-focus.button {
+.wp-block-a8c-blog-posts + .button:hover, .fse-template-part .main-navigation .button:hover, .wp-block-a8c-blog-posts + .button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .fse-template-part .main-navigation .has-focus.button {
 	color: white;
 	background-color: indigo;
 }
@@ -300,21 +300,74 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts.image-aligntop .post-thumbnail {
+	margin-bottom: 16px;
+}
+
+.wp-block-a8c-blog-posts.image-alignleft .post-thumbnail {
+	margin-right: 32px;
+}
+
+.wp-block-a8c-blog-posts.image-alignright .post-thumbnail {
+	margin-left: 32px;
+}
+
+.wp-block-a8c-blog-posts.image-alignbehind .post-has-image .entry-wrapper {
+	padding: 32px;
+}
+
+.wp-block-a8c-blog-posts.image-alignbehind .post-has-image a:hover {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .article-section-title {
+	font-size: 1em;
+	margin-top: 0;
+	margin-bottom: 16px;
+}
+
 .wp-block-a8c-blog-posts article {
-	margin-bottom: calc(3 * 32px);
+	margin-bottom: 64px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-a8c-blog-posts article {
+		margin-bottom: 96px;
+	}
 }
 
 .wp-block-a8c-blog-posts .post-thumbnail img {
+	vertical-align: middle;
 	width: auto;
 }
 
+.wp-block-a8c-blog-posts .entry-wrapper > * {
+	/* Vertical margins logic between post details */
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
+.wp-block-a8c-blog-posts .entry-wrapper > *:first-child {
+	margin-top: 0;
+}
+
+.wp-block-a8c-blog-posts .entry-wrapper > *:last-child {
+	margin-bottom: 0;
+}
+
 .wp-block-a8c-blog-posts .entry-title a {
 	color: blue;
-	text-decoration: underline;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
 }
 
 .wp-block-a8c-blog-posts .entry-title a:hover {
 	color: indigo;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -323,21 +376,40 @@ object {
 	color: currentColor;
 }
 
+.wp-block-a8c-blog-posts .more-link {
+	display: block;
+	color: inherit;
+	margin-top: 16px;
+}
+
+.wp-block-a8c-blog-posts .more-link:after {
+	content: "\02192";
+	display: inline-block;
+	margin-left: 0.5em;
+}
+
+.wp-block-a8c-blog-posts .more-link:hover, .wp-block-a8c-blog-posts .more-link:active {
+	color: indigo;
+	text-decoration: none;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:hover,
+[style*="background-color"] .wp-block-a8c-blog-posts .more-link:hover, .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:active,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:active,
+[style*="background-color"] .wp-block-a8c-blog-posts .more-link:active {
+	color: currentColor;
+}
+
 .wp-block-a8c-blog-posts .entry-meta,
-.wp-block-a8c-blog-posts .entry-footer,
 .wp-block-a8c-blog-posts .cat-links {
 	color: #767676;
-	font-size: 0.83333rem;
+	font-size: 0.83333em;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
 [class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
 [style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
-.wp-block-a8c-blog-posts .entry-footer,
-[class*="background-color"]:not(.has-background-background-color)
-.wp-block-a8c-blog-posts .entry-footer,
-[style*="background-color"]
-.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
 .wp-block-a8c-blog-posts .cat-links,
 [class*="background-color"]:not(.has-background-background-color)
 .wp-block-a8c-blog-posts .cat-links,
@@ -346,26 +418,64 @@ object {
 	color: currentColor;
 }
 
-.wp-block-a8c-blog-posts .entry-meta > *,
-.wp-block-a8c-blog-posts .entry-footer > *,
-.wp-block-a8c-blog-posts .cat-links > * {
-	display: inline-block;
+.wp-block-a8c-blog-posts .entry-meta .byline:not(:last-child),
+.wp-block-a8c-blog-posts .cat-links .byline:not(:last-child) {
 	margin-right: 16px;
-	vertical-align: middle;
-}
-
-.wp-block-a8c-blog-posts .entry-meta > *:last-child,
-.wp-block-a8c-blog-posts .entry-footer > *:last-child,
-.wp-block-a8c-blog-posts .cat-links > *:last-child {
-	margin-right: 0;
 }
 
 .wp-block-a8c-blog-posts .entry-meta .published + .updated,
-.wp-block-a8c-blog-posts .entry-footer .published + .updated,
 .wp-block-a8c-blog-posts .cat-links .published + .updated {
 	display: none;
 }
 
+.wp-block-a8c-blog-posts .entry-meta a,
+.wp-block-a8c-blog-posts .cat-links a {
+	color: currentColor;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-meta a:hover, .wp-block-a8c-blog-posts .entry-meta a:active,
+.wp-block-a8c-blog-posts .cat-links a:hover,
+.wp-block-a8c-blog-posts .cat-links a:active {
+	color: indigo;
+	text-decoration: none;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:hover,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta a:hover, .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:active,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:active,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta a:active, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:hover,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:hover,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links a:hover, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:active,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:active,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links a:active {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.2em;
+}
+
+.wp-block-a8c-blog-posts + .button:hover {
+	cursor: default;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts + .button,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts + .button,
+[style*="background-color"] .wp-block-a8c-blog-posts + .button {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

varia/style-rtl.css

@@ -1189,11 +1189,54 @@ object {
 	min-width: 300px;
 }
 
+.wp-block-newspack-blocks-homepage-articles.image-aligntop .post-thumbnail {
+	margin-bottom: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.image-alignleft .post-thumbnail {
+	margin-left: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.image-alignright .post-thumbnail {
+	margin-right: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.image-alignbehind .post-has-image .entry-wrapper {
+	padding: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: 64px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles.is-grid article {
+		margin-bottom: 96px;
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles .article-section-title {
+	font-size: 1rem;
+	margin-bottom: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles .article-section-title + article {
+	margin-top: 0;
+}
+
 .wp-block-newspack-blocks-homepage-articles article {
 	display: block;
 	/* Vertical margins logic between posts */
-	margin-top: calc(3 * 32px);
-	margin-bottom: calc(3 * 32px);
+	margin-top: 64px;
+	margin-bottom: 64px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article {
+		margin-top: 96px;
+		margin-bottom: 96px;
+	}
 }
 
 .wp-block-newspack-blocks-homepage-articles article:first-child {
@@ -1201,28 +1244,13 @@ object {
 }
 
 .wp-block-newspack-blocks-homepage-articles article:last-child {
-	margin-bottom: calc(3 * 32px);
+	margin-bottom: 96px;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .post-thumbnail img {
 	width: auto;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	color: blue;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: indigo;
-}
-
-.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
-[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
-[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	color: currentColor;
-}
-
 .wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * {
 	/* Vertical margins logic between post details */
 	margin-top: 16px;
@@ -1237,12 +1265,34 @@ object {
 	margin-bottom: 0;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .more-link {
-	margin-top: 16px;
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: blue;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: indigo;
+	text-decoration: underline;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: currentColor;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article .more-link {
+		margin-top: 16px;
+	}
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer,
 .wp-block-newspack-blocks-homepage-articles article .cat-links {
 	color: #767676;
 	font-size: 0.83333rem;
@@ -1251,11 +1301,6 @@ object {
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
 [class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
 [style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
-.wp-block-newspack-blocks-homepage-articles article .entry-footer,
-[class*="background-color"]:not(.has-background-background-color)
-.wp-block-newspack-blocks-homepage-articles article .entry-footer,
-[style*="background-color"]
-.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
 .wp-block-newspack-blocks-homepage-articles article .cat-links,
 [class*="background-color"]:not(.has-background-background-color)
 .wp-block-newspack-blocks-homepage-articles article .cat-links,
@@ -1264,59 +1309,50 @@ object {
 	color: currentColor;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta > span,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer > span,
-.wp-block-newspack-blocks-homepage-articles article .cat-links > span {
-	display: inline-block;
-	margin-left: 16px;
-}
-
 .wp-block-newspack-blocks-homepage-articles article .entry-meta > span > *,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer > span > *,
 .wp-block-newspack-blocks-homepage-articles article .cat-links > span > * {
-	display: inline-block;
-	vertical-align: middle;
+	vertical-align: top;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta > span:last-child,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer > span:last-child,
-.wp-block-newspack-blocks-homepage-articles article .cat-links > span:last-child {
-	margin-left: 0;
+.wp-block-newspack-blocks-homepage-articles article .entry-meta .byline:not(:last-child),
+.wp-block-newspack-blocks-homepage-articles article .cat-links .byline:not(:last-child) {
+	margin-left: 16px;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta > span .published + .updated,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer > span .published + .updated,
-.wp-block-newspack-blocks-homepage-articles article .cat-links > span .published + .updated {
+.wp-block-newspack-blocks-homepage-articles article .entry-meta .published + .updated,
+.wp-block-newspack-blocks-homepage-articles article .cat-links .published + .updated {
 	display: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer a,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a {
 	color: currentColor;
+	text-decoration: underline;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer a:hover,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer a:active,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
 	color: indigo;
+	text-decoration: none;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta .svg-icon,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer .svg-icon,
-.wp-block-newspack-blocks-homepage-articles article .cat-links .svg-icon {
-	fill: currentColor;
-	position: relative;
-	display: inline-block;
-	vertical-align: middle;
-	margin-left: calc(0.25 * 16px);
-}
-
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
+	color: currentColor;
 }
 
 button[data-load-more-btn] {

varia/style.css

@@ -1189,11 +1189,54 @@ object {
 	min-width: 300px;
 }
 
+.wp-block-newspack-blocks-homepage-articles.image-aligntop .post-thumbnail {
+	margin-bottom: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.image-alignleft .post-thumbnail {
+	margin-right: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.image-alignright .post-thumbnail {
+	margin-left: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.image-alignbehind .post-has-image .entry-wrapper {
+	padding: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: 64px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles.is-grid article {
+		margin-bottom: 96px;
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles .article-section-title {
+	font-size: 1rem;
+	margin-bottom: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles .article-section-title + article {
+	margin-top: 0;
+}
+
 .wp-block-newspack-blocks-homepage-articles article {
 	display: block;
 	/* Vertical margins logic between posts */
-	margin-top: calc(3 * 32px);
-	margin-bottom: calc(3 * 32px);
+	margin-top: 64px;
+	margin-bottom: 64px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article {
+		margin-top: 96px;
+		margin-bottom: 96px;
+	}
 }
 
 .wp-block-newspack-blocks-homepage-articles article:first-child {
@@ -1201,28 +1244,13 @@ object {
 }
 
 .wp-block-newspack-blocks-homepage-articles article:last-child {
-	margin-bottom: calc(3 * 32px);
+	margin-bottom: 96px;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .post-thumbnail img {
 	width: auto;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	color: blue;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: indigo;
-}
-
-.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
-[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
-[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	color: currentColor;
-}
-
 .wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * {
 	/* Vertical margins logic between post details */
 	margin-top: 16px;
@@ -1237,12 +1265,34 @@ object {
 	margin-bottom: 0;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .more-link {
-	margin-top: 16px;
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: blue;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: indigo;
+	text-decoration: underline;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: currentColor;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article .more-link {
+		margin-top: 16px;
+	}
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer,
 .wp-block-newspack-blocks-homepage-articles article .cat-links {
 	color: #767676;
 	font-size: 0.83333rem;
@@ -1251,11 +1301,6 @@ object {
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
 [class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
 [style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
-.wp-block-newspack-blocks-homepage-articles article .entry-footer,
-[class*="background-color"]:not(.has-background-background-color)
-.wp-block-newspack-blocks-homepage-articles article .entry-footer,
-[style*="background-color"]
-.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
 .wp-block-newspack-blocks-homepage-articles article .cat-links,
 [class*="background-color"]:not(.has-background-background-color)
 .wp-block-newspack-blocks-homepage-articles article .cat-links,
@@ -1264,53 +1309,50 @@ object {
 	color: currentColor;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta > *,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer > *,
-.wp-block-newspack-blocks-homepage-articles article .cat-links > * {
-	display: inline-block;
-	margin-right: 16px;
-	vertical-align: middle;
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span > *,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span > * {
+	vertical-align: top;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta > *:last-child,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer > *:last-child,
-.wp-block-newspack-blocks-homepage-articles article .cat-links > *:last-child {
-	margin-right: 0;
+.wp-block-newspack-blocks-homepage-articles article .entry-meta .byline:not(:last-child),
+.wp-block-newspack-blocks-homepage-articles article .cat-links .byline:not(:last-child) {
+	margin-right: 16px;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta .published + .updated,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer .published + .updated,
 .wp-block-newspack-blocks-homepage-articles article .cat-links .published + .updated {
 	display: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer a,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a {
 	color: currentColor;
+	text-decoration: underline;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer a:hover,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer a:active,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
 	color: indigo;
+	text-decoration: none;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta .svg-icon,
-.wp-block-newspack-blocks-homepage-articles article .entry-footer .svg-icon,
-.wp-block-newspack-blocks-homepage-articles article .cat-links .svg-icon {
-	fill: currentColor;
-	position: relative;
-	display: inline-block;
-	vertical-align: middle;
-	margin-right: calc(0.25 * 16px);
-}
-
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
+	color: currentColor;
 }
 
 button[data-load-more-btn] {