Responsive Recipe Page using SCSS

So I got the project looking fine now, but the code is a mess and I'll be refactoring it during over the next days. Any input is appreciated. All the html code is in App.js. Some topics I'd like to know how to do better:

• The lines between the Nutrition table rows (mine are done in _table.scss)
• Spacing on list bullet points. I've got mine using some magic numbers (look _list.scss) to look like the design. Is there any %-based way to get the spacing right?
• Why is the text on mobile looking different to the design? I got it close using clamp() and magic numbers, but I'm confused why using the values from Figma didn't result in the right text length.
• How do I get the Outcast font as .woff2? I got it for Young Serif via fontsquirrel, but it didn't work for Outcast. I ended up importing it through index.html. And using it as .ttf didn't work.