Template:Infobox/styles.css

.infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1em 1em;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background-color: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
	font-size: 90%;
	line-height: 1.45;
	border-collapse: collapse;
}

.infobox > tbody > tr > th,
.infobox > tbody > tr > td {
	padding: 4px 6px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var( --border-color-subtle, #eaecf0 );
}

.infobox > tbody > tr:first-child > th,
.infobox > tbody > tr:first-child > td {
	border-top: 0;
}

.infobox-title {
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	padding: 6px 4px;
	background-color: var( --background-color-interactive-subtle, #eaecf0 );
}

.infobox-header {
	text-align: center;
	font-weight: bold;
	background-color: var( --background-color-interactive-subtle, #eaecf0 );
}

.infobox-subtitle {
	text-align: center;
	font-style: italic;
}

.infobox-image {
	text-align: center;
	padding: 6px 4px;
}

.infobox-caption {
	font-size: 85%;
	color: var( --color-subtle, #54595d );
	padding-top: 4px;
}

.infobox-label {
	width: 38%;
	font-weight: bold;
}

.infobox-below {
	text-align: center;
	font-size: 85%;
	color: var( --color-subtle, #54595d );
}

.infobox-stats {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 2px;
	text-align: center;
}

.infobox-stats > div {
	padding: 2px 0;
}

.infobox-stat-label {
	display: block;
	font-weight: bold;
	font-size: 85%;
	color: var( --color-subtle, #54595d );
}

.infobox-stat-value {
	display: block;
}

@media screen and ( max-width: 720px ) {
	.infobox {
		float: none;
		width: auto;
		margin: 0 0 1em 0;
	}
}