Template:User info/styles.css

/* {{PP-template}} */
.userinfo-bar {
	margin-top: 1em;
	height: 4px;
}
.userinfo-bar > div {
	width: 25%;
	height: 100%;
}
.userinfo[dir="ltr"] .userinfo-bar > div {
	/* @noflip */
	float: left;
}
.userinfo[dir="rtl"] .userinfo-bar > div {
	/* @noflip */
	float: right;
}
.userinfo-bar-1 {
	background-color: #990000;
}
.userinfo-bar-2 {
	background-color: #339966;
}
.userinfo-bar-3 {
	background-color: #0063bf;
}
.userinfo-bar-4 {
	background-color: #54595d;
}

.userinfo-basic,
.userinfo-detailed-header {
	font-family: sans-serif;
}

.userinfo-basic {
	padding-top: 2em;
}
.userinfo-basic:after {
	display: block;
	content: "";
	clear: both;
}
.userinfo-fullname {
	font-size: 2.6em;
	line-height: 1.2;
}
.userinfo-jobtitle {
	font-size: 1.8em;
	line-height: 1.2;
	padding-top: .5em;
}
.userinfo-quote {
	padding-top: 16px;
}

.userinfo-detailed {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 1em;
}
.userinfo-detailed-column {
	flex-basis: 250px;
	flex-grow: 1;
	flex-shrink: 1;
	font-family: sans-serif;
}
.userinfo[dir="ltr"] .userinfo-detailed-column {
	/* @noflip */
	margin-right: 2em;
}
.userinfo[dir="rtl"] .userinfo-detailed-column {
	/* @noflip */
	margin-left: 2em;
}
.userinfo-detailed > div > h2 {
	border-bottom: 0;
}
.userinfo-disclaimer {
	color: var(--color-subtle, #555);
	font-size: smaller;
	margin: 1em 0;
}
.userinfo-contact {
	box-sizing: border-box;
	flex-basis: 320px; /* match image width */
	flex-grow: 0;
	padding: 0 1em 1em 1em;
	background-color: var(--background-color-neutral, #eaecf0);
	color: var(--color-base, #202122);
}
.userinfo-detailed-column h2,
.userinfo-contact h2 {
	border-bottom:0;
	font-family: sans-serif;
}
.image img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 800px) {
	.image img {
		width: 100% !important;
		max-height: 60vh;
		object-fit: cover;
	}
	.userinfo .mw-halign-right,
	.userinfo .mw-halign-left,
	.userinfo-contact {
		margin: 1em 0;
		width: 100%;
	}
	.userinfo-contact {
		order: -1;
	}
}