improved css for related posts block to fit design

spearhead/assets/sass/block-extends/_related-posts.scss

@@ -23,6 +23,7 @@
 		font-family: var(--global--font-primary);
 		font-size: var(--global--font-size-xs);
 		text-transform: uppercase;
+		color: var(--global--color-foreground-low-contrast);
 	}
 }
 
@@ -31,7 +32,7 @@
 #jp-relatedposts {
 	.jp-relatedposts-items {
 		p {
-			font-size: var(--global--font-size-base);
+			font-size: var(--global--font-size-xs);
 		}
 
 		.jp-relatedposts-post {
@@ -39,11 +40,13 @@
 			.jp-relatedposts-post-context {
 				opacity: 1;
 				line-height: var(--global--line-height-body);
+				color: var(--global--color-foreground-low-contrast);
 			}
 	
 			.jp-relatedposts-post-title {
 				font-size: var(--global--font-size-lg);
 				line-height: var(--heading--line-height-h2);
+				margin-bottom: calc(0.3 * var(--global--spacing-vertical));
 				a {
 					color: var(--global--color-foreground);
 					&:hover {
@@ -51,19 +54,22 @@
 					}
 				}
 			}
+			&:hover {
+				.jp-relatedposts-post-title a{
+					text-decoration: none;
+				}
+			}
 		}
 	}
 
 	h3.jp-relatedposts-headline {
-		font-size: var(--global--font-size-lg);
+		font-size: var(--global--font-size-base);
 		margin-bottom: var(--global--spacing-vertical);
-		width: 100%;
 
 		em {
 			font-weight: var(--global--font-weight);
 			&:before {
-				border-color: var(--separator--border-color);
-				margin-bottom: var(--global--spacing-vertical);
+				content: none;
 			}
 		}
 	}

spearhead/style-rtl.css

@@ -498,22 +498,25 @@ ul.wp-block-categories,
 	font-family: var(--global--font-primary);
 	font-size: var(--global--font-size-xs);
 	text-transform: uppercase;
+	color: var(--global--color-foreground-low-contrast);
 }
 
 /* The built in Jetpack related posts has different markup */
 #jp-relatedposts .jp-relatedposts-items p {
-	font-size: var(--global--font-size-base);
+	font-size: var(--global--font-size-xs);
 }
 
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
 	opacity: 1;
 	line-height: var(--global--line-height-body);
+	color: var(--global--color-foreground-low-contrast);
 }
 
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title {
 	font-size: var(--global--font-size-lg);
 	line-height: var(--heading--line-height-h2);
+	margin-bottom: calc(0.3 * var(--global--spacing-vertical));
 }
 
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
@@ -524,10 +527,13 @@ ul.wp-block-categories,
 	text-decoration: none;
 }
 
+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
+	text-decoration: none;
+}
+
 #jp-relatedposts h3.jp-relatedposts-headline {
-	font-size: var(--global--font-size-lg);
+	font-size: var(--global--font-size-base);
 	margin-bottom: var(--global--spacing-vertical);
-	width: 100%;
 }
 
 #jp-relatedposts h3.jp-relatedposts-headline em {
@@ -535,8 +541,7 @@ ul.wp-block-categories,
 }
 
 #jp-relatedposts h3.jp-relatedposts-headline em:before {
-	border-color: var(--separator--border-color);
-	margin-bottom: var(--global--spacing-vertical);
+	content: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles.wpnbha article,

spearhead/style.css

@@ -498,22 +498,25 @@ ul.wp-block-categories,
 	font-family: var(--global--font-primary);
 	font-size: var(--global--font-size-xs);
 	text-transform: uppercase;
+	color: var(--global--color-foreground-low-contrast);
 }
 
 /* The built in Jetpack related posts has different markup */
 #jp-relatedposts .jp-relatedposts-items p {
-	font-size: var(--global--font-size-base);
+	font-size: var(--global--font-size-xs);
 }
 
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
 	opacity: 1;
 	line-height: var(--global--line-height-body);
+	color: var(--global--color-foreground-low-contrast);
 }
 
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title {
 	font-size: var(--global--font-size-lg);
 	line-height: var(--heading--line-height-h2);
+	margin-bottom: calc(0.3 * var(--global--spacing-vertical));
 }
 
 #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
@@ -524,10 +527,13 @@ ul.wp-block-categories,
 	text-decoration: none;
 }
 
+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
+	text-decoration: none;
+}
+
 #jp-relatedposts h3.jp-relatedposts-headline {
-	font-size: var(--global--font-size-lg);
+	font-size: var(--global--font-size-base);
 	margin-bottom: var(--global--spacing-vertical);
-	width: 100%;
 }
 
 #jp-relatedposts h3.jp-relatedposts-headline em {
@@ -535,8 +541,7 @@ ul.wp-block-categories,
 }
 
 #jp-relatedposts h3.jp-relatedposts-headline em:before {
-	border-color: var(--separator--border-color);
-	margin-bottom: var(--global--spacing-vertical);
+	content: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles.wpnbha article,