.root {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	align-items: stretch;
	width: 100%;
	container-type: inline-size;
}

.intro {
	text-align: center;
	color: var(--color-text-high);
	max-width: 32rem;
	font-size: var(--font-xs);
	margin-inline: auto;

	@container (max-width: 599px) {
		max-width: 18rem;
	}
}

.mapListsSummary {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.mapListRow {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-2);
}

.mapListRowHeader {
	font-weight: var(--weight-bold);
}

.mapListBody {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.mapListRowMissing {
	font-style: italic;
	color: var(--color-text-high);
}