.mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 120px;
	gap: 12px;
}

/* base tile */
.tile {
	background: #f5f5f5;
	border-radius: 12px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: sans-serif;
	text-align: center;
	background-color: bisque;
}

/* icon + label */
.tile span {
	font-size: 12px;
	opacity: 0.7;
	margin-top: 6px;
}

.tile strong {
	font-size: 18px;
	margin-top: 4px;
}

/* variations for mosaic effect */
.tile.big {
	grid-column: span 2;
	grid-row: span 2;
}

.tile.wide {
	grid-column: span 2;
}

/* hover effect (optional but nice) */
.tile:hover {
	transform: translateY(-3px);
	transition: 0.2s ease;
	background: #eee;
}
section {
	margin-top: 12px;
}