@media screen and (max-width: 500px) {


  

.texto {
      
    padding: 1em;
    width: 100%;
    font-size: 1.5em;
    



}

.caixa1 {
    background:rgb(158, 2, 2);
    width: 100%;
    height: 50vh;
    padding-top: 40vh;
    position: relative;
    transition: transform 2s ease-in-out;
    
}


.espiral {
    width: 70%;
}



.info:hover .caixa1 {
    transform: translate(0, 10vh);
    

}

.texto1{

    font-size: 1em;
    left: 0;
    
    
    
}

}