1 files changed, 115 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
new file mode 100644
index 00000000..456f8acb
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
@@ -0,0 +1,115 @@
+@import '../../shared/styles/jetpack-variables.scss';
+@import './variables.scss';
+@import './css-gram.scss';
+
+$tiled-gallery-max-column-count: 20;
+
+.wp-block-jetpack-tiled-gallery {
+	margin: 0 auto $jetpack-block-margin-bottom;
+
+	&.is-style-circle .tiled-gallery__item img {
+		border-radius: 50%;
+	}
+
+	&.is-style-square,
+	&.is-style-circle {
+		.tiled-gallery__row {
+			flex-grow: 1;
+			width: 100%;
+
+			@for $cols from 1 through $tiled-gallery-max-column-count {
+				&.columns-#{$cols} {
+					.tiled-gallery__col {
+						width: calc( ( 100% - #{ $tiled-gallery-gutter * ( $cols - 1 ) } ) / #{$cols} );
+					}
+				}
+			}
+		}
+	}
+
+	&.is-style-columns,
+	&.is-style-rectangular {
+		.tiled-gallery__item {
+			display: flex;
+		}
+	}
+}
+
+.tiled-gallery__gallery {
+	width: 100%;
+	display: flex;
+	padding: 0;
+	flex-wrap: wrap;
+}
+
+.tiled-gallery__row {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	margin: 0;
+
+	& + & {
+		margin-top: $tiled-gallery-gutter;
+	}
+}
+
+.tiled-gallery__col {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin: 0;
+
+	& + & {
+		margin-left: $tiled-gallery-gutter;
+	}
+}
+
+.tiled-gallery__item {
+	justify-content: center;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+	position: relative;
+
+	&.filter__black-and-white {
+		filter: grayscale( 100% );
+	}
+
+	&.filter__sepia {
+		filter: sepia( 100% );
+	}
+
+	&.filter__1977 {
+		@include _1977;
+	}
+
+	&.filter__clarendon {
+		@include clarendon;
+	}
+
+	&.filter__gingham {
+		@include gingham;
+	}
+
+	& + & {
+		margin-top: $tiled-gallery-gutter;
+	}
+
+	> img {
+		background-color: rgba( 0, 0, 0, 0.1 );
+	}
+
+	> a,
+	> a > img,
+	> img {
+		display: block;
+		height: auto;
+		margin: 0;
+		max-width: 100%;
+		object-fit: cover;
+		object-position: center;
+		padding: 0;
+		width: 100%;
+	}
+}