to use semantic HTML markup (such as section, main, etc.), it will help you maintain better organization and improve code readability.
be mindful of having only one h1 heading per page in your markup.
sometimes you style elements based on classes, and sometimes based on ids; it's better to stick to one approach and style elements only by classes.
additionally, avoid using abstract names like id="a" or class="karma"; try to denote the element's semantics through the code, for example, class="karma-card", which immediately indicates that it's a card. You can use multiple classes on one element and eliminate ids, for example, class="card-s karma-card".
I also noticed that the "supervisor" card has a narrower width than the others; it might be something worth correcting.
Great job! I would suggest providing more detailed naming for classes. For example, if you have
h1 class="name"
try to choose names that reflect the entity.
In this case, since you're assigning the class to a heading, using class="heading" would be more appropriate than "name".
Similarly, for <ul class="links",
a name like "social-links" would be more fitting (since these links are related in meaning).
Also, just because text on the page is the largest doesn't mean it should be h1.
I recommend checking out this article