style.scss

// Import styles for rendering the static content of deprecated gallery versions.
@import "./deprecated.scss";

// Styles for current version of gallery block.
.wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: wrap;
	// Need bogus :not(#individual-image) to override long :not()
	// specificity chain on default image block on front end.
	figure.wp-block-image:not(#individual-image) {
		// Add space between thumbnails, and unset right most thumbnails later.
		margin: 0 $grid-unit-20 $grid-unit-20 0;

		&:last-child {
			margin-right: 0;
		}

		width: calc(50% - #{$grid-unit-20});

		&:nth-of-type(even) {
			margin-right: 0;
		}
	}

	figure.wp-block-image {
		display: flex;
		flex-grow: 1;
		justify-content: center;
		position: relative;

		// IE11 doesn't like the "flex-direction: column;" here.
		@supports ( position: sticky ) {
			flex-direction: column;
		}

		> div,
		> a {
			margin: 0;

			// Avoid applying flex styles to IE11.
			@supports ( position: sticky ) {
				flex-direction: column;
				flex-grow: 1;
			}
		}

		img {
			display: block;
			height: auto;
			max-width: 100%;
			width: 100%;

			// IE doesn't handle cropping, so we need an explicit width here.
			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
			@supports ( position: sticky ) {
				width: auto;
			}
		}

		figcaption {
			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
			bottom: 0;
			color: $white;
			font-size: $default-font-size;
			left: 0;
			margin-bottom: 0;
			max-height: 100%;
			overflow: auto;
			padding: 40px 10px 9px;
			position: absolute;
			text-align: center;
			width: 100%;

			img {
				display: inline;
			}
		}
	}

	figcaption {
		flex-grow: 1;
	}

	// Cropped Images.
	&.is-cropped figure.wp-block-image:not(#individual-image) {
		> div:not(.components-drop-zone),
		> a {
			display: block; // Thanks to IE11 not supporting object-fit fall back to display: block.

			// Without IE11 object-fit support "display: flex;" here causes distortion of aspect ratio.
			@supports ( position: sticky ) {
				display: flex;
			}
		}

		a,
		img {
			width: 100%;

			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
			@supports ( position: sticky ) {
				flex: 1 0 0%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	&.columns-1 figure.wp-block-image:not(#individual-image) {
		margin-right: 0;
		width: 100%;
	}

	// Beyond mobile viewports, we allow up to 8 columns.
	@include break-small {
		@for $i from 3 through 8 {
			&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
				margin-right: $grid-unit-20;
				width: calc(#{100% / $i} - #{$grid-unit-20 * ( $i - 1 ) / $i});
			}
		}

		// Unset the right margin on every rightmost gallery item to ensure center balance.
		@for $column-count from 1 through 8 {
			&.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type( #{ $column-count }n ) {
				margin-right: 0;
			}
		}
	}

	// Apply max-width to floated items that have no intrinsic width.
	&.alignleft,
	&.alignright {
		max-width: $content-width / 2;
		width: 100%;
	}

	// If the gallery is centered, center the content inside as well.
	&.aligncenter {
		figure.wp-block-image {
			justify-content: center;
		}
	}
}