@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"		
                    "xat 	 	xat 	   announ-3"
	                "xat 	 	xat    	   repro"
                  	"announ-1 	announ-1   announ-4"
					"streamer 	streamer   fb-books"
	                "announ-2   announ-2   accoun"
					"footer     footer     footer";
}	
.box-content-0 {grid-area: xat;}
.box-content-1 {grid-area: streamer;}
.box-content-2 {grid-area:  repro;}
.box-content-3 {grid-area: fb-books;}
.box-content-4 {grid-area: accoun;}
.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"
                    "announ-1   announ-1   announ-1"
	                "streamer   streamer   streamer"
                    "announ-4   announ-4   announ-4"
                    "repro      repro      repro"
                    "announ-2   announ-2   announ-2"
                    "xat        xat        xat"
                    "accoun     accoun      accoun"
                    "announ-3   announ-3   announ-3"
                    "footer     footer     footer";
     }  
}