.arch-mosaic-grid {
	--arch-mosaic-row-height: 208px;
	--arch-mosaic-small-columns: 2;
	display: grid;
	grid-template-columns: repeat(40, minmax(0, 1fr));
	grid-auto-rows: var(--arch-mosaic-row-height);
	gap: 4px;
	width: 100%;
}

.arch-mosaic-item {
	display: block;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	background: #f2f2f2;
	border-radius: 4px;
}

.arch-mosaic-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 350ms ease;
}

/* Signature eight-tile pattern: 11/8/11/10 columns, then 9/12/8/11. */
.arch-mosaic-item:nth-child(8n + 1) { grid-column: 1 / span 11; }
.arch-mosaic-item:nth-child(8n + 2) { grid-column: 12 / span 8; }
.arch-mosaic-item:nth-child(8n + 3) { grid-column: 20 / span 11; }
.arch-mosaic-item:nth-child(8n + 4) { grid-column: 31 / span 10; }
.arch-mosaic-item:nth-child(8n + 5) { grid-column: 1 / span 9; }
.arch-mosaic-item:nth-child(8n + 6) { grid-column: 10 / span 12; }
.arch-mosaic-item:nth-child(8n + 7) { grid-column: 22 / span 8; }
.arch-mosaic-item:nth-child(8n + 8) { grid-column: 30 / span 11; }

@media (max-width: 1024px) {
	.arch-mosaic-grid {
		grid-template-columns: repeat(var(--arch-mosaic-small-columns), minmax(0, 1fr));
	}

	.arch-mosaic-item:nth-child(n) {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arch-mosaic-item img {
		transition: none;
	}
}