Template:Centered headers/styles.css

/* hide the edit section button */
h2 .mw-editsection,
h3 .mw-editsection {
	display: none;
}

/* flex container to allow for the lines on each side */
h2, h3 {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--space-md);
}

h2 .mw-headline,
h3 .mw-headline {
	/* typography for header */
	text-align: center;
	font-weight: bold;
	/* only shrink */
	flex: 0 1 auto;
}

/* solid line around h2 */
h2::before,
h2::after {
	content: '';
	border-top: 1px solid var(--color-base--emphasized);
}

/* dashed line around h3 */
h3::before,
h3::after {
	content: '';
	border-top: 1px dashed var(--color-base--emphasized);
}

/* phones */
@media (min-width: 320px) {
	h2 .mw-headline {
		font-size: 4vh;
	}
	
	h3 .mw-headline {
		font-size: 2.5vh;
	}
	
	/* lines around h2, h3 */
	h2::before,
	h2::after,
	h3::before,
	h3::after {
		/* only grow, minimum 5vw */
		flex: 1 0 5vw;
	}
}

/* tablets */
@media (min-width: 640px) {
	h2 .mw-headline {
		font-size: 3.5vh;
	}
	
	h3 .mw-headline {
		font-size: 2.25vh;
	}

	/* lines around h2, h3 */
	h2::before,
	h2::after,
	h3::before,
	h3::after {
		/* only grow, minimum 2vw */
		flex: 1 0 2vw;
	}
}

/* pc */
@media (min-width: 1120px) {
	h2 .mw-headline {
		font-size: 4.5vh;
	}
	
	h3 .mw-headline {
		font-size: 3vh;
	}
	
	/* lines around h2, h3 */
	h2::before,
	h2::after,
	h3::before,
	h3::after {
		/* only grow, minimum 3vw */
		flex: 1 0 3vw;
	}
}