.collage {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-auto-flow: dense;
}

.collage > * {
	aspect-ratio: 1/1;
}

.collage > .is-style-large {
	grid-row: span 2;
}

@media (min-width: 640px) {
	.collage {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 15rem;
	}

	.collage > * {
		aspect-ratio: unset;
	}

	.collage > .is-style-wide {
		grid-column: span 2;
	}

	.collage > .is-style-large {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	.collage {
		grid-auto-rows: 20rem;
	}
}

@media (min-width: 1024px) {
	.collage {
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-rows: 18rem;
	}
}

@media (min-width: 1280px) {
	.collage {
		grid-auto-rows: 20rem;
	}
}

@media (min-width: 1536px) {
	.collage {
		grid-auto-rows: 23rem;
	}
}

.collage > * {
	height: 100%;
	width: 100%;
}