@AdrianoEscarabote
Posted
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! ✌