User:BrandonEchols/Template/Infobox/styles.css

.tg-infobox {
    width: 320px;
    padding: 6px 0 8px 0;
    border: var(--tg-border-base);
    border-radius: var(--tg-border-radius-large);
    border-spacing: 0;
    color: var(--tg-color-base);
    line-height: var(--tg-line-height-xx-small);
    font-size: var(--tg-font-size-small);
    background-color: var(--tg-color-surface-2);
}

.tg-infobox.tg-infobox-hobbit {
    background-color: rgb(73,213,23);
}

.tg-infobox.tg-infobox-balrog {
    background-color: rgb(173,80,52);
}

.tg-infobox tr > *:first-child {
	padding-left: 16px;
}

.tg-infobox tr > *:last-child {
	padding-right: 16px;
}

.tg-infobox-title {
    font-size: var(--tg-font-size-x-large);
}

.tg-infobox-title,
.tg-infobox-header {
	color: var(--tg-color-emphasized);
}

.tg-infobox-title,
.tg-infobox-subtitle {
	padding-top: 2px;
	padding-bottom: 2px;
    line-height: var(--tg-line-height-xxx-small);
}

.tg-infobox-image {
	padding: 4px 0 !important;
}

.tg-infobox-image,
.tg-infobox-subtitle,
.tg-infobox-caption {
	text-align: center;
}

.tg-infobox-subtitle,
.tg-infobox-caption {
    color: var(--tg-color-subtle);
	font-size: var(--tg-font-size-x-small);
}

.tg-infobox-caption {
    padding-top: 4px;
	padding-bottom: 4px;;
}

.tg-infobox-header {
    border-top: var(--tg-border-base);
	padding-top: 12px;
	padding-bottom: 8px;
	font-size: var(--tg-font-size-medium);
}

.tg-infobox-data,
.tg-infobox-label {
    padding: 8px;
}

.tg-infobox-label {
    text-align: start;
    vertical-align: top;
}

@media (max-width: 640px) {
	.tg-infobox {
		width: 100%;
	}
}