/*-------grid elements-------------*/
.header {
  grid-area: header;
}
.home { 
  grid-area: home;      
}
.section1 { 
  grid-area: section1;      
}
.section2 { 
  grid-area: section2; 
}
.section3 { 
  grid-area: section3; 
} 
.section4 { 
  grid-area: section4; 
} 
.section5 { 
  grid-area: section5; 
}
.section6 { 
  grid-area: section6; 
}
.section7 { 
  grid-area: section7; 
}
.section8 { 
  grid-area: section8; 
}
.section9 { 
  grid-area: section9; 
}
.footer {
  grid-area: footer;
}

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

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

/*------------- tablet layout--------------- */@media  (min-width: 750px) {
  /* body { 
    display: grid; 
    grid-template:  
      'header header header'    73px
      'home section1 section1'   auto  
      'section2 section2 section2' auto  
      'section3 section3 section3' auto
      'section4 section4 section4' auto
      'section5 section5 section5'  2fr         
      'footer  footer footer'   100px   
        /  62%  12% auto  ; 

      } */

      /*-------tablet font size --------*/
      /* html {
        font-size: 95%; 
      } */
      
}

/*------------ desktop layout----------- */
 @media  (min-width: 800px) {
  body { 
    display: grid; 
    grid-template:  
      'header header header header'    70px
      'home home section1 section1'   auto  
      'section2 section2 section2 section2' auto
      'section3 section3 section3 section3' auto
      'section4 section4 section4 section5' auto
      'section6 section6 section6 section7' auto
      'section8 section8 section8 section8'  auto   
      'section9 section9 section9 section9'  auto         

      'footer  footer footer footer'  auto   
        /  35%  15% 15% 35%  ;         
        /*--ancho de columnas   */
     }  

     html {
      font-size: 98%; 

      /*-------default font size --------*/
    }  
 }