.titulo-principal { text-align: center; background-color: #851944; color: #FFF; padding: 25px; border-bottom: 10px solid #000; } E pode ficar da seguinte forma, considerando que o código havia sido desenvolvido com base num tamanho de fonte de 20 pixels:
.titulo-principal { font-size: 300%; text-align: center; background-color: #851944; color: #FFF; padding: 1.25rem; border-bottom: .5rem solid #000; }
Neste caso de onde ele tirou por exemplo que o padding corresponde a 1.25 rem? Como ele chegou neste resultado, por exemplo 10px equivale a 0.5 rem? Como chegar neste resultado para as outras medidas?