Rebuild

alves/style-editor.css

@@ -295,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: 1.25em;
+	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: #3E7D98;
-	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: #2f5f74;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -318,21 +386,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: #2f5f74;
+	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: #4d6974;
-	font-size: 1.04167rem;
+	font-size: 1.04167em;
 }
 
 .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,
@@ -341,26 +428,98 @@ 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: #2f5f74;
+	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 .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: #ffffff;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
+	font-size: 1.04167rem;
+	background-color: #3E7D98;
+	border-radius: 160px;
+	border-width: 0;
+	padding: 16px 48px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: #ffffff;
+	background-color: #2f5f74;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.5em;
+}
+
+.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 */

alves/style-rtl.css

@@ -1149,11 +1149,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: 1.25rem;
+	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 {
@@ -1161,28 +1204,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: #3E7D98;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #2f5f74;
-}
-
-.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;
@@ -1197,12 +1225,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: #3E7D98;
+}
+
+.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: #2f5f74;
+	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: #4d6974;
 	font-size: 1.04167rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #2f5f74;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #ffffff;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
+	font-size: 1.04167rem;
+	background-color: #3E7D98;
+	border-radius: 160px;
+	border-width: 0;
+	padding: 16px 48px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #ffffff;
+	background-color: #2f5f74;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

alves/style.css

@@ -1149,11 +1149,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: 1.25rem;
+	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 {
@@ -1161,28 +1204,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: #3E7D98;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #2f5f74;
-}
-
-.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;
@@ -1197,12 +1225,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: #3E7D98;
+}
+
+.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: #2f5f74;
+	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: #4d6974;
 	font-size: 1.04167rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #2f5f74;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #ffffff;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
+	font-size: 1.04167rem;
+	background-color: #3E7D98;
+	border-radius: 160px;
+	border-width: 0;
+	padding: 16px 48px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #ffffff;
+	background-color: #2f5f74;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

balasana/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #19744C;
-	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: #145f3e;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #145f3e;
+	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: #505050;
-	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,
@@ -340,26 +428,98 @@ 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: #145f3e;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #19744C;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: white;
+	background-color: #145f3e;
+}
+
+.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 */

balasana/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #19744C;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #145f3e;
-}
-
-.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;
@@ -1197,12 +1225,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: #19744C;
+}
+
+.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: #145f3e;
+	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: #505050;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #145f3e;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #19744C;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #145f3e;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

balasana/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #19744C;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #145f3e;
-}
-
-.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;
@@ -1197,12 +1225,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: #19744C;
+}
+
+.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: #145f3e;
+	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: #505050;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #145f3e;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #19744C;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #145f3e;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

barnsbury/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #20603C;
-	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: #133a24;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #133a24;
+	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: #844d4d;
-	font-size: 0.84746rem;
+	font-size: 0.84746em;
 }
 
 .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,
@@ -340,26 +428,98 @@ 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: #133a24;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: #FFFDF6;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
+	font-size: 1rem;
+	background-color: #20603C;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 18px 18px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: ("default": #FFFDF6, "light": #FDF9EC, "dark": #DDDDDD);
+	background-color: #133a24;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.18em;
+}
+
+.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 */

barnsbury/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #20603C;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #133a24;
-}
-
-.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;
@@ -1197,12 +1225,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: #20603C;
+}
+
+.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: #133a24;
+	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: #844d4d;
 	font-size: 0.84746rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #133a24;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #FFFDF6;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
+	font-size: 1rem;
+	background-color: #20603C;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 18px 18px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: ("default": #FFFDF6, "light": #FDF9EC, "dark": #DDDDDD);
+	background-color: #133a24;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

barnsbury/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #20603C;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #133a24;
-}
-
-.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;
@@ -1197,12 +1225,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: #20603C;
+}
+
+.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: #133a24;
+	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: #844d4d;
 	font-size: 0.84746rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #133a24;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #FFFDF6;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
+	font-size: 1rem;
+	background-color: #20603C;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 18px 18px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: ("default": #FFFDF6, "light": #FDF9EC, "dark": #DDDDDD);
+	background-color: #133a24;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

brompton/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #C04239;
-	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: #252E36;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #252E36;
+	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: #666666;
-	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,
@@ -340,26 +428,98 @@ 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: #252E36;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: #E8E4DD;
+	cursor: pointer;
+	font-weight: 900;
+	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #252E36;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: #E8E4DD;
+	background-color: #C04239;
+}
+
+.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 */

brompton/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #C04239;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #252E36;
-}
-
-.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;
@@ -1197,12 +1225,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: #C04239;
+}
+
+.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: #252E36;
+	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: #666666;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #252E36;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #E8E4DD;
+	cursor: pointer;
+	font-weight: 900;
+	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #252E36;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #E8E4DD;
+	background-color: #C04239;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

brompton/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #C04239;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #252E36;
-}
-
-.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;
@@ -1197,12 +1225,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: #C04239;
+}
+
+.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: #252E36;
+	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: #666666;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #252E36;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #E8E4DD;
+	cursor: pointer;
+	font-weight: 900;
+	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #252E36;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #E8E4DD;
+	background-color: #C04239;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

coutoire/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: black;
-	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: #FF7A5C;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #FF7A5C;
+	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,
@@ -340,26 +428,97 @@ 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: #FF7A5C;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: black;
+	border-width: 0;
+	padding: 11.6px 11.6px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: white;
+	background-color: #FF7A5C;
+}
+
+.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 */

coutoire/style-rtl.css

@@ -1148,11 +1148,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 {
@@ -1160,28 +1203,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: black;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #FF7A5C;
-}
-
-.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;
@@ -1196,12 +1224,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: black;
+}
+
+.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: #FF7A5C;
+	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;
@@ -1210,11 +1260,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,
@@ -1223,55 +1268,129 @@ 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-left: 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-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 .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: #FF7A5C;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: black;
+	border-width: 0;
+	padding: 11.6px 11.6px;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #FF7A5C;
 }
 
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

coutoire/style.css

@@ -1148,11 +1148,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 {
@@ -1160,28 +1203,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: black;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #FF7A5C;
-}
-
-.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;
@@ -1196,12 +1224,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: black;
+}
+
+.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: #FF7A5C;
+	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;
@@ -1210,11 +1260,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,
@@ -1223,55 +1268,129 @@ 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: #FF7A5C;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: black;
+	border-width: 0;
+	padding: 11.6px 11.6px;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #FF7A5C;
 }
 
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

dalston/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #0073AA;
-	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: #005177;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #005177;
+	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.86957rem;
+	font-size: 0.86957em;
 }
 
 .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,
@@ -340,26 +428,98 @@ 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: #005177;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: #FFFFFF;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+	font-size: 1rem;
+	background-color: #0073AA;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: #FFFFFF;
+	background-color: #005177;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.15em;
+}
+
+.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 */

dalston/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #0073AA;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #005177;
-}
-
-.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;
@@ -1197,12 +1225,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: #0073AA;
+}
+
+.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: #005177;
+	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.86957rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #005177;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #FFFFFF;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+	font-size: 1rem;
+	background-color: #0073AA;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #FFFFFF;
+	background-color: #005177;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

dalston/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #0073AA;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #005177;
-}
-
-.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;
@@ -1197,12 +1225,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: #0073AA;
+}
+
+.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: #005177;
+	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.86957rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #005177;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: #FFFFFF;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+	font-size: 1rem;
+	background-color: #0073AA;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #FFFFFF;
+	background-color: #005177;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

exford/style-editor.css

@@ -295,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #23883D;
-	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: #195f2b;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -318,21 +386,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: #195f2b;
+	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: #6E6E6E;
-	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,
@@ -341,26 +428,98 @@ 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: #195f2b;
+	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 .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #23883D;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: white;
+	background-color: #195f2b;
+}
+
+.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 */

exford/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #23883D;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #195f2b;
-}
-
-.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;
@@ -1197,12 +1225,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: #23883D;
+}
+
+.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: #195f2b;
+	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: #6E6E6E;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #195f2b;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #23883D;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #195f2b;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

exford/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #23883D;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #195f2b;
-}
-
-.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;
@@ -1197,12 +1225,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: #23883D;
+}
+
+.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: #195f2b;
+	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: #6E6E6E;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #195f2b;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #23883D;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #195f2b;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

hever/style-editor.css

@@ -295,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #1279BE;
-	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: #303030;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -318,21 +386,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: #303030;
+	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: #757575;
-	font-size: 0.86957rem;
+	font-size: 0.86957em;
 }
 
 .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,
@@ -341,26 +428,98 @@ 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: #303030;
+	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 .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #1279BE;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 24px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: white;
+	background-color: #303030;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.15em;
+}
+
+.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 */

hever/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #1279BE;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #303030;
-}
-
-.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;
@@ -1197,12 +1225,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: #1279BE;
+}
+
+.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: #303030;
+	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: #757575;
 	font-size: 0.86957rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #303030;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #1279BE;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #303030;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

hever/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #1279BE;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #303030;
-}
-
-.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;
@@ -1197,12 +1225,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: #1279BE;
+}
+
+.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: #303030;
+	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: #757575;
 	font-size: 0.86957rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #303030;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #1279BE;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #303030;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

leven/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #ff302c;
-	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: #1285ce;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #1285ce;
+	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.82474rem;
+	font-size: 0.82474em;
 }
 
 .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,
@@ -340,26 +428,98 @@ 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: #1285ce;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1.2125rem;
+	background-color: #ff302c;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: white;
+	background-color: #1285ce;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.2125em;
+}
+
+.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 */

leven/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #ff302c;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #1285ce;
-}
-
-.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;
@@ -1197,12 +1225,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: #ff302c;
+}
+
+.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: #1285ce;
+	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.82474rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #1285ce;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1.2125rem;
+	background-color: #ff302c;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #1285ce;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

leven/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #ff302c;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #1285ce;
-}
-
-.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;
@@ -1197,12 +1225,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: #ff302c;
+}
+
+.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: #1285ce;
+	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.82474rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #1285ce;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1.2125rem;
+	background-color: #ff302c;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #1285ce;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

mayland/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: black;
-	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: #666666;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #666666;
+	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: #666666;
-	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,
@@ -340,26 +428,98 @@ 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: #666666;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: black;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: white;
+	background-color: #666666;
+}
+
+.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 */

mayland/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: black;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #666666;
-}
-
-.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;
@@ -1197,12 +1225,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: black;
+}
+
+.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: #666666;
+	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: #666666;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #666666;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: black;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #666666;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

mayland/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: black;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #666666;
-}
-
-.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;
@@ -1197,12 +1225,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: black;
+}
+
+.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: #666666;
+	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: #666666;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #666666;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: black;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #666666;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

maywood/style-editor.css

@@ -295,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #897248;
-	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: #685636;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -318,21 +386,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: #685636;
+	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: #686868;
-	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,
@@ -341,26 +428,98 @@ 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: #685636;
+	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 .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #897248;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: white;
+	background-color: #685636;
+}
+
+.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 */

maywood/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #897248;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #685636;
-}
-
-.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;
@@ -1197,12 +1225,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: #897248;
+}
+
+.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: #685636;
+	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: #686868;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #685636;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #897248;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #685636;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

maywood/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #897248;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #685636;
-}
-
-.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;
@@ -1197,12 +1225,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: #897248;
+}
+
+.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: #685636;
+	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: #686868;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #685636;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #897248;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #685636;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

morden/style-editor.css

@@ -295,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #CD2220;
-	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: #303030;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -318,21 +386,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: #303030;
+	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: #757575;
-	font-size: 0.86957rem;
+	font-size: 0.86957em;
 }
 
 .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,
@@ -341,26 +428,98 @@ 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: #303030;
+	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 .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CD2220;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 24px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: white;
+	background-color: #303030;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.15em;
+}
+
+.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 */

morden/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #CD2220;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #303030;
-}
-
-.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;
@@ -1197,12 +1225,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: #CD2220;
+}
+
+.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: #303030;
+	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: #757575;
 	font-size: 0.86957rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #303030;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CD2220;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #303030;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

morden/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #CD2220;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #303030;
-}
-
-.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;
@@ -1197,12 +1225,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: #CD2220;
+}
+
+.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: #303030;
+	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: #757575;
 	font-size: 0.86957rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #303030;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CD2220;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #303030;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

redhill/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -306,21 +307,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #CA2017;
-	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: #222222;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -329,21 +398,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: #222222;
+	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: #666666;
-	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,
@@ -352,26 +440,98 @@ 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: #222222;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CA2017;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 24px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: white;
+	background-color: #222222;
+}
+
+.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 */

redhill/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #CA2017;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #222222;
-}
-
-.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;
@@ -1197,12 +1225,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: #CA2017;
+}
+
+.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: #222222;
+	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: #666666;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #222222;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CA2017;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #222222;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

redhill/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #CA2017;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #222222;
-}
-
-.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;
@@ -1197,12 +1225,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: #CA2017;
+}
+
+.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: #222222;
+	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: #666666;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #222222;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CA2017;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #222222;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

rivington/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #CAAB57;
-	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: #b59439;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #b59439;
+	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: white;
-	font-size: 0.8rem;
+	font-size: 0.8em;
 }
 
 .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,
@@ -340,26 +428,98 @@ 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: #b59439;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1.15;
+	color: #060f29;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CAAB57;
+	border-radius: 3px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.195em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.185em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: #060f29;
+	background-color: #b59439;
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: 1.25em;
+}
+
+.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 */

rivington/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #CAAB57;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #b59439;
-}
-
-.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;
@@ -1197,12 +1225,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: #CAAB57;
+}
+
+.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: #b59439;
+	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: white;
 	font-size: 0.8rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #b59439;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1.15;
+	color: #060f29;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CAAB57;
+	border-radius: 3px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.195em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.185em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #060f29;
+	background-color: #b59439;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

rivington/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #CAAB57;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #b59439;
-}
-
-.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;
@@ -1197,12 +1225,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: #CAAB57;
+}
+
+.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: #b59439;
+	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: white;
 	font-size: 0.8rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #b59439;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1.15;
+	color: #060f29;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 1rem;
+	background-color: #CAAB57;
+	border-radius: 3px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.195em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.185em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: #060f29;
+	background-color: #b59439;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

rockfield/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #222222;
-	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: #444444;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #444444;
+	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: #757575;
-	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,
@@ -340,26 +428,98 @@ 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: #444444;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #222222;
+	border-radius: 0;
+	border-width: 0;
+	padding: 16px 20px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: white;
+	background-color: #444444;
+}
+
+.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 */

rockfield/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #222222;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #444444;
-}
-
-.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;
@@ -1197,12 +1225,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: #222222;
+}
+
+.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: #444444;
+	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: #757575;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #444444;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #222222;
+	border-radius: 0;
+	border-width: 0;
+	padding: 16px 20px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #444444;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

rockfield/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #222222;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #444444;
-}
-
-.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;
@@ -1197,12 +1225,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: #222222;
+}
+
+.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: #444444;
+	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: #757575;
 	font-size: 0.83333rem;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #444444;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #222222;
+	border-radius: 0;
+	border-width: 0;
+	padding: 16px 20px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #444444;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

shawburn/style-editor.css

@@ -295,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #0C80A1;
-	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: #085a72;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -318,21 +386,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: #085a72;
+	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,
@@ -341,26 +428,98 @@ 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: #085a72;
+	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 .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "PT Sans", Arial, sans-serif;
+	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
+	font-size: 0.83333rem;
+	background-color: #0C80A1;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 24px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: white;
+	background-color: #085a72;
+}
+
+.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 */

shawburn/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #0C80A1;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #085a72;
-}
-
-.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;
@@ -1197,12 +1225,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: #0C80A1;
+}
+
+.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: #085a72;
+	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;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #085a72;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "PT Sans", Arial, sans-serif;
+	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
+	font-size: 0.83333rem;
+	background-color: #0C80A1;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #085a72;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

shawburn/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #0C80A1;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #085a72;
-}
-
-.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;
@@ -1197,12 +1225,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: #0C80A1;
+}
+
+.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: #085a72;
+	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;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #085a72;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "PT Sans", Arial, sans-serif;
+	font-family: var(--font-base, "PT Sans", Arial, sans-serif);
+	font-size: 0.83333rem;
+	background-color: #0C80A1;
+	border-radius: 4px;
+	border-width: 0;
+	padding: 16px 24px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #085a72;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

stow/style-editor.css

@@ -295,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #404040;
-	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: #f25f70;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -318,21 +386,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: #f25f70;
+	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,
@@ -341,26 +428,98 @@ 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: #f25f70;
+	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 .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.69444rem;
+	background-color: #f25f70;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: white;
+	background-color: #4f4f4f;
+}
+
+.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 */

stow/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #404040;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #f25f70;
-}
-
-.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;
@@ -1197,12 +1225,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: #404040;
+}
+
+.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: #f25f70;
+	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;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #f25f70;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.69444rem;
+	background-color: #f25f70;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #4f4f4f;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

stow/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #404040;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #f25f70;
-}
-
-.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;
@@ -1197,12 +1225,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: #404040;
+}
+
+.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: #f25f70;
+	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;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #f25f70;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.69444rem;
+	background-color: #f25f70;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #4f4f4f;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

stratford/style-editor.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * These styles should be loaded by the Block Editor only
  */
@@ -294,21 +295,89 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
+.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: #2c313f;
-	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: #3e69dc;
+	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@@ -317,21 +386,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: #3e69dc;
+	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,
@@ -340,26 +428,98 @@ 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: #3e69dc;
+	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 .wp-block-a8c-blog-posts + .button {
+	line-height: 1.44;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #3e69dc;
+	border-radius: 10px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -0.34em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -0.33em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button {
+	color: white;
+	background-color: #2c313f;
+}
+
+.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 */

stratford/style-rtl.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #2c313f;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #3e69dc;
-}
-
-.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;
@@ -1197,12 +1225,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: #2c313f;
+}
+
+.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: #3e69dc;
+	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;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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-left: 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-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 .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: #3e69dc;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1.44;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #3e69dc;
+	border-radius: 10px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.34em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.33em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #2c313f;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

stratford/style.css

@@ -1149,11 +1149,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 {
@@ -1161,28 +1204,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: #2c313f;
-	text-decoration: underline;
-}
-
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #3e69dc;
-}
-
-.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;
@@ -1197,12 +1225,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: #2c313f;
+}
+
+.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: #3e69dc;
+	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;
@@ -1211,11 +1261,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,
@@ -1224,55 +1269,130 @@ 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: #3e69dc;
+	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);
+.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;
 }
 
-.wp-block-newspack-blocks-homepage-articles.is-grid article {
-	margin-top: 0;
-	margin-bottom: calc(3 * 32px);
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1.44;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333rem;
+	background-color: #3e69dc;
+	border-radius: 10px;
+	border-width: 0;
+	padding: 16px 16px;
 }
 
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.34em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.33em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: #2c313f;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }

varia/style-rtl.css

@@ -1355,6 +1355,84 @@ object {
 	color: currentColor;
 }
 
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: indigo;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }