style.scss

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

// The following is a temporary override until flex layout supports
// an align items setting of normal.
figure.wp-block-gallery.has-nested-images {
	align-items: normal;
}
// Styles for current version of gallery block.
.wp-block-gallery.has-nested-images {
	// 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) {
		width: calc(50% - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) / 2));
		margin: 0;
	}

	figure.wp-block-image {
		display: flex;
		flex-grow: 1;
		justify-content: center;
		position: relative;
		flex-direction: column;
		max-width: 100%;
		// Prevents theme.json and global styles borders that apply to the outer
		// wrapper from incorrectly enlarging gallery images to a point they
		// result in a single column gallery.
		box-sizing: border-box;

		> div,
		> a {
			margin: 0;
			flex-direction: column;
			flex-grow: 1;
		}

		img {
			display: block;
			height: auto;
			// Ensure max-width is not overridden on the img when the parent gallery has
			// wide or full alignment.
			max-width: 100% !important;
			width: auto;
		}

		// Position caption and scrim at the bottom.
		&:has(figcaption)::before,
		figcaption {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			max-height: 100%;
		}

		// Create a background blur layer.
		&:has(figcaption)::before {
			content: "";
			height: 100%;
			max-height: 40%;

			// Blur the background under the gradient scrim.
			backdrop-filter: blur(3px);

			// Crop the caption so the blur is only on the edge.
			mask-image: linear-gradient(0deg, $black 20%, transparent 100%);
		}

		// Place the caption at the bottom.
		figcaption {
			color: $white;
			text-shadow: 0 0 1.5px $black;
			font-size: $default-font-size;
			margin: 0;
			overflow: auto;
			padding: 1em;
			text-align: center;
			box-sizing: border-box;
			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));

			// Dark gradient scrim.
			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.4) 0%, transparent 100%);

			img {
				display: inline;
			}

			a {
				color: inherit;
			}
		}

		&.has-custom-border img {
			box-sizing: border-box;
		}

		&.is-style-rounded,
		&.has-custom-border {
			> div,
			> a {
				flex: 1 1 auto;
			}
			figcaption {
				flex: initial;
				background: none;
				color: inherit;
				margin: 0;
				padding: 10px 10px 9px;
				position: relative;
				text-shadow: none;
			}
			&::before {
				content: none;
			}
		}
	}

	figcaption {
		flex-grow: 1;
		flex-basis: 100%;
		text-align: center;
	}

	// Non cropped images.
	&:not(.is-cropped) {
		figure.wp-block-image:not(#individual-image) {
			margin-top: 0;
			margin-bottom: auto;
		}
	}

	// Cropped Images.
	&.is-cropped figure.wp-block-image:not(#individual-image) {
		align-self: inherit;
		> div:not(.components-drop-zone),
		> a {
			display: flex;
		}

		a,
		img {
			width: 100%;
			flex: 1 0 0%;
			height: 100%;
			object-fit: cover;
		}
	}

	&.columns-1 figure.wp-block-image:not(#individual-image) {
		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) {
				width: calc(#{math.div(100%, $i)} - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));

			}
		}
		// If number of columns not explicitly set default to 3 columns if 3 or more images.
		&.columns-default {
			figure.wp-block-image:not(#individual-image) {

				width: calc(33.33% - (var(--wp--style--unstable-gallery-gap, 16px) * #{math.div(2, 3)}));
			}
			// If only 2 child images use 2 columns.
			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
				width: calc(50% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.5));
			}
			// For a single image set to 100%.
			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
				width: 100%;
			}
		}
	}

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

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