Boa noite! Segue meu código de CSS em que finalizei com a versão responsiva para mobile. Vou estar anexando tambem um print de como ficou o site na versão mobile. Espero que esteja tudo certo! Agradeço os comentários e sempre aberta a criticas!!!
/*adaptando para que responda bem no desktop, tablet e celular*/
@media screen and (max-width: 480px){
.caixa, .principal, .mapa-conteudo, .conteudo-beneficios, .video, .beneficios {
width: auto;
}
h1 {
text-align: center;
}
nav {
position: static;
}
lista-beneficios, imagem-beneficios {
width: 100%;
}
form {
padding: auto;
margin: 15px 20px;
}
h2 {
width: 100%;
text-align: center;
margin: 20px 0;
}
main {
width: 50%;
display: block;
padding: auto;
}
.produtos li {
width: 175%;
display: block;
padding: 30px 30px;
margin: 20px 0 20px 20px;
}
.produto-descricao {
margin: 20px 0 0 0;
}
![]( )