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: '';
	height: var(--template-arg-linesize, 1px);
	background: var(--template-arg-color, var(--color-amaranth-legacy-scope));
	flex: 0 0 25%;
}

@media (max-width: 639px) {
	.hr-with-image::before,
	.hr-with-image::after {
		flex: 1 0 2rem;
	}
}