/*-------grid elements-------------*/
.header {
  grid-area: header;
}

.section1 { 
  grid-area: section1;      
}
.section2 { 
  grid-area: section2; 
}
.section3 { 
  grid-area: section3; 
} 
.section4 { 
  grid-area: section4; 
} 
.section5 { 
  grid-area: section5; 
}

.footer {
  grid-area: footer;
}

body { 
  display: grid; 
  gap: 0px;
  grid-template:  
    'header'    70px  
    'section1' auto
    'section2' auto 
    'section4' auto    
    'section3' auto 
    'section5' auto
    'footer'  auto /
      100% ;
}

html {
  font-size: 90%; /*--movil layout font size --*/
}

/*------------ desktop layout----------- */
 @media  (min-width: 800px) {
  body { 
    display: grid; 
    grid-template:  
      'header header header header'    70px
      'section1 section1 section1 section1'   auto 
      'section2 section2 section2 section2' auto
      'section2 section2 section2 section2' auto
      'section2 section2 section2 section2' auto
      'section3 section3 section3 section4' auto
      'section5 section5 section5 section5' auto       
      'footer  footer footer footer'  auto   
        /  35%  15% 15% 35%  ;         
        /*--ancho de columnas   */
     }  

     html {
      font-size: 98%; 
      /*-------default font size --------*/
    }  
 }