Template:Before and after/styles.css

.hatnote-primary > .template--before_and_after {
	color: var(--color-base);
	font-family: var(--font-family-base);
	font-size: var(--font-size-medium);
}

.template--before_and_after {
	margin-inline: var(--space-xs);
    display: grid;
    grid-template-columns: 3fr 2fr 3fr;
	gap: var(--space-xs);
	overflow-x: scroll;
}

.template--before_and_after > * {
	vertical-align: top;
}

.template--before_and_after > :nth-child(3n-2) {
	text-align: left;
}

.template--before_and_after > :nth-child(3n-1) {
	text-align: center;
}

.template--before_and_after > :nth-child(3n) {
	text-align: right;
}

.template--before_and_after ul {
	margin: 0;
	list-style: none;
}