Card alignment, one card misaligned

Hi everyone,

I've added a row of custom cards onto a client site that rotate in order to provide additional details on the what I've done is taken the custom css code and developed the functionality in VSCode. The functionality is working flawlessly on VS code when I preview (this include any other css that's already in the site to make sure there are no conflicts). When I add the html into a code block and the css as custom css everything works smoothly except two things.

1. My duotone fonts are misaligned. 

2. The first card seems to shift up. I checked dev tools and there is no extra padding being added. 

Here is the code:
https://codepen.io/Felix-Torres-the-encoder/pen/NPKWPoK

Attached is a screenshot of the issue on the site. 
 

Do you have link to page in your screenshot? We can check problem easier