html { font-size: 18px; }

@media screen and (min-width: 480px) { html { font-size: 18px; } }

@media screen and (min-width: 1280px) { html { font-size: 20px; } }

h1, .h1 { font-size: 26px; }

h2, .h2 { font-size: 22px; }

@media (max-width: 840px) { .hero h1 { font-size: 26px; }
  .hero h2 { font-size: 22px; } }

@media (max-width: 600px) { .hero h1 { font-size: 26px; }
  .hero h2 { font-size: 22px; } }