font-size: clamp(30px, 7vw, 100px)
tells the browser to scale the font between 30px and 100px based on 7 percent of the viewport width

Before

using media query

@media (max-width: 800px) {
h1.before { font-size: 24px; }
}

After

no media query

h1.after { font-size: clamp(24px, 4vw, 32px); }

clamp(min, ideal, max)