Responsive stats card using Flexbox & CSS Grid

What are you most proud of, and what would you do differently next time?

’m proud of achieving the exact overlay‑blend look without editing the image, using only mix-blend-mode. Next time I’d refactor the CSS into utility classes (e.g., with Sass or Tailwind) to keep the file smaller and more scalable.

(pt-BR): Tenho orgulho de ter alcançado o efeito de overlay exatamente como no design sem editar a imagem, usando apenas mix-blend-mode. Na próxima vez, refatoraria o CSS em classes utilitárias (por exemplo, com Sass ou Tailwind) para deixar o arquivo mais enxuto e escalável.

What challenges did you encounter, and how did you overcome them?

The main challenge was keeping the card vertically centered while accommodating the footer. I solved it by combining a flex column on the body with flex: 1 on main, which let the card stay centered and pushed the footer to the bottom.

(pt-BR): O maior desafio foi manter o cartão centralizado verticalmente sem mover o rodapé. Resolvi usando display: flex em coluna no body e flex: 1 no main, permitindo que o cartão ficasse centralizado enquanto o rodapé permanecia no final da página.

What specific areas of your project would you like help with?

I’d appreciate feedback on improving the readability of my CSS variables setup and on best practices for structuring the media queries when a project grows.

(pt-BR): Gostaria de receber sugestões para melhorar a organização das minhas variáveis CSS e boas práticas para estruturar os media queries quando o projeto ficar maior.