Module:Hatnote/styles.css

/* no images */
.hatnote0 .hatnote-text {
	text-align: center;
}

/* one image */
.hatnote1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	text-align: left;
}

.hatnote1 .hatnote-image1 {
	flex: 0 1 auto;
	margin-left: var(--space-sm);
	margin-right: var(--space-md);
}

.hatnote1 .hatnote-image1 img {
	max-width: 100%;
	height: 100%;
}

.hatnote1 .hatnote-text {
	flex: 0 1 fit-content;
}

/* two images */
.hatnote2 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	text-align: center;
}

.hatnote2 > :first-child,
.hatnote2 > :last-child {
	flex: 0 1 auto;
	margin: 0 var(--space-sm);
}

.hatnote2 img {
	max-width: 100%;
	height: 100%;
}

.hatnote2 > :nth-child(2) {
	flex: 1 1 fit-content;
}

.hatnote-primary {
	display: inline-block;
	color: var(--color-amaranth-legacy-scope);
	font-family: var(--font-family-header-custom, var(--font-family-serif));
	font-size: var(--font-size-xx-large);
}