/*-------grid elements-------------*/
header {
  grid-area: header;
}
#home { 
  grid-area: home;      
}
#aside1 { 
  grid-area: aside1;      
}
#aside2 { 
  grid-area: aside2; 
}
#aside22 { 
  grid-area: aside22; 
}

#aside3 { 
  grid-area: aside3; 
} 
 #aside4 { 
  grid-area: aside4; 
} 
#aside5 { 
  grid-area: aside5; 
}
footer {
  grid-area: footer;
}

body { 
  display: grid; 
  gap: 0px;
  grid-template:  
    'header'    73px
    'home'    auto
    'aside1' auto
    'aside2' auto 
    'aside22' auto 
    'aside3' auto 
    'aside4' auto    
    'aside5' auto
    'footer'  100px /
      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 aside1 aside1'   auto  
      'aside2 aside2 aside2' auto  
      'aside22 aside22 aside22' auto     
      'aside3 aside3 aside3' auto
      'aside4 aside4 aside4' auto
      'aside5 aside5 aside5'  2fr         
      'footer  footer footer'   100px   
        /  62%  12% auto  ; /*--ancho de columnas   */

      }

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

/*------------ desktop layout----------- */
 @media  (min-width: 1000px) {

  body { 
    display: grid; 

    grid-template:  
      'header header header'    73px
      'home aside1 aside1'   auto  
      'aside22 aside22 aside2' auto      
      'aside3 aside3 aside3' auto
      'aside4 aside4 aside4' auto
      'aside5 aside5 aside5'  2fr         
      'footer  footer footer'   100px   
        /  62%  12% auto  ; /*--ancho de columnas   */


     }  

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

 }