Practicing mobile-first SASS with BEM from Figma sketch v1.1

Update as of 1/31/2021:

• 0386156 2021-01-31 | style: changed all px units to rem (HEAD -> master, origin/master)
• 2dcb74f 2021-01-31 | refactor: shared style between cta and info headers
• 80c529c 2021-01-31 | chore: added vendor prefixes
• 761671e 2021-01-31 | style: sorted CSS properties by alphabetical order
• 23a149c 2021-01-31 | style: removed unused variables
• ec29072 2021-01-31 | refactor: removed the div wrapping around the main app and its associated styling and moved them back into .main-app
• add34b1 2021-01-31 | style: changed all uppercase references of CTA to lowercase
• ff33695 2021-01-31 | fix: removed hard coded height on the app so the app scales in height as new list items are added to Why Us section
• 312cf0c 2021-01-31 | refactor: moved list-style-type: none from the <ul> to the <li> in Why Us section
• 03ab619 2021-01-31 | fix: changed the why us section from a paragraph to a ul

Original post as of 1/30/2021:

1. I followed along using the Figma sketch file and it feels like cheating. They straight up have the CSS rules on the right side in Figma. It feels like cheating, is this how it's done on the job? Or have I been spending way more time than I should trying to figure out pixel perfect sizing and exact color values when that is really just sweating the small stuff and I am better off focusing on bigger concepts?

2. How is my BEM naming style? Are there places that I should be looking to substitute with element naming instead? Am I abusing the element naming scheme too much?

3. I didn't feel great about how I've centered my app using Flex as align-items: center didn't work so well when the app height > viewport height because then the top and bottom of the app got cut off. Any suggestions there?