display: flex saving my life

Opa Felipe, tudo bom? Espero que sim.

Tenho algumas dicas para você:

1-Tente usar alguma unidade de medida fixa em resoluções maiores para que o seu layout não fique variando e quebrando, muitas vezes, priorize unidades de medidas responsivas em resoluções menores e para fazer a mudança entre elas você pode usar o auxílio do media query. Claro que é sempre para ter uma boa responsividade usar medidas em porcentagem. Mas como estamos lidando com apenas um card principal, a unidade de medida fixa se encaixaria melhor.

Adicionei essa linha de código para que você possa centralizar o card com o flex

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

Tirei essas linhas de códigos, para melhorar um pouco a responsividade do layout.

background { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Faça as mudanças que fiz e observe a melhora da responsividade, não esqueça também de ajustar o width e o height do card.

Espero que ajude! Não esqueça de marcar com útil! ✌

Fala Felipe, beleza?

Acabei de ver sua solução aqui e dei uma olhada no código também, achei bacana que você transformou o svg em path, isso dá bem mais possibilidades pra manipulação, como efeitos de Hover e etc.

Minha única dica é de não usar um tamanho fixo de altura pro container, mesmo usando porcentagem, porque se o conteúdo crescer mais que a altura, o conteúdo sai do container, já se você estiver usando flex sem declarar a altura ele cresce junto com o conteudo.

No mais ficou mto bom, parabéns!