Versão mobile para todas as páginas

Olá!

Tentei melhorar a folha de estilos de um colega que já havia solucionado o desafio. Além disso, padronizei a fonte utilizada na página "Home" para as páginas de "Contato" e "Produtos", que é

Ficou assim a partir do @media screen:

@media screen and (max-width: 480px){ .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos{ width: auto; }

h1{
    text-align: center;
}

nav{
    position: static;
    text-align: center;
}

.utensilios{
    width: 6em;
    display: block;
    margin: 1em;
}

.lista-beneficios, .imagem-benefícios{
    width: 100%;
}

.principal, .paragrafos{ text-align: justify; }

.paragrafos{
    text-indent: 2em;
}

.paragrafo-mapa{
    padding: 0.5em 2em;
}

.principal, .mapa, .beneficios{
    padding: 1em 0;
}           

.lista-beneficios{
    margin: 0 0 2em;
}

.titulo-principal, .principal, .mapa-conteudo, .conteudo-beneficios{
    margin: 1em 1em;
}

.titulo-principal{
    font-size: 1em;
}

.video{
    margin: 2em 2em 4em;
}

.imagem-beneficios{
    margin: 0 0 2em;
}

.produtos{
    width: auto;
    margin: 1em;
    padding: 2em 2em;
}    

.produtos li{
     display: block;
    text-align: center;
    width: auto;
    margin: 1.5em 0;
}

.produtos li:hover{
    border-color: #C78C19;
}

.produtos li:active{
    border-color: #088c19;
}

.produtos li:hover h2{
    font-size: 3em;
}

form{
    margin: 3em 2em;
}

.input-padrao{  
    width: 80%;
}

.enviar{
    font-size: 1em;
    width: 100%;
    padding: 1em;
}

table{
    margin: 0 auto 4em;
}

}

Espero poder ter ajudado e, quem sabe, alguém também melhore as páginas.