[Projeto] Solução que encontrei para pagina de produtos

Apenas para consolidação dos estudos e caso alguém esteja com duvida de como fazer, essa foi minha ideia:

Segue codigo:

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

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

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

    .prod {
        width: auto;
    }

    .prod li {
        width: auto;
        margin: 1em;
        display: block;
    }

Brinquei um pouco com os seletores avançados mas há maneiras mais simples de resolver com classe, acredito.

   form {
        width: auto;
        text-align: center;       
    }

    .input-padrao {
        width: 89%;
        padding: 0px;
        height: 3em;
        margin: 0 auto;
    }

    #mensagem{
        height: 5em;
    }

    table {
        margin: 1em auto;
    }

    form label {
        padding: 2px;
    }

    fieldset > legend {
        padding: 5px;
    }