/**
 * Portfolio layouts for the WordPress core Gallery block.
 */

.wp-block-gallery.is-style-portfolio-mosaic,
.wp-block-gallery.is-style-portfolio-square {
	display: grid;
	gap: 4px;
	margin: 0 auto 30px;
	padding: 0;
	width: 100%;
}

.wp-block-gallery.is-style-portfolio-mosaic {
	grid-auto-flow: dense;
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.wp-block-gallery.is-style-portfolio-mosaic > .wp-block-image {
	grid-column: span 3;
	margin: 0;
	min-width: 0;
	width: auto !important;
}

.wp-block-gallery.is-style-portfolio-mosaic > .wp-block-image:nth-child(6n + 5),
.wp-block-gallery.is-style-portfolio-mosaic > .wp-block-image:nth-child(6n + 6) {
	grid-column: span 6;
}

.wp-block-gallery.is-style-portfolio-mosaic:has(> .wp-block-image:nth-child(2):last-child) > .wp-block-image {
	grid-column: span 6;
}

/*
 * Preserve the old rectangular gallery's natural-aspect filmstrip when its
 * content explicitly requested two columns. Flex sizing uses each image's
 * intrinsic width, so portrait images stay narrower than square images while
 * all four share one visual row.
 */
.wp-block-gallery.is-style-portfolio-mosaic.columns-2 {
	align-items: flex-start;
	aspect-ratio: 3.08 / 1;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.wp-block-gallery.is-style-portfolio-mosaic.columns-2 > .wp-block-image {
	flex: 0 1 auto;
	height: 100%;
	width: auto !important;
}

.wp-block-gallery.is-style-portfolio-mosaic.columns-2 > .wp-block-image img {
	height: 100%;
	width: auto;
}

.wp-block-gallery.is-style-portfolio-mosaic > .wp-block-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.wp-block-gallery.is-style-portfolio-square {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-block-gallery.is-style-portfolio-square > .wp-block-image {
	aspect-ratio: 1;
	margin: 0;
	min-width: 0;
	width: auto !important;
}

.wp-block-gallery.is-style-portfolio-square > .wp-block-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.wp-block-gallery.is-style-portfolio-mosaic .wp-lightbox-container,
.wp-block-gallery.is-style-portfolio-square .wp-lightbox-container {
	height: 100%;
	width: 100%;
}

@media screen and (max-width: 600px) {
	.wp-block-gallery.is-style-portfolio-mosaic,
	.wp-block-gallery.is-style-portfolio-square {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-gallery.is-style-portfolio-mosaic > .wp-block-image,
	.wp-block-gallery.is-style-portfolio-mosaic > .wp-block-image:nth-child(n) {
		grid-column: auto;
	}

	.wp-block-gallery.is-style-portfolio-mosaic.columns-2 {
		aspect-ratio: auto;
		display: grid;
	}

	.wp-block-gallery.is-style-portfolio-mosaic.columns-2 > .wp-block-image {
		height: auto;
		width: auto !important;
	}

	.wp-block-gallery.is-style-portfolio-mosaic.columns-2 > .wp-block-image img {
		height: auto;
		width: 100%;
	}
}