@import url("default.css");

#grapper { 
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(9, auto);
grid-template-areas:
	                "head 	    head 	   head"
					"nave 	 	nave       nave"
					"slider 	slider     slider"	
    
                    "nosotros 	nosotros   announ-1"
	                "nosotros 	nosotros   repro"
                  	"proposito  proposito  announ-2"
					"video      video      announ-3"
                    "video      video      fb-books"
    
					"footer     footer     footer";
}	
.box-content-0 {grid-area: nosotros;}
.box-content-1 {grid-area: proposito;}
.box-content-2 {grid-area:  repro;}
.box-content-3 {grid-area: video;}
.box-content-4 {grid-area: fb-books;}
.announcement-1 {grid-area:  announ-1;} /*banner 503px*/
.announcement-2 {grid-area:  announ-2;} /*Versiculo*/
.announcement-3 {grid-area:  announ-3;}  /*Tunein*/
.announcement-4 {grid-area:  announ-4;}  /*Dispositivos*/
 
.box-content-0,
.box-content-1,
.box-content-2,
.box-content-3,
.box-content-4,
.announcement-1,
.announcement-2,
.announcement-3,
.announcement-4 {margin: 0px 6px;}

@media screen and (max-width:880px)
{
    #grapper { 
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(12, auto);
    grid-template-areas:
	                "head 	    head 	   head"
					"nave 	 	nave       nave"
					"slider 	slider     slider"
        
                    "nosotros    nosotros    nosotros"
	                "proposito   proposito   proposito"
                    "announ-1    announ-1    announ-1"
                    "video       video       video"                 
                    "repro       repro       repro"
                    "announ-2    announ-2    announ-2"
                    "fb-books    fb-books    fb-books"
                    "announ-3    announ-3    announ-3"
        
                    "footer     footer     footer";
     }  
    
    .box-content-2{display:hidden;}
}