Template:Hr with image/styles.css

.hr-with-image {
	/* make this a flexbox */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	/* typography for header */
	text-align: center;
	font-weight: bold;
	/* only shrink */
	flex: 0 1 auto;
}

.hr-with-image::before,
.hr-with-image::after {
	content: '';
	border-top: 1px solid var(--color-emphasized);
	flex: 1 0 2rem;
}

.hr-with-image::before {
	margin-right: auto;
}

.hr-with-image::after {
	margin-left: auto;
}