Seção de recursos de quatro cartões

Parabéns pelo trampo! Achei legal como tu resolveu com a div no centro! Tenho algumas dicas de CSS, espero que ajude de alguma forma.

1 - Não precisamos mais usar @charset

Segundo a MDN: "The CSS syntax module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is fully supported in all browsers."

2 - Ao invés de aplicar classes pra cada texto e fonte, identifique quais combinações de texto e fonte existem e crie classes utilitárias pra elas

Se tu pensar bem, tem apenas 3 combinações de fonte nesse projeto - o heading, os títulos dos cards e os textos descritivos:

.heading {
  font-size: var(--font-size);
  font-weight: 100;
}

.heading strong {
    letter-spacing: var(--letter-spacing);
 }

.title {
  font-size: 1.25rem;
}

.text {
  font-size: 15px;
  color: var(--accent);
}

3 - Sempre que puder economizar classes, economize! Muita especificidade pode ser ruim.

Exemplo:

/* Nesse caso isso */
.cards .card-supervisor, .card-team, .card-karma, .card-cal {
    display: flex;
    flex-direction: column;
    background-color: var(--Very-Light-Gray);
    width: 350px;
    height: 250px;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 30px;
    box-shadow: 1px 1px 25px var(--Grayish-Blue);
}

/* poderia ser isso */

.cards > * {
   /* ... */
}

/* ou até isso */

[class^=card-] {
   /* ... */
}

4 - Sempre importe as fontes no HTML Se você importar a fonte no CSS, o navegador vai:

1. Baixar o HTML
2. Ler o HTML até encontrar o CSS
3. Baixar o CSS
4. Ler o CSS até encontrar a fonte
5. Baixar a fonte

Se você importar a fonte no HTML, o navegador vai:

1. Baixar o HTML
2. Ler o HTML até encontrar a fonte
3. Baixar a fonte

Bons estudos!