Module:InfoboxNeue/styles.css

/* infobox wrapper */
.infobox {
	/* limit the width to 300px */
	width: 100%;
	max-width: 300px;
	/* separate this from the body */
	margin-bottom: var(--space-md);
	/* pass through the background when this isn't open */
	background-color: transparent;
}

.infobox[open] {
	/* set the background and border when this is open */
	background-color: var(--color-surface-2);
	border: 1px solid var(--border-color-base);
}

.infobox__title {
	/* add some padding */
	padding: var(--space-sm) var(--space-md);
	/* separate from the rest of the infobox */
	margin-bottom: var(--space-xs);
	/* set the cursor when hovering to hint to the user */
	cursor: pointer;
	/* don't highlight the text on click */
	user-select: none;
	/* typography */
	font-size: var(--font-size-xx-large);
	text-align: center;
	white-space: normal;
	/* make this a flexbox */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
}

.infobox__title:hover {
	/* change the background color on hover */
	background-color: var(--background-color-quiet--hover);
}

/* lines around the titles */
.infobox__title::before,
.infobox__title::after,
.infobox__sectionTitle::before,
.infobox__sectionTitle::after {
	content: "";
	height: 1px;
	flex: 1 0 2rem;
	background: var(--color-base--emphasized);
	align-self: center;
}

.infobox__title,
.infobox__sectionTitle {
	/* make this clearly a title */
	color: var(--color-base--emphasized);
	font-weight: bold;
}

.infobox__image img {
	/* prevent overflowing */
	object-fit: contain;
	width: 100%;
	height: auto;
}

.infobox__image img[src$=".svg"] {
	/* background color for transparent SVGs */
	background: #eaecf0;
}

.infobox__caption {
	/* pad this */
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
	/* typography */
	color: var(--color-subtle);
	font-size: var(--font-size-small);
	font-weight: normal;
	line-height: var(--line-height-sm);
	text-align: center;
	/* center this horizontally */
	margin: 0 auto;
}

.infobox__caption,
.infobox__section {
	/* pad horizontally */
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

.infobox__section + .infobox__section {
	/* margin between sections */
	margin-top: var(--space-lg);
}

.infobox__content > .infobox__section:last-child {
	/* don't bottom out at the last section */
	margin-bottom: 0;
	padding-bottom: var(--space-md);
}

.infobox__sectionTitle {
	/* typography */
	font-size: var(--font-size-large);
	text-align: center;
	/* make this a flexbox */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	/* only shrink */
	flex: 0 1 auto;
}

.infobox__sectionContent {
	display: grid;
	gap: var(--space-sm);
}

/* section item labels */
.infobox__section .infobox__item .infobox__label {
	color: var(--color-base--subtle);
	font-size: var(--font-size-small);
	line-height: var(--line-height-sm);
}

/* section item content */
.infobox__section .infobox__item .infobox__content {
	font-size: var(--font-size-small);
	line-height: var(--line-height-md);
}

/* fix section content newline handling */
.infobox__section .infobox__item > .infobox__content {
	white-space: break-spaces;
}

/* fix section content overflow */
.infobox__section .infobox__item > .infobox__content > * {
	display: inline-block;
	word-break: break-word;
	margin-block: 0;
}

/* on phones, center the infobox */
@media only screen and (max-width: 639px) {
	.infobox {
		margin-right: auto;
		margin-left: auto;
	}
}

/* CSS grid utility classes */
.infobox__grid--row {
	grid-auto-flow: column;
}

.infobox__grid--cols-1 {
	grid-template-columns: minmax(0, 1fr);
}

.infobox__grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.infobox__grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.infobox__grid--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.infobox__grid--cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.infobox__grid--cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.infobox__grid--col-span-2 {
	grid-column: span 2;
}

.infobox__grid--col-span-3 {
	grid-column: span 3;
}

.infobox__grid--col-span-4 {
	grid-column: span 4;
}

.infobox__grid--col-span-5 {
	grid-column: span 5;
}

.infobox__grid--col-span-6 {
	grid-column: span 6;
}

.infobox__grid--space-between {
	justify-content: space-between;
}