Multiplier
CSS custom properties are excellent when it comes to updating multiple elements at once. By injecting a --text-multiplier variable into the text elements' size, you can increase/decrease them all at a specific breakpoint by editing the variable.
// Method 3
h1 {
font-size: calc(2em * var(--text-multiplier, 1));
}
p {
font-size: calc(1em * var(--text-multiplier, 1));
}
@media (min-width: 48rem) {
:root {
--text-multiplier: 1.25;
}
}