@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: 12em 2em 110em 25em 15em 15em;
    grid-template-areas: "cab"
                         "post_cb"
                         "principal"
                         "mid_inf"
                         "promos_fin"
                         "pie_pag"; 
}

.cab{
	display: grid;
    grid-template-columns: 25% 70%;
    grid-template-rows: 3em 7em;
    grid-template-areas: "cb_contacto  cb_contacto"
                         "cb_logo      cb_slogan";
} 
  

.principal{
	display: grid;
    grid-template-columns: 15em auto 15em;
    grid-template-rows: 35em;
    grid-template-areas:
                         "col_izq centro col_der";
}

.mid_inf{
    grid-template-columns: auto;
    grid-template-rows: 40em 65em;
    grid-template-areas: "pol_pub"
                         "generos";
}   

.promos_fin{
	display: grid;
    column-gap: 20px;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: auto;
    grid-template-areas: "promo1 promo2 promo3";
}

.pie_pag {
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    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: 100%;
        grid-template-rows: 550px 80px auto auto 1fr auto;    
        grid-template-areas: "cab"
                            "post_cb"
                            "principal"
                            "mid_inf"
                            "promos_fin"
                            "pie_pag"; 
    }
    
    .cab{
        grid-template-columns: auto;
        grid-template-rows: 180px 150px 100px;
        grid-template-areas: "cb_contacto"
                             "cb_logo"
                             "cb_slogan";
    } 

    .cb_logo{
        margin: 10px auto;
    }

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

    }

    .principal{
        grid-template-columns:auto ;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 
                            "col_izq"
                            "centro"
                            "col_der";
        }
        
   
    .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%;
    	}    
	}
    
    @media (min-width: 760px) {
        breakpoint {
            max-width: 44%;
        }
    }

	@media (min-width: 420px) {
        breakpoint {
            max-width: 40%;
        }
    }