00:00 All right so like I did before I will copy the actual JavaScript object here and in the CSS file I'm going to copy it below here and just comment that out and so we want to define the font size

00:13 and then the line height so let's start with the font size dash dash font size and I don't know why it adds all these little extra dashes when I autocomplete but we want to have a font size

00:26 4.5 xl and set it to 2.625 rem now let's look in app.tsx for a 4.5 xl class and it does not look like it's working you can see the 4 xl is working 4.5 xl is not working and this is because

00:43 of that period here 4.5 xl which is freaking out the CSS variable you can see even the syntax highlighting is glitching and so this might change but right now a way to work around this is to use an underscore instead of the period and this will then be replaced with a period so

01:01 if I save it like that and now inspect my 4.5 xl class once again you can see that it has created the right class name but is using the underscore CSS variable and so the font size is set right and so let's do the other font size and I think copilot is going to do it for us

01:19 sure thing and so that should work as well and it does and now the trick to have the line height baked in is to use the same CSS variable and then sort of like a BEM modifier append dash dash

01:34 line height and we can set that to 1.15 so now check this out we are going to inspect both of these in the app.tsx and I want you to notice that the 5.5 xl will just have the font size

01:47 but the 4.5 xl will also have the line height let's look at the 5.5 xl first there is only the font size here and now let's look at the 4.5 and you can see that the font size and the line height are defined together so this kind of funky BEM modifier like naming is how you pass the line

02:07 height to the font size and copilot is going to give us the same for 5.5 xl line height of 1 thank you very much and we are done for this segment that is there is still more to come