It's difficult to distinguish between level 2 headings and level 3 headings

Level 2 headings are a mere 20% larger than level 3 headings (36px and 30px respectively). This makes it difficult to distinguish the two, especially when they're not right next to each other. (Example)

Common ways to solve this include greater differences in font size, font weight, and/or color. Decorations, such as underlines, can also be used.

Notably, the font weight seems to be set to 700 (Corresponding to bold), yet the non-bold version is still in use. This is because a different font name is set for each variant in the CSS. The correct way to do this is to set the same font name, and then specify a different font-weight in each @font-face block. See MDN Web Docs for details. Displaying the correct variant doesn't make the headings more easy distinguishable, but this might be helpful to know in fixing this.