@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;531;700;900&display=swap');
* {
    box-sizing: border-box;
}
main {
    display: grid;
    height: 100vh;
    gap: 10px;

    /*nombrado de las lineas*/
    grid-template-columns:
        [lateral-start] 1fr
        /*la misma línea es el final del lateral y el inicio contenido*/
        [lateral-end contenido-start] 2fr

        /*declaración última línea del grid*/
        [contenido-end];
    /*no tienen unidad detrás al ser la última*/

     grid-template-rows: 
     /*igual en las filas*/
        [header-start] 1fr
        [header-end contenido-start] 3fr
        [contenido-end footer-start] 1fr
        [footer-end];  

    
}
 /*Para todo lo demás, mastercard*/

 main > * {
     font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif;
     background-color: #222831;
     color: #00adb5;
     font-size: 175%;
     font-weight: 900;
     display: flex;
     justify-content: center;
     align-items: center;

 }

 /*posicionamiento*/
 
 header {
     grid-column: lateral-start / contenido-end;
 }
 footer {
     grid-column: contenido-start / contenido-end;
 }
 aside {
     grid-row: contenido-start / footer-end ;
 }
 /*queries*/
 @media all and (max-width: 750px) {

    main {
        grid-template-columns: 
            [contenido-start] 2fr
            [contenido-end lateral-start] 1fr
            [lateral-end];
    }
    header {
        grid-column: contenido-start / lateral-end;
    }
    aside {
        grid-row: contenido-start / footer-start;
        grid-column: lateral-start / lateral-end;
    }
    article {
        grid-column: contenido-start;
    }
    footer {
        grid-column: contenido-start / lateral-end;
    }
 }

 @media all and (max-width:600px) {
    main {
    grid-template-rows: 
    [header-start] 1fr
    [header-end contenido-start] 3fr
    [contenido-end sidebar-start] 1fr
    [sidebar-end footer-start] 1fr
    [footer-end];  
    }
     article{
         grid-column: contenido-start /lateral-end;
         grid-row: contenido-start / contenido-end;
     }

     aside {
         grid-column: contenido-start /lateral-end;
         grid-row: sidebar-start / sidebar-end;
     }
 }
 @media (max-width: 500px){
     main > * {
         font-size: 125%;
         font-weight: 700;
     }
 }