*{
    padding: 0px;
    margin: 10px;

}
 .contenedor{
    width: 800%;
    max-width: 1200px;
    margin: 20px auto;
     background-image: url("img/fondo.png"); 
    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 5% 40% 40% 5%;

 border: 0;
    grid-template-rows: repeat(3,auto);
    font-family: 'Galada'  ;
    grid-template-areas: "hojita hojita  hojita hojita"
                          "contenido contenido  sidebar sidebar"
                          "hojitadoble  hojitadoble  hojitadoble hojitadoble";
 }             

 .contenedor .hojita {
    margin-left: -10px;
 
    width:  2em;
     grid-area: hojita ;
 }
 .contenedor .contenido {
grid-area: contenido; 
}
  .contenedor .hojitadoble {
  
    grid-area: hojitadoble;
  
    grid-column: 4 / 4;
   
    
  background-image: url("img/hojita-doble.png");
 }
 
   .contenedor .sidebar {
       
        width: 90%;
     
     
  
     
     }
     

 @media screen and  (max-width:768px){
    .contenedor{
         width: 100%;
        grid-template-areas: "hojita hojita  hojita hojita"
                              "contenido contenido  contenido  contenido "
                              "sidebar sidebar  sidebar sidebar"                        
                              "hojitadoble  hojitadoble  hojitadoble hojitadoble";
     }
     img {
    width:100%;
    }
    #logo{
        margin-left:-11 fr;
         width: 80%;
    }
    
    .contenedor .hojitadoble {
        grid-area: hojitadoble;
        grid-column: 4 / 4;
        margin-left: -0.2em;
     
     }
      .contenedor .sidebar {
        grid-column: 1 / 4;
        width: 30%;
        display:grid;
        width: 80%;
       max-width: 300px;
     
    
    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 50% 50%  ;
     
     }
 }