1.Adaptando o corpo do texto para unidades relativas
.apresentacao__conteudo__texto {
font-size: 1.5rem;
}
2.Convertendo pixels para rem em CSS
.sobre-card h3 {
font-size: 1.25rem; /* 20 ÷ 16 */
}
3.Melhorando a responsividade de um site
Testei os tamanhos de fonte Muito grande, Grande, Médio, Pequeno e Muito pequeno.
Em todos eles o site se adaptou adequadamente, mantendo boa legibilidade e layout.
4.Ajustando o CSS para diferentes tamanhos de fonte
O site se adaptou. Caso não tivesse poderiamos fazer isto:
Exemplo prático no seu CSS:
.apresentacao__conteudo {
max-width: 615px;
}
Se em fontes grandes esse bloco ficar muito apertado, você pode aumentar o max-width:
.apresentacao__conteudo {
max-width: 700px; /* Ajustado */
}
Ou usar clamp no tamanho da fonte para adaptação:
.apresentacao__conteudo__titulo {
font-size: clamp(1.5rem, 4vw, 2.25rem);
}