/**
 * "Mosaic" style: a grid on a computer, a single column on a phone.
 *
 * The columns are built with auto-fill rather than a fixed count, so the
 * layout adapts to the width actually available, whatever the theme's
 * content width happens to be.
 */

.wpau-reviews--mosaique {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.wpau-reviews--mosaique .wpau-review {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*
 * Below this width a grid would squeeze the text into unreadable columns,
 * so the cards stack, which is what reads best on a phone.
 */
@media (max-width: 640px) {
	.wpau-reviews--mosaique {
		grid-template-columns: 1fr;
	}
}