From c3b353140b514f86e98d0030c90e52a4d6bb6124 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 25 Sep 2020 13:53:35 -0400
Subject: [PATCH 1/7] Adjust type sizes and spacing.

---
 assets/css/ie-editor.css                       | 18 ++++++++++++++----
 assets/css/ie.css                              |  8 +++++++-
 assets/css/style-editor.css                    | 17 +++++++++++++----
 .../sass/05-blocks/latest-posts/_editor.scss   | 18 ++++++++++++++----
 assets/sass/05-blocks/latest-posts/_style.scss |  9 ++++++++-
 style-rtl.css                                  |  8 +++++++-
 style.css                                      |  8 +++++++-
 7 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css
index 7b95d6de2..b24265089 100644
--- a/assets/css/ie-editor.css
+++ b/assets/css/ie-editor.css
@@ -965,8 +965,8 @@ h6 {
 }
 
 .wp-block-latest-posts:not(.is-grid) > li {
-	margin-top: 30px;
-	margin-bottom: 30px;
+	margin-top: 50px;
+	margin-bottom: 50px;
 }
 
 .wp-block-latest-posts:not(.is-grid) > li:first-child {
@@ -986,8 +986,8 @@ h6 {
 }
 
 .wp-block-latest-posts > li > * {
-	margin-top: 15px;
-	margin-bottom: 15px;
+	margin-top: 10px;
+	margin-bottom: 10px;
 }
 
 .wp-block-latest-posts > li > *:first-child {
@@ -999,10 +999,12 @@ h6 {
 }
 
 .wp-block-latest-posts > li > a {
+	display: inline-block;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.875rem;
 	font-weight: normal;
 	line-height: 1.3;
+	margin-bottom: 10px;
 }
 
 @media only screen and (min-width: 652px) {
@@ -1011,6 +1013,12 @@ h6 {
 	}
 }
 
+.wp-block-latest-posts .wp-block-latest-posts__post-author {
+	color: #28303d;
+	font-size: 1.25rem;
+	line-height: 1.7;
+}
+
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: #28303d;
 	font-size: 1rem;
@@ -1026,12 +1034,14 @@ h6 {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.125rem;
 	line-height: 1.7;
+	margin-top: 20px;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.125rem;
 	line-height: 1.7;
+	margin-top: 20px;
 }
 
 @media only screen and (min-width: 592px) {
diff --git a/assets/css/ie.css b/assets/css/ie.css
index 0946a0ae8..74e79941a 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -2662,9 +2662,15 @@ img {
 	}
 }
 
+.wp-block-latest-posts .wp-block-latest-posts__post-author {
+	color: #28303d;
+	font-size: 1.25rem;
+	line-height: 1.7;
+}
+
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: #28303d;
-	font-size: 1.125rem;
+	font-size: 1rem;
 	line-height: 1.7;
 }
 
diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css
index 11561ae6f..6f233c71f 100644
--- a/assets/css/style-editor.css
+++ b/assets/css/style-editor.css
@@ -700,8 +700,8 @@ h6,
 }
 
 .wp-block-latest-posts:not(.is-grid) > li {
-	margin-top: var(--global--spacing-vertical);
-	margin-bottom: var(--global--spacing-vertical);
+	margin-top: calc(1.666 * var(--global--spacing-vertical));
+	margin-bottom: calc(1.666 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts:not(.is-grid) > li:first-child {
@@ -721,8 +721,8 @@ h6,
 }
 
 .wp-block-latest-posts > li > * {
-	margin-top: calc(0.5 * var(--global--spacing-vertical));
-	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+	margin-top: calc(0.333 * var(--global--spacing-vertical));
+	margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts > li > *:first-child {
@@ -734,10 +734,18 @@ h6,
 }
 
 .wp-block-latest-posts > li > a {
+	display: inline-block;
 	font-family: var(--latest-posts--title-font-family);
 	font-size: var(--latest-posts--title-font-size);
 	font-weight: var(--heading--font-weight);
 	line-height: var(--global--line-height-heading);
+	margin-bottom: calc(0.333 * var(--global--spacing-vertical));
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-author {
+	color: var(--global--color-primary);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-body);
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
@@ -756,6 +764,7 @@ h6,
 	font-family: var(--latest-posts--description-font-family);
 	font-size: var(--latest-posts--description-font-size);
 	line-height: var(--global--line-height-body);
+	margin-top: calc(0.666 * var(--global--spacing-vertical));
 }
 
 @media only screen and (min-width: 592px) {
diff --git a/assets/sass/05-blocks/latest-posts/_editor.scss b/assets/sass/05-blocks/latest-posts/_editor.scss
index 60c949a73..e64ea82a9 100644
--- a/assets/sass/05-blocks/latest-posts/_editor.scss
+++ b/assets/sass/05-blocks/latest-posts/_editor.scss
@@ -3,8 +3,8 @@
 
 	// Vertical margins logic
 	&:not(.is-grid) > li {
-		margin-top: var(--global--spacing-vertical);
-		margin-bottom: var(--global--spacing-vertical);
+		margin-top: calc(1.666 * var(--global--spacing-vertical));
+		margin-bottom: calc(1.666 * var(--global--spacing-vertical));
 
 		&:first-child {
 			margin-top: 0;
@@ -24,8 +24,8 @@
 	}
 
 	> li > * {
-		margin-top: calc(0.5 * var(--global--spacing-vertical));
-		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+		margin-top: calc(0.333 * var(--global--spacing-vertical));
+		margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 
 		&:first-child {
 			margin-top: 0;
@@ -38,10 +38,19 @@
 
 	// Post title
 	> li > a {
+		display: inline-block;
 		font-family: var(--latest-posts--title-font-family);
 		font-size: var(--latest-posts--title-font-size);
 		font-weight: var(--heading--font-weight);
 		line-height: var(--global--line-height-heading);
+		margin-bottom: calc(0.333 * var(--global--spacing-vertical));
+	}
+
+	// Post author
+	.wp-block-latest-posts__post-author {
+		color: var(--global--color-primary);
+		font-size: var(--global--font-size-md);
+		line-height: var(--global--line-height-body);
 	}
 
 	// Post date
@@ -62,6 +71,7 @@
 		font-family: var(--latest-posts--description-font-family);
 		font-size: var(--latest-posts--description-font-size);
 		line-height: var(--global--line-height-body);
+		margin-top: calc(0.666 * var(--global--spacing-vertical));
 	}
 }
 
diff --git a/assets/sass/05-blocks/latest-posts/_style.scss b/assets/sass/05-blocks/latest-posts/_style.scss
index 8fa5ca2a3..0a9cb8ce1 100644
--- a/assets/sass/05-blocks/latest-posts/_style.scss
+++ b/assets/sass/05-blocks/latest-posts/_style.scss
@@ -61,10 +61,17 @@
 		line-height: var(--global--line-height-heading);
 	}
 
+	// Post author
+	.wp-block-latest-posts__post-author {
+		color: var(--global--color-primary);
+		font-size: var(--global--font-size-md);
+		line-height: var(--global--line-height-body);
+	}
+
 	// Post date
 	.wp-block-latest-posts__post-date {
 		color: var(--global--color-primary);
-		font-size: var(--global--font-size-sm);
+		font-size: var(--global--font-size-xs);
 		line-height: var(--global--line-height-body);
 
 		.entry-content [class*="inner-container"] &,
diff --git a/style-rtl.css b/style-rtl.css
index 57f52d64b..fad17b5a3 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -1792,9 +1792,15 @@ img {
 	line-height: var(--global--line-height-heading);
 }
 
+.wp-block-latest-posts .wp-block-latest-posts__post-author {
+	color: var(--global--color-primary);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-body);
+}
+
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: var(--global--color-primary);
-	font-size: var(--global--font-size-sm);
+	font-size: var(--global--font-size-xs);
 	line-height: var(--global--line-height-body);
 }
 
diff --git a/style.css b/style.css
index 89b4cee2e..29eb1b912 100644
--- a/style.css
+++ b/style.css
@@ -1800,9 +1800,15 @@ img {
 	line-height: var(--global--line-height-heading);
 }
 
+.wp-block-latest-posts .wp-block-latest-posts__post-author {
+	color: var(--global--color-primary);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-body);
+}
+
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: var(--global--color-primary);
-	font-size: var(--global--font-size-sm);
+	font-size: var(--global--font-size-xs);
 	line-height: var(--global--line-height-body);
 }
 

From 09088b9707e8647beaed412b716f5f54296177da Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 25 Sep 2020 13:59:00 -0400
Subject: [PATCH 2/7] Bring changes to frond-end too. Delete unused tablet
 styles.

---
 assets/css/ie-editor.css                      | 28 ----------
 assets/css/ie.css                             | 44 ++++-----------
 assets/css/style-editor.css                   | 28 ----------
 .../sass/05-blocks/latest-posts/_editor.scss  | 38 -------------
 .../sass/05-blocks/latest-posts/_style.scss   | 53 ++++---------------
 style-rtl.css                                 | 43 ++++-----------
 style.css                                     | 43 ++++-----------
 7 files changed, 37 insertions(+), 240 deletions(-)

diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css
index b24265089..ca82a86a5 100644
--- a/assets/css/ie-editor.css
+++ b/assets/css/ie-editor.css
@@ -1044,34 +1044,6 @@ h6 {
 	margin-top: 20px;
 }
 
-@media only screen and (min-width: 592px) {
-	.wp-block-latest-posts.is-style-tto-alternating-grid {
-		overflow: hidden;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li {
-		width: calc(50% - 13px);
-		max-width: calc(50% - 13px);
-		text-align: right;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li:nth-child(2n + 1) {
-		float: right;
-		text-align: left;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid {
-		display: inherit;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li {
-		margin-top: 30px;
-		margin-right: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:first-child {
-		margin-top: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:last-child {
-		margin-bottom: 0;
-	}
-}
-
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/css/ie.css b/assets/css/ie.css
index 74e79941a..1e1832cd1 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -2603,8 +2603,8 @@ img {
 }
 
 .wp-block-latest-posts:not(.is-grid) > li {
-	margin-top: 30px;
-	margin-bottom: 30px;
+	margin-top: 50px;
+	margin-bottom: 50px;
 }
 
 .wp-block-latest-posts:not(.is-grid) > li:first-child {
@@ -2637,8 +2637,8 @@ img {
 }
 
 .wp-block-latest-posts > li > * {
-	margin-top: 15px;
-	margin-bottom: 15px;
+	margin-top: 10px;
+	margin-bottom: 10px;
 }
 
 .wp-block-latest-posts > li > *:first-child {
@@ -2650,10 +2650,12 @@ img {
 }
 
 .wp-block-latest-posts > li > a {
+	display: inline-block;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.875rem;
 	font-weight: normal;
 	line-height: 1.3;
+	margin-bottom: 10px;
 }
 
 @media only screen and (min-width: 652px){
@@ -2674,8 +2676,8 @@ img {
 	line-height: 1.7;
 }
 
-.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
-.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: currentColor;
 }
 
@@ -2683,12 +2685,14 @@ img {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.125rem;
 	line-height: 1.7;
+	margin-top: 20px;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.125rem;
 	line-height: 1.7;
+	margin-top: 20px;
 }
 
 .wp-block-latest-posts.alignfull {
@@ -2702,34 +2706,6 @@ img {
 	padding-right: 0;
 }
 
-@media only screen and (min-width: 592px) {
-	.wp-block-latest-posts.is-style-tto-alternating-grid {
-		overflow: hidden;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li {
-		width: calc(50% - 13px);
-		max-width: calc(50% - 13px);
-		text-align: right;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li:nth-child(2n + 1) {
-		float: right;
-		text-align: left;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid {
-		display: inherit;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li {
-		margin-top: 30px;
-		margin-right: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:first-child {
-		margin-top: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:last-child {
-		margin-bottom: 0;
-	}
-}
-
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css
index 6f233c71f..76ad8c9cb 100644
--- a/assets/css/style-editor.css
+++ b/assets/css/style-editor.css
@@ -767,34 +767,6 @@ h6,
 	margin-top: calc(0.666 * var(--global--spacing-vertical));
 }
 
-@media only screen and (min-width: 592px) {
-	.wp-block-latest-posts.is-style-tto-alternating-grid {
-		overflow: hidden;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li {
-		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-		text-align: right;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li:nth-child(2n + 1) {
-		float: right;
-		text-align: left;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid {
-		display: inherit;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li {
-		margin-top: var(--global--spacing-vertical);
-		margin-right: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:first-child {
-		margin-top: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:last-child {
-		margin-bottom: 0;
-	}
-}
-
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/sass/05-blocks/latest-posts/_editor.scss b/assets/sass/05-blocks/latest-posts/_editor.scss
index e64ea82a9..fe0d19385 100644
--- a/assets/sass/05-blocks/latest-posts/_editor.scss
+++ b/assets/sass/05-blocks/latest-posts/_editor.scss
@@ -74,41 +74,3 @@
 		margin-top: calc(0.666 * var(--global--spacing-vertical));
 	}
 }
-
-@include media(tablet) {
-
-	.wp-block-latest-posts.is-style-tto-alternating-grid {
-
-		// Necessary so that the block boundaries are respected.
-		overflow: hidden;
-
-		> li {
-			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-			text-align: right;
-
-			&:nth-child(2n + 1) {
-				float: right;
-				text-align: left;
-			}
-		}
-
-
-		&.is-grid {
-			display: inherit;
-
-			> li {
-				margin-top: var(--global--spacing-vertical);
-				margin-right: 0;
-
-				&:first-child {
-					margin-top: 0;
-				}
-
-				&:last-child {
-					margin-bottom: 0;
-				}
-			}
-		}
-	}
-}
diff --git a/assets/sass/05-blocks/latest-posts/_style.scss b/assets/sass/05-blocks/latest-posts/_style.scss
index 0a9cb8ce1..eb396c8ef 100644
--- a/assets/sass/05-blocks/latest-posts/_style.scss
+++ b/assets/sass/05-blocks/latest-posts/_style.scss
@@ -3,8 +3,8 @@
 
 	// Vertical margins logic
 	&:not(.is-grid) > li {
-		margin-top: var(--global--spacing-vertical);
-		margin-bottom: var(--global--spacing-vertical);
+		margin-top: calc(1.666 * var(--global--spacing-vertical));
+		margin-bottom: calc(1.666 * var(--global--spacing-vertical));
 
 		&:first-child {
 			margin-top: 0;
@@ -41,8 +41,8 @@
 	}
 
 	> li > * {
-		margin-top: calc(0.5 * var(--global--spacing-vertical));
-		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+		margin-top: calc(0.333 * var(--global--spacing-vertical));
+		margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 
 		&:first-child {
 			margin-top: 0;
@@ -55,10 +55,12 @@
 
 	// Post title
 	> li > a {
+		display: inline-block;
 		font-family: var(--latest-posts--title-font-family);
 		font-size: var(--latest-posts--title-font-size);
 		font-weight: var(--heading--font-weight);
 		line-height: var(--global--line-height-heading);
+		margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 	}
 
 	// Post author
@@ -74,8 +76,8 @@
 		font-size: var(--global--font-size-xs);
 		line-height: var(--global--line-height-body);
 
-		.entry-content [class*="inner-container"] &,
-		.entry-content .has-background & {
+		[class*="inner-container"] &,
+		.has-background & {
 			color: currentColor;
 		}
 	}
@@ -86,6 +88,7 @@
 		font-family: var(--latest-posts--description-font-family);
 		font-size: var(--latest-posts--description-font-size);
 		line-height: var(--global--line-height-body);
+		margin-top: calc(0.666 * var(--global--spacing-vertical));
 	}
 
 	// Utility classes
@@ -100,41 +103,3 @@
 		}
 	}
 }
-
-@include media(tablet) {
-
-	.wp-block-latest-posts.is-style-tto-alternating-grid {
-
-		// Necessary so that the block boundaries are respected.
-		overflow: hidden;
-
-		> li {
-			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-			text-align: right;
-
-			&:nth-child(2n + 1) {
-				float: right;
-				text-align: left;
-			}
-		}
-
-
-		&.is-grid {
-			display: inherit;
-
-			> li {
-				margin-top: var(--global--spacing-vertical);
-				margin-right: 0;
-
-				&:first-child {
-					margin-top: 0;
-				}
-
-				&:last-child {
-					margin-bottom: 0;
-				}
-			}
-		}
-	}
-}
diff --git a/style-rtl.css b/style-rtl.css
index fad17b5a3..d71d04751 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -1739,8 +1739,8 @@ img {
 }
 
 .wp-block-latest-posts:not(.is-grid) > li {
-	margin-top: var(--global--spacing-vertical);
-	margin-bottom: var(--global--spacing-vertical);
+	margin-top: calc(1.666 * var(--global--spacing-vertical));
+	margin-bottom: calc(1.666 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts:not(.is-grid) > li:first-child {
@@ -1773,8 +1773,8 @@ img {
 }
 
 .wp-block-latest-posts > li > * {
-	margin-top: calc(0.5 * var(--global--spacing-vertical));
-	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+	margin-top: calc(0.333 * var(--global--spacing-vertical));
+	margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts > li > *:first-child {
@@ -1786,10 +1786,12 @@ img {
 }
 
 .wp-block-latest-posts > li > a {
+	display: inline-block;
 	font-family: var(--latest-posts--title-font-family);
 	font-size: var(--latest-posts--title-font-size);
 	font-weight: var(--heading--font-weight);
 	line-height: var(--global--line-height-heading);
+	margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-author {
@@ -1804,8 +1806,8 @@ img {
 	line-height: var(--global--line-height-body);
 }
 
-.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
-.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: currentColor;
 }
 
@@ -1814,6 +1816,7 @@ img {
 	font-family: var(--latest-posts--description-font-family);
 	font-size: var(--latest-posts--description-font-size);
 	line-height: var(--global--line-height-body);
+	margin-top: calc(0.666 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts.alignfull {
@@ -1827,34 +1830,6 @@ img {
 	padding-left: 0;
 }
 
-@media only screen and (min-width: 592px) {
-	.wp-block-latest-posts.is-style-tto-alternating-grid {
-		overflow: hidden;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li {
-		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-		text-align: left;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li:nth-child(2n + 1) {
-		float: left;
-		text-align: right;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid {
-		display: inherit;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li {
-		margin-top: var(--global--spacing-vertical);
-		margin-left: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:first-child {
-		margin-top: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:last-child {
-		margin-bottom: 0;
-	}
-}
-
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/style.css b/style.css
index 29eb1b912..e51b0ed84 100644
--- a/style.css
+++ b/style.css
@@ -1747,8 +1747,8 @@ img {
 }
 
 .wp-block-latest-posts:not(.is-grid) > li {
-	margin-top: var(--global--spacing-vertical);
-	margin-bottom: var(--global--spacing-vertical);
+	margin-top: calc(1.666 * var(--global--spacing-vertical));
+	margin-bottom: calc(1.666 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts:not(.is-grid) > li:first-child {
@@ -1781,8 +1781,8 @@ img {
 }
 
 .wp-block-latest-posts > li > * {
-	margin-top: calc(0.5 * var(--global--spacing-vertical));
-	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+	margin-top: calc(0.333 * var(--global--spacing-vertical));
+	margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts > li > *:first-child {
@@ -1794,10 +1794,12 @@ img {
 }
 
 .wp-block-latest-posts > li > a {
+	display: inline-block;
 	font-family: var(--latest-posts--title-font-family);
 	font-size: var(--latest-posts--title-font-size);
 	font-weight: var(--heading--font-weight);
 	line-height: var(--global--line-height-heading);
+	margin-bottom: calc(0.333 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-author {
@@ -1812,8 +1814,8 @@ img {
 	line-height: var(--global--line-height-body);
 }
 
-.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
-.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: currentColor;
 }
 
@@ -1822,6 +1824,7 @@ img {
 	font-family: var(--latest-posts--description-font-family);
 	font-size: var(--latest-posts--description-font-size);
 	line-height: var(--global--line-height-body);
+	margin-top: calc(0.666 * var(--global--spacing-vertical));
 }
 
 .wp-block-latest-posts.alignfull {
@@ -1835,34 +1838,6 @@ img {
 	padding-right: 0;
 }
 
-@media only screen and (min-width: 592px) {
-	.wp-block-latest-posts.is-style-tto-alternating-grid {
-		overflow: hidden;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li {
-		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
-		text-align: right;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid > li:nth-child(2n + 1) {
-		float: right;
-		text-align: left;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid {
-		display: inherit;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li {
-		margin-top: var(--global--spacing-vertical);
-		margin-right: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:first-child {
-		margin-top: 0;
-	}
-	.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:last-child {
-		margin-bottom: 0;
-	}
-}
-
 .gallery-item {
 	display: inline-block;
 	text-align: center;

From a2b6d5550f6749097b203d5f5e6750c4b1805ce7 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 25 Sep 2020 15:01:49 -0400
Subject: [PATCH 3/7] Add borders style.

---
 assets/css/ie-editor.css                      | 54 +++++++++++++++++++
 assets/css/style-editor.css                   | 48 +++++++++++++++++
 .../sass/05-blocks/latest-posts/_editor.scss  | 41 ++++++++++++++
 inc/block-styles.php                          |  8 +++
 4 files changed, 151 insertions(+)

diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css
index ca82a86a5..ddb056a2e 100644
--- a/assets/css/ie-editor.css
+++ b/assets/css/ie-editor.css
@@ -1044,6 +1044,60 @@ h6 {
 	margin-top: 20px;
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
+	border-top: 3px solid #000;
+	border-bottom: 3px solid #000;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
+	padding-bottom: 30px;
+	border-bottom: 1px solid #000;
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
+	padding-bottom: 30px;
+	border-bottom: 1px solid #000;
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child {
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
+	box-shadow: inset 0 -1px 0 0 #000;
+	border-bottom: 2px solid #000;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
+	margin: 0;
+	padding-top: 30px;
+	padding-right: 30px;
+}
+
+@media screen and (min-width: 600px) {
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
+		width: 50%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
+		width: 33%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
+		width: 25%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
+		width: 20%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
+		width: 17%;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css
index 76ad8c9cb..5f3f5d449 100644
--- a/assets/css/style-editor.css
+++ b/assets/css/style-editor.css
@@ -767,6 +767,54 @@ h6,
 	margin-top: calc(0.666 * var(--global--spacing-vertical));
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
+	border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
+	border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
+	padding-bottom: var(--global--spacing-vertical);
+	border-bottom: var(--separator--height) solid var(--global--color-border);
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child {
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
+	box-shadow: inset 0 -1px 0 0 var(--global--color-border);
+	border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
+	margin: 0;
+	padding-top: var(--global--spacing-vertical);
+	padding-right: var(--global--spacing-vertical);
+}
+
+@media screen and (min-width: 600px) {
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
+		width: calc((100% / 2));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
+		width: calc((100% / 3));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
+		width: calc((100% / 4));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
+		width: calc((100% / 5));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
+		width: calc((100% / 6));
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/sass/05-blocks/latest-posts/_editor.scss b/assets/sass/05-blocks/latest-posts/_editor.scss
index fe0d19385..92005a011 100644
--- a/assets/sass/05-blocks/latest-posts/_editor.scss
+++ b/assets/sass/05-blocks/latest-posts/_editor.scss
@@ -73,4 +73,45 @@
 		line-height: var(--global--line-height-body);
 		margin-top: calc(0.666 * var(--global--spacing-vertical));
 	}
+
+	// Block Styles
+	&.is-style-twentytwentyone-latest-posts-dividers {
+		border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
+		border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
+
+		&:not(.is-grid) > li,
+		> li {
+			padding-bottom: var(--global--spacing-vertical);
+			border-bottom: var(--separator--height) solid var(--global--color-border);
+			margin-top: var(--global--spacing-vertical);
+			margin-bottom: var(--global--spacing-vertical);
+
+			&:last-child {
+				padding-bottom: 0;
+				border-bottom: none;
+			}
+		}
+
+		&.is-grid {
+			// Border moves up 1px to overlap the li borders in the last row.
+			box-shadow: inset 0 -1px 0 0 var(--global--color-border);
+			border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
+
+			li {
+				margin: 0;
+				padding-top: var(--global--spacing-vertical);
+				padding-right: var(--global--spacing-vertical);
+			}
+
+			// This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
+			// https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
+			@media screen and (min-width: 600px) {
+				@for $i from 2 through 6 {
+					&.columns-#{ $i } li {
+						width: calc((100% / #{ $i }));
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/inc/block-styles.php b/inc/block-styles.php
index d14f2a168..fc3878715 100644
--- a/inc/block-styles.php
+++ b/inc/block-styles.php
@@ -23,6 +23,14 @@ function twenty_twenty_one_register_block_styles() {
 				'label' => __( 'Image Frame', 'twentytwentyone' ),
 			)
 		);
+
+		register_block_style(
+			'core/latest-posts',
+			array(
+				'name'  => 'twentytwentyone-latest-posts-dividers',
+				'label' => __( 'Dividers', 'twentytwentyone' ),
+			)
+		);
 	}
 	add_action( 'init', 'twenty_twenty_one_register_block_styles' );
 }

From 16383c6e0ab4cb33da93279758783ec5dfaab604 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 25 Sep 2020 15:07:16 -0400
Subject: [PATCH 4/7] Front end styles, fix bottom padding on last item.

---
 assets/css/ie-editor.css                      |  4 ++
 assets/css/ie.css                             | 58 +++++++++++++++++++
 assets/css/style-editor.css                   |  4 ++
 .../sass/05-blocks/latest-posts/_editor.scss  |  4 ++
 .../sass/05-blocks/latest-posts/_style.scss   | 45 ++++++++++++++
 style-rtl.css                                 | 52 +++++++++++++++++
 style.css                                     | 52 +++++++++++++++++
 7 files changed, 219 insertions(+)

diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css
index ddb056a2e..dcad198a5 100644
--- a/assets/css/ie-editor.css
+++ b/assets/css/ie-editor.css
@@ -1080,6 +1080,10 @@ h6 {
 	padding-right: 30px;
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
+	padding-bottom: 30px;
+}
+
 @media screen and (min-width: 600px) {
 	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
 		width: 50%;
diff --git a/assets/css/ie.css b/assets/css/ie.css
index 1e1832cd1..555547cf9 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -2706,6 +2706,64 @@ img {
 	padding-right: 0;
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
+	border-top: 3px solid #000;
+	border-bottom: 3px solid #000;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
+	padding-bottom: 30px;
+	border-bottom: 1px solid #000;
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
+	padding-bottom: 30px;
+	border-bottom: 1px solid #000;
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child {
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
+	box-shadow: inset 0 -1px 0 0 #000;
+	border-bottom: 2px solid #000;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
+	margin: 0;
+	padding-top: 30px;
+	padding-right: 30px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
+	padding-bottom: 30px;
+}
+
+@media screen and (min-width: 600px) {
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
+		width: 50%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
+		width: 33%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
+		width: 25%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
+		width: 20%;
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
+		width: 17%;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css
index 5f3f5d449..257bfbf1c 100644
--- a/assets/css/style-editor.css
+++ b/assets/css/style-editor.css
@@ -797,6 +797,10 @@ h6,
 	padding-right: var(--global--spacing-vertical);
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
+	padding-bottom: var(--global--spacing-vertical);
+}
+
 @media screen and (min-width: 600px) {
 	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
 		width: calc((100% / 2));
diff --git a/assets/sass/05-blocks/latest-posts/_editor.scss b/assets/sass/05-blocks/latest-posts/_editor.scss
index 92005a011..0a507f0dd 100644
--- a/assets/sass/05-blocks/latest-posts/_editor.scss
+++ b/assets/sass/05-blocks/latest-posts/_editor.scss
@@ -101,6 +101,10 @@
 				margin: 0;
 				padding-top: var(--global--spacing-vertical);
 				padding-right: var(--global--spacing-vertical);
+
+				&:last-child {
+					padding-bottom: var(--global--spacing-vertical);
+				}
 			}
 
 			// This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
diff --git a/assets/sass/05-blocks/latest-posts/_style.scss b/assets/sass/05-blocks/latest-posts/_style.scss
index eb396c8ef..761cc4872 100644
--- a/assets/sass/05-blocks/latest-posts/_style.scss
+++ b/assets/sass/05-blocks/latest-posts/_style.scss
@@ -102,4 +102,49 @@
 			padding-right: 0;
 		}
 	}
+
+	// Block Styles
+	&.is-style-twentytwentyone-latest-posts-dividers {
+		border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
+		border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
+
+		&:not(.is-grid) > li,
+		> li {
+			padding-bottom: var(--global--spacing-vertical);
+			border-bottom: var(--separator--height) solid var(--global--color-border);
+			margin-top: var(--global--spacing-vertical);
+			margin-bottom: var(--global--spacing-vertical);
+
+			&:last-child {
+				padding-bottom: 0;
+				border-bottom: none;
+			}
+		}
+
+		&.is-grid {
+			// Border moves up 1px to overlap the li borders in the last row.
+			box-shadow: inset 0 -1px 0 0 var(--global--color-border);
+			border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
+
+			li {
+				margin: 0;
+				padding-top: var(--global--spacing-vertical);
+				padding-right: var(--global--spacing-vertical);
+
+				&:last-child {
+					padding-bottom: var(--global--spacing-vertical);
+				}
+			}
+
+			// This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
+			// https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
+			@media screen and (min-width: 600px) {
+				@for $i from 2 through 6 {
+					&.columns-#{ $i } li {
+						width: calc((100% / #{ $i }));
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/style-rtl.css b/style-rtl.css
index d71d04751..5594b46fd 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -1830,6 +1830,58 @@ img {
 	padding-left: 0;
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
+	border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
+	border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
+	padding-bottom: var(--global--spacing-vertical);
+	border-bottom: var(--separator--height) solid var(--global--color-border);
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child {
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
+	box-shadow: inset 0 -1px 0 0 var(--global--color-border);
+	border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
+	margin: 0;
+	padding-top: var(--global--spacing-vertical);
+	padding-left: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
+	padding-bottom: var(--global--spacing-vertical);
+}
+
+@media screen and (min-width: 600px) {
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
+		width: calc((100% / 2));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
+		width: calc((100% / 3));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
+		width: calc((100% / 4));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
+		width: calc((100% / 5));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
+		width: calc((100% / 6));
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/style.css b/style.css
index e51b0ed84..e952812af 100644
--- a/style.css
+++ b/style.css
@@ -1838,6 +1838,58 @@ img {
 	padding-right: 0;
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
+	border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
+	border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
+	padding-bottom: var(--global--spacing-vertical);
+	border-bottom: var(--separator--height) solid var(--global--color-border);
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child {
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
+	box-shadow: inset 0 -1px 0 0 var(--global--color-border);
+	border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
+	margin: 0;
+	padding-top: var(--global--spacing-vertical);
+	padding-right: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
+	padding-bottom: var(--global--spacing-vertical);
+}
+
+@media screen and (min-width: 600px) {
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
+		width: calc((100% / 2));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
+		width: calc((100% / 3));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
+		width: calc((100% / 4));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
+		width: calc((100% / 5));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
+		width: calc((100% / 6));
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

From c76919983f6ca985f8530243c40d535364029c02 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 25 Sep 2020 15:21:05 -0400
Subject: [PATCH 5/7] Add borders style.

---
 assets/css/ie-editor.css                      | 16 +++++++++++++++-
 assets/css/ie.css                             | 16 +++++++++++++++-
 assets/css/style-editor.css                   | 16 +++++++++++++++-
 .../sass/05-blocks/latest-posts/_editor.scss  | 19 ++++++++++++++++++-
 .../sass/05-blocks/latest-posts/_style.scss   | 19 ++++++++++++++++++-
 inc/block-styles.php                          |  8 ++++++++
 style-rtl.css                                 | 16 +++++++++++++++-
 style.css                                     | 16 +++++++++++++++-
 8 files changed, 119 insertions(+), 7 deletions(-)

diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css
index dcad198a5..bdf481a2e 100644
--- a/assets/css/ie-editor.css
+++ b/assets/css/ie-editor.css
@@ -1077,7 +1077,7 @@ h6 {
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
 	margin: 0;
 	padding-top: 30px;
-	padding-right: 30px;
+	padding-right: 25px;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
@@ -1102,6 +1102,20 @@ h6 {
 	}
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
+	border: 3px solid #000;
+	padding: 30px 25px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
+	padding-bottom: 30px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
+	margin-top: 25px;
+	margin-bottom: 25px;
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/css/ie.css b/assets/css/ie.css
index 555547cf9..98de1dee5 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -2739,7 +2739,7 @@ img {
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
 	margin: 0;
 	padding-top: 30px;
-	padding-right: 30px;
+	padding-right: 25px;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
@@ -2764,6 +2764,20 @@ img {
 	}
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
+	border: 3px solid #000;
+	padding: 30px 25px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
+	padding-bottom: 30px;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
+	margin-top: 25px;
+	margin-bottom: 25px;
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css
index 257bfbf1c..903de8e7d 100644
--- a/assets/css/style-editor.css
+++ b/assets/css/style-editor.css
@@ -794,7 +794,7 @@ h6,
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
 	margin: 0;
 	padding-top: var(--global--spacing-vertical);
-	padding-right: var(--global--spacing-vertical);
+	padding-right: var(--global--spacing-horizontal);
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
@@ -819,6 +819,20 @@ h6,
 	}
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
+	border: calc(3 * var(--separator--height)) solid var(--global--color-border);
+	padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
+	padding-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
+	margin-top: var(--global--spacing-horizontal);
+	margin-bottom: var(--global--spacing-horizontal);
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/assets/sass/05-blocks/latest-posts/_editor.scss b/assets/sass/05-blocks/latest-posts/_editor.scss
index 0a507f0dd..babf8bb6b 100644
--- a/assets/sass/05-blocks/latest-posts/_editor.scss
+++ b/assets/sass/05-blocks/latest-posts/_editor.scss
@@ -100,7 +100,7 @@
 			li {
 				margin: 0;
 				padding-top: var(--global--spacing-vertical);
-				padding-right: var(--global--spacing-vertical);
+				padding-right: var(--global--spacing-horizontal);
 
 				&:last-child {
 					padding-bottom: var(--global--spacing-vertical);
@@ -118,4 +118,21 @@
 			}
 		}
 	}
+
+	&.is-style-twentytwentyone-latest-posts-borders {
+
+		li {
+			border: calc(3 * var(--separator--height)) solid var(--global--color-border);
+			padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
+
+			&:last-child {
+				padding-bottom: var(--global--spacing-vertical);
+			}
+		}
+
+		&:not(.is-grid) li {
+			margin-top: var(--global--spacing-horizontal);
+			margin-bottom: var(--global--spacing-horizontal);
+		}
+	}
 }
diff --git a/assets/sass/05-blocks/latest-posts/_style.scss b/assets/sass/05-blocks/latest-posts/_style.scss
index 761cc4872..464c15b5f 100644
--- a/assets/sass/05-blocks/latest-posts/_style.scss
+++ b/assets/sass/05-blocks/latest-posts/_style.scss
@@ -129,7 +129,7 @@
 			li {
 				margin: 0;
 				padding-top: var(--global--spacing-vertical);
-				padding-right: var(--global--spacing-vertical);
+				padding-right: var(--global--spacing-horizontal);
 
 				&:last-child {
 					padding-bottom: var(--global--spacing-vertical);
@@ -147,4 +147,21 @@
 			}
 		}
 	}
+
+	&.is-style-twentytwentyone-latest-posts-borders {
+
+		li {
+			border: calc(3 * var(--separator--height)) solid var(--global--color-border);
+			padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
+
+			&:last-child {
+				padding-bottom: var(--global--spacing-vertical);
+			}
+		}
+
+		&:not(.is-grid) li {
+			margin-top: var(--global--spacing-horizontal);
+			margin-bottom: var(--global--spacing-horizontal);
+		}
+	}
 }
diff --git a/inc/block-styles.php b/inc/block-styles.php
index fc3878715..6d24db1f5 100644
--- a/inc/block-styles.php
+++ b/inc/block-styles.php
@@ -31,6 +31,14 @@ function twenty_twenty_one_register_block_styles() {
 				'label' => __( 'Dividers', 'twentytwentyone' ),
 			)
 		);
+
+		register_block_style(
+			'core/latest-posts',
+			array(
+				'name'  => 'twentytwentyone-latest-posts-borders',
+				'label' => __( 'Borders', 'twentytwentyone' ),
+			)
+		);
 	}
 	add_action( 'init', 'twenty_twenty_one_register_block_styles' );
 }
diff --git a/style-rtl.css b/style-rtl.css
index 5594b46fd..265cda60a 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -1857,7 +1857,7 @@ img {
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
 	margin: 0;
 	padding-top: var(--global--spacing-vertical);
-	padding-left: var(--global--spacing-vertical);
+	padding-left: var(--global--spacing-horizontal);
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
@@ -1882,6 +1882,20 @@ img {
 	}
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
+	border: calc(3 * var(--separator--height)) solid var(--global--color-border);
+	padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
+	padding-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
+	margin-top: var(--global--spacing-horizontal);
+	margin-bottom: var(--global--spacing-horizontal);
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
diff --git a/style.css b/style.css
index e952812af..8224c9b34 100644
--- a/style.css
+++ b/style.css
@@ -1865,7 +1865,7 @@ img {
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
 	margin: 0;
 	padding-top: var(--global--spacing-vertical);
-	padding-right: var(--global--spacing-vertical);
+	padding-right: var(--global--spacing-horizontal);
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
@@ -1890,6 +1890,20 @@ img {
 	}
 }
 
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
+	border: calc(3 * var(--separator--height)) solid var(--global--color-border);
+	padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
+	padding-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
+	margin-top: var(--global--spacing-horizontal);
+	margin-bottom: var(--global--spacing-horizontal);
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

From 5fbcf22bfa2edc85a5745bde81bc4bbaf7da79b5 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 25 Sep 2020 15:28:25 -0400
Subject: [PATCH 6/7] Add comments, recompile CSS.

---
 assets/css/ie-editor.css    |  36 ++++++------
 assets/css/ie.css           | 106 ++++++++++++++++++------------------
 assets/css/style-editor.css |   2 +-
 inc/block-styles.php        |   2 +
 style-rtl.css               |   2 +-
 style.css                   |   2 +-
 6 files changed, 76 insertions(+), 74 deletions(-)

diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css
index bdf481a2e..7188d1ad2 100644
--- a/assets/css/ie-editor.css
+++ b/assets/css/ie-editor.css
@@ -953,7 +953,7 @@ h6 {
 /* Block Styles */
 .wp-block-image.is-style-twentytwentyone-image-frame img {
 	padding: 20px;
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 }
 
 .wp-block-latest-comments {
@@ -1045,20 +1045,20 @@ h6 {
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
-	border-top: 3px solid #000;
-	border-bottom: 3px solid #000;
+	border-top: 3px solid #28303d;
+	border-bottom: 3px solid #28303d;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
 	padding-bottom: 30px;
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
 	padding-bottom: 30px;
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
@@ -1070,8 +1070,8 @@ h6 {
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
-	box-shadow: inset 0 -1px 0 0 #000;
-	border-bottom: 2px solid #000;
+	box-shadow: inset 0 -1px 0 0 #28303d;
+	border-bottom: 2px solid #28303d;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
@@ -1103,7 +1103,7 @@ h6 {
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	padding: 30px 25px;
 }
 
@@ -1422,7 +1422,7 @@ p.has-background {
 }
 
 .wp-block-search .wp-block-search__input {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
@@ -1433,33 +1433,33 @@ p.has-background {
 }
 
 .wp-block-search .wp-block-search__input:focus {
-	border-color: #000;
+	border-color: #28303d;
 }
 
 .wp-block-separator {
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	clear: both;
 }
 
 hr {
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	clear: both;
 }
 
 .wp-block-separator[style*="text-align:right"] {
-	border-right-color: #000;
+	border-right-color: #28303d;
 }
 
 .wp-block-separator[style*="text-align: right"] {
-	border-right-color: #000;
+	border-right-color: #28303d;
 }
 
 hr[style*="text-align:right"] {
-	border-right-color: #000;
+	border-right-color: #28303d;
 }
 
 hr[style*="text-align: right"] {
-	border-right-color: #000;
+	border-right-color: #28303d;
 }
 
 .wp-block-separator.is-style-wide {
@@ -1488,11 +1488,11 @@ hr.is-style-dots.has-text-color:before {
 }
 
 .wp-block-separator.is-style-dots:before {
-	color: #000;
+	color: #28303d;
 }
 
 hr.is-style-dots:before {
-	color: #000;
+	color: #28303d;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-separator,
diff --git a/assets/css/ie.css b/assets/css/ie.css
index 98de1dee5..3e6389add 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -1522,7 +1522,7 @@ blockquote.alignright footer {
 }
 
 input[type="text"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1530,7 +1530,7 @@ input[type="text"] {
 }
 
 input[type="email"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1538,7 +1538,7 @@ input[type="email"] {
 }
 
 input[type="url"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1546,7 +1546,7 @@ input[type="url"] {
 }
 
 input[type="password"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1554,7 +1554,7 @@ input[type="password"] {
 }
 
 input[type="search"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1562,7 +1562,7 @@ input[type="search"] {
 }
 
 input[type="number"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1570,7 +1570,7 @@ input[type="number"] {
 }
 
 input[type="tel"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1578,7 +1578,7 @@ input[type="tel"] {
 }
 
 input[type="range"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1586,7 +1586,7 @@ input[type="range"] {
 }
 
 input[type="date"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1594,7 +1594,7 @@ input[type="date"] {
 }
 
 input[type="month"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1602,7 +1602,7 @@ input[type="month"] {
 }
 
 input[type="week"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1610,7 +1610,7 @@ input[type="week"] {
 }
 
 input[type="time"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1618,7 +1618,7 @@ input[type="time"] {
 }
 
 input[type="datetime"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1626,7 +1626,7 @@ input[type="datetime"] {
 }
 
 input[type="datetime-local"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1634,7 +1634,7 @@ input[type="datetime-local"] {
 }
 
 input[type="color"] {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1642,7 +1642,7 @@ input[type="color"] {
 }
 
 textarea {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -1651,86 +1651,86 @@ textarea {
 
 input[type="text"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="email"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="url"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="password"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="search"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="number"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="tel"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="range"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="date"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="month"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="week"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="time"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="datetime"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="datetime-local"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 input[type="color"]:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 textarea:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 select {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 }
 
 textarea {
@@ -1897,7 +1897,7 @@ i {
 	color: #28303d;
 	font-size: 1.125rem;
 	padding: 20px;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 .wp-block-code pre {
@@ -2560,7 +2560,7 @@ img {
 /* Block Styles */
 .wp-block-image.is-style-twentytwentyone-image-frame img {
 	padding: 20px;
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 }
 
 .wp-block-latest-comments {
@@ -2707,20 +2707,20 @@ img {
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
-	border-top: 3px solid #000;
-	border-bottom: 3px solid #000;
+	border-top: 3px solid #28303d;
+	border-bottom: 3px solid #28303d;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
 	padding-bottom: 30px;
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
 	padding-bottom: 30px;
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
@@ -2732,8 +2732,8 @@ img {
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
-	box-shadow: inset 0 -1px 0 0 #000;
-	border-bottom: 2px solid #000;
+	box-shadow: inset 0 -1px 0 0 #28303d;
+	border-bottom: 2px solid #28303d;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
@@ -2765,7 +2765,7 @@ img {
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	padding: 30px 25px;
 }
 
@@ -3298,7 +3298,7 @@ p.has-text-color a {
 }
 
 .wp-block-search .wp-block-search__input {
-	border: 3px solid #000;
+	border: 3px solid #28303d;
 	border-radius: 0;
 	color: #28303d;
 	line-height: 1.7;
@@ -3309,19 +3309,19 @@ p.has-text-color a {
 
 .wp-block-search .wp-block-search__input:focus {
 	color: #28303d;
-	border-color: #000;
+	border-color: #28303d;
 }
 
 hr {
 	border-style: none;
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	clear: both;
 	margin-left: auto;
 	margin-right: auto;
 }
 
 hr.wp-block-separator {
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 	/**
 		 * Block Options
 		 */
@@ -3340,7 +3340,7 @@ hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator
 }
 
 hr.wp-block-separator.is-style-dots:before {
-	color: #000;
+	color: #28303d;
 	font-size: 2.25rem;
 	letter-spacing: 1.125rem;
 	padding-left: 1.125rem;
@@ -3769,7 +3769,7 @@ nav a {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1rem;
 	line-height: 1.7;
-	border-top: 3px solid #000;
+	border-top: 3px solid #28303d;
 	padding-top: 30px;
 	margin-top: 60px;
 }
@@ -3877,7 +3877,7 @@ nav a {
 }
 
 .single .entry-header {
-	border-bottom: 3px solid #000;
+	border-bottom: 3px solid #28303d;
 	padding-bottom: 60px;
 	margin-bottom: 90px;
 }
@@ -4070,7 +4070,7 @@ h1.entry-title {
 	margin-top: 30px;
 	padding-top: 20px;
 	padding-bottom: 90px;
-	border-bottom: 1px solid #000;
+	border-bottom: 1px solid #28303d;
 }
 
 body:not(.single) .site-main > article:last-of-type .entry-footer {
@@ -4082,7 +4082,7 @@ body:not(.single) .site-main > article:last-of-type .entry-footer {
 	margin-bottom: 102px;
 	padding-bottom: 0;
 	padding-top: 24px;
-	border-top: 3px solid #000;
+	border-top: 3px solid #28303d;
 	border-bottom: 1px solid transparent;
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
@@ -4206,7 +4206,7 @@ h2.page-title {
 }
 
 .page-header {
-	border-bottom: 3px solid #000;
+	border-bottom: 3px solid #28303d;
 	padding-bottom: 60px;
 }
 
@@ -5082,7 +5082,7 @@ h2.page-title {
 }
 
 .pagination {
-	border-top: 3px solid #000;
+	border-top: 3px solid #28303d;
 	padding-top: 30px;
 	margin: 30px auto;
 }
diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css
index 903de8e7d..0dbce9514 100644
--- a/assets/css/style-editor.css
+++ b/assets/css/style-editor.css
@@ -74,7 +74,7 @@
 	--global--color-secondary-hover: var(--global--color-secondary);
 	--global--color-background: var(--global--color-green);
 	/* Mint, default body background */
-	--global--color-border: var(--global--color-black);
+	--global--color-border: var(--global--color-dark-gray);
 	/* Used for borders (separators) */
 	/* Spacing */
 	--global--spacing-unit: 20px;
diff --git a/inc/block-styles.php b/inc/block-styles.php
index 6d24db1f5..e13478400 100644
--- a/inc/block-styles.php
+++ b/inc/block-styles.php
@@ -24,6 +24,7 @@ function twenty_twenty_one_register_block_styles() {
 			)
 		);
 
+		/* Latest Posts: Dividers */
 		register_block_style(
 			'core/latest-posts',
 			array(
@@ -32,6 +33,7 @@ function twenty_twenty_one_register_block_styles() {
 			)
 		);
 
+		/* Latest Posts: Borders */
 		register_block_style(
 			'core/latest-posts',
 			array(
diff --git a/style-rtl.css b/style-rtl.css
index 265cda60a..bb8b6dcf2 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -129,7 +129,7 @@ Twenty Twenty One is distributed under the terms of the GNU GPL.
 	--global--color-secondary-hover: var(--global--color-secondary);
 	--global--color-background: var(--global--color-green);
 	/* Mint, default body background */
-	--global--color-border: var(--global--color-black);
+	--global--color-border: var(--global--color-dark-gray);
 	/* Used for borders (separators) */
 	/* Spacing */
 	--global--spacing-unit: 20px;
diff --git a/style.css b/style.css
index 8224c9b34..63664397a 100644
--- a/style.css
+++ b/style.css
@@ -129,7 +129,7 @@ Twenty Twenty One is distributed under the terms of the GNU GPL.
 	--global--color-secondary-hover: var(--global--color-secondary);
 	--global--color-background: var(--global--color-green);
 	/* Mint, default body background */
-	--global--color-border: var(--global--color-black);
+	--global--color-border: var(--global--color-dark-gray);
 	/* Used for borders (separators) */
 	/* Spacing */
 	--global--spacing-unit: 20px;

From e2d0e9ac760a8b5b2a2c3936f6dd2d993dfc3798 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 28 Sep 2020 16:04:54 -0400
Subject: [PATCH 7/7] Fix bottom margin of last item.

---
 assets/css/ie-editor.css                        | 1 +
 assets/css/style-editor.css                     | 1 +
 assets/sass/05-blocks/latest-posts/_editor.scss | 1 +
 3 files changed, 3 insertions(+)

diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css
index 7188d1ad2..46c62e987 100644
--- a/assets/css/ie-editor.css
+++ b/assets/css/ie-editor.css
@@ -1109,6 +1109,7 @@ h6 {
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
 	padding-bottom: 30px;
+	margin-bottom: 30px;
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css
index 0dbce9514..a38a67621 100644
--- a/assets/css/style-editor.css
+++ b/assets/css/style-editor.css
@@ -826,6 +826,7 @@ h6,
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
 	padding-bottom: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
 }
 
 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
diff --git a/assets/sass/05-blocks/latest-posts/_editor.scss b/assets/sass/05-blocks/latest-posts/_editor.scss
index babf8bb6b..4d6310750 100644
--- a/assets/sass/05-blocks/latest-posts/_editor.scss
+++ b/assets/sass/05-blocks/latest-posts/_editor.scss
@@ -127,6 +127,7 @@
 
 			&:last-child {
 				padding-bottom: var(--global--spacing-vertical);
+				margin-bottom: var(--global--spacing-vertical);
 			}
 		}