.langs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
	align-items: center;
	background: #ffffff;
}

.lang-stats-header {
	border: 1px solid #d8dee4;
	border-radius: 5px;
	margin: 0 0 18px;
	overflow: hidden; // rounded corners
}

.lang-stats-bar {
	display: flex;
	height: 5px;

	div {
		height: 5px;
	}
}

.lang-stat {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 9px 6px 8px;
	min-width: 0;
	white-space: nowrap;
}

.lang-stat * {
	margin-right: 3px;
}

.lang-stat *:last-child {
	margin-right: 0px;
}

.lang-stat-dot {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	display: inline-block;
	margin-right: 4px;
	margin-bottom: 1px;
}

.lang-stat-loc {
	font-size: 80%;
	font-style: italic;
	color: $gray-dark;
}