/* Photo Mosaic - one tall photo beside two stacked (three photos), or a two-up grid */

.photo-mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-grid);
}

.photo-mosaic .photo-mosaic-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border-radius);
}

/* Three photos: the first spans both rows */
.photo-mosaic--mosaic {
	grid-template-rows: repeat(2, minmax(0, 1fr));
	aspect-ratio: 11 / 12;
}
.photo-mosaic--mosaic .photo-mosaic-img:first-child {
	grid-row: 1 / span 2;
}
.photo-mosaic--mosaic.photo-mosaic--tall-right .photo-mosaic-img:first-child {
	grid-column: 2;
}
.photo-mosaic--mosaic.photo-mosaic--tall-right .photo-mosaic-img:not(:first-child) {
	grid-column: 1;
}

/* Any other count */
.photo-mosaic--grid .photo-mosaic-img {
	height: auto;
	aspect-ratio: 4 / 3;
}

/* Frame: the design's white border and soft blue shadow */
.photo-mosaic--framed .photo-mosaic-img {
	border: 0.25rem solid var(--wp--preset--color--wpbf-palette-color-2);
	box-shadow: var(--shadow-card);
}