styles.css

.userpage-nav {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.75em 0;
	margin-bottom: 1.5em;
	text-align: center;
}

.userpage-nav > div {
	padding-bottom: 0.25em;
}

.userpage-nav-user {
	border-bottom: 4px solid #3465a4;
}

.userpage-nav-misc {
	border-bottom: 4px solid #ff950e;
}

.userpage-nav-sandbox {
	border-bottom: 4px solid #a7d7f9;
}

.userpage-nav-subpages {
	border-bottom: 4px solid #666666;
}

.userpage-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1em;
	margin-bottom: 1.5em;
}

.userpage-intro {
	flex: 1 1 12em;
}

.userpage-name {
	font-size: 175%;
	line-height: 1.2;
}

.userpage-name sup {
	font-size: 50%;
}

.userpage-type {
	font-size: 130%;
}

.userpage-portrait {
	order: 1;
}

.userpage-babel {
	order: 2;
}

.userpage-babel .mw-babel-wrapper {
	float: none;
	width: 238px;
	max-width: 100%;
	margin: 0;
}

.userpage-babel .mw-babel-box th {
	white-space: nowrap;
}

@media ( min-width: 576px ) {
	.userpage-nav {
		grid-template-columns: repeat( 4, 1fr );
	}
}

@media ( min-width: 768px ) {
	.userpage-portrait,
	.userpage-babel {
		order: 0;
	}
}