Mermaid diagrams text size is too small

[nuke-web3]

We should get this default to be larger for all diagrams and try to ensure they are more compact if the text size affects the overall size of the full div that is rendered.

Overall the default text of diagrams and <p> elements should be relatively close IMHO.

Originally posted by @NukeManDan in https://github.com/Polkadot-Blockchain-Academy/pba-content/pull/655#pullrequestreview-1513520597

[wirednkod]

The "issue" here is that for some reason the SVG render is "allowing" space around it for "maybe" other things to come. I solved that on my slides by adding the following class at the diagram tags:

.mermaid-lc {
    max-width: 60% !important;
}

and...

<diagram class="mermaid mermaid-lc">
   ....
</diagram>

Of course I understand that custom classes is a no-no and we want to avoid that. This is why I proposed the use of tailwindcss (#675 ); Once tailwindcss is added (hopefully today) instead of the custom classes above the instructor should only do:

```html
<diagram class="mermaid max-w-[60%]">
   ....
</diagram>

I know that tailwindcss can be PITA for some instructors but the API and doc provided is VERY straightforward and easy to use (and eventually will allow us to modify from 1 place everything we need to change massively in all the template)