@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;    
}

.plantilla{
    width: 95%;
    max-width: 1500px;
    margin: auto;
    grid-gap:5px;
    grid-template-columns: auto;
    grid-template-rows: 10em 70em 20em;
    grid-template-areas: "cab"
                         "principal"
                         "pie_pag"; 
}

.cab{
    display: grid;
    grid-template-columns: 20% 65% 15%;
    grid-template-rows: 10em;
    grid-template-areas: "id_site slogan id_page";
} 
  

.principal{
    display: grid;
    grid-template-columns: 70% 20%;
    grid-template-rows: 70em;
    grid-template-areas: "centro col_der";
}


.pie_pag {
    display:grid;
    grid-template-columns: 25% 1fr 25% 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "ft_uno ft_dos ft_tres ft_cuatro";
}


@media screen and (max-width: 480px){
    
    .plantilla{
        width: 100%;
        max-width: 500px;
        margin: auto;
        display: grid;
        grid-gap:5px;
        grid-template-columns: 1fr;
        grid-template-rows: 550px 80px auto auto 1fr auto;    
        grid-template-areas: "cab"
                            "post_cb"
                            "principal"
                            "col_der"
                            "mid_inf"
                            "promos_fin"
                            "pie_pag"; 
    }
    
    .cab{
        grid-template-columns: auto;
        grid-template-rows: 180px 150px 100px;
        grid-template-areas: "cb_logo"
                             "cb_slogan"
                             "cb_contacto";
    } 

    .cb_logo{
        margin: 10px auto;
    }

    .cb_slogan{
        font-size: 1em;
        line-height: 1.2em;

    }

    .principal{
        display: grid;
        grid-template-columns:auto ;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 
                            "col_der"
                            "centro"
                            "col_izq";
        }
        
   
    .pie_pag {
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: "ft_uno"
                              "ft_dos"
                              "ft_tres"
                              "ft_cuatro";
        }
    
        main{
            display:flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: auto;
        }
         
    }
    
    @media (min-width: 1200px) {
        breakpoint{
        max-width: 100%;
        display: inline-block;
    }    
    
    @media (min-width: 420px) {
        breakpoint {
            max-width: 48%;
        }
    }

    @media (min-width: 760px) {
        breakpoint {
            max-width: 44%;
        }
    }