1 files changed, 85 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/related-posts/style.scss b/plugins/jetpack/extensions/blocks/related-posts/style.scss
new file mode 100644
index 00000000..bc753513
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/related-posts/style.scss
@@ -0,0 +1,85 @@
+.jp-related-posts-i2 {
+	&__row {
+		display: flex;
+		margin-top: 1.5rem;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&[data-post-count='3'] .jp-related-posts-i2__post {
+			max-width: calc( 33% - 20px );
+		}
+
+		&[data-post-count='2'] .jp-related-posts-i2__post,
+		&[data-post-count='1'] .jp-related-posts-i2__post {
+			max-width: calc( 50% - 20px );
+		}
+	}
+
+	&__post {
+		flex-grow: 1;
+		flex-basis: 0;
+		margin: 0 10px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__post-heading, &__post-img-link, &__post-date, &__post-context {
+		flex-direction: row;
+	}
+
+	&__post-img-link, &__post-image-placeholder {
+		order: -1;
+	}
+
+	&__post-heading {
+		margin: 0.5rem 0;
+		font-size: 1rem;
+		line-height: 1.2em;
+	}
+
+	&__post-link {
+		display: block;
+		width: 100%;
+		line-height: 1.2em;
+		margin: 0.2em 0;
+	}
+
+	&__post-img {
+		width: 100%;
+	}
+
+	&__post-image-placeholder {
+		display: block;
+		position: relative;
+		margin: 0 auto;
+		max-width: 350px;
+		&-icon {
+			position: absolute;
+			top: calc( 50% - 12px );
+			left: calc( 50% - 12px );
+		}
+	}
+}
+
+/* List view */
+
+.jp-relatedposts-i2[data-layout='list'] {
+	.jp-related-posts-i2__row {
+		margin-top: 0;
+		display: block;
+	}
+	.jp-related-posts-i2__post {
+		max-width: none;
+		margin: 0;
+		margin-top: 1rem;
+	}
+	.jp-related-posts-i2__post-image-placeholder {
+		max-width: 350px;
+		margin: 0;
+	}
+	.jp-related-posts-i2__post-img-link {
+		margin-top: 1rem;
+	}
+}