@media all and (min-width:801px){
*{box-sizing:border-box;
}
body {
	font-family: sans-serif;
	background-color:white;
	} 

	
.container {
	display: grid;
	width:min(95%, 70rem);
	grid-template-columns: 1fr 1fr 1fr;
	padding: 10px; 
	margin: auto;
	gap: 10px;
	grid-template-areas:'logo logo logo' 'navbar navbar navbar' 'title title title' 'gal gal gal'  'jos jos jos' 'footer footer footer';
	}

.logo{
	grid-area:logo;
	width:100%;}
	

.navbar{	
	grid-area:navbar;}
	
.title {
	text-align:center;
	font-size:24px;
	grid-area: title;}



.gal {
		grid-area:gal;
		margin:auto;
		width:100%;
		columns:3;

		padding:20px;
		}

	.gal p{
		text-align: center;
		color:#2d8077;
		}

	.gal img{
	  width: 100px;
	border-color: #ccc #aaa #aaa #ccc;
        border-image: none;
        border-radius: 0 0 0 0;
        border-style: solid;
        border-width: 10px 20px;
   	 margin: auto;
    	display: block;
	}
.gal div{display:inline-flex;
padding-bottom:10px;}

.jos {
	font-size:16px;
	text-align:center;
	grid-area:jos;
	}

.footer {
	font-size:16px;
	text-align: center;
	background-color: #2d8077;
	color: white;
	grid-area:footer;
	}
	
	.footer a{
		text-decoration: none;
		color:#eeeeee;}

	.footer a:hover{
		color:#ffbb00;}
}
@media all and (max-width:800px)
{
*{
	box-sizing:border-box;
	}

body {
	font-family: sans-serif;
	background-color:white;
	} 
	
.container {
	display: grid;
	width:min(95%, 70rem);
	grid-template-columns: 1fr;
	padding: 10px;
	margin: 15px;
	gap: 10px;
	grid-template-areas:'logo' 'navbar' 'title' 'gal' 'jos' 'footer';}

.logo{
	grid-area:logo;
	width:100%;}
	
.navbar{
	grid-area:navbar;}
	


.title {grid-area: title;
		text-align:center;
		font-size:24px; 
		color:  #2d8077}


.gal {
		grid-area:gal;
		margin:auto;
		columns:1;
		
		}

	.gal p{
		text-align: center;
		color:#2d8077;
		}

	.gal img{
	  width: 100px;
	border: 2px solid #ccc;
	border-radius:2px;
	padding:15px 10px; 
	background-color:#eee;
   	 margin: auto;
    	display: block;
	}

  		
.jos {
	font-size:16px;
	text-align:center;
	grid-area:jos;
	}

.footer {
	font-size:16px;
	text-align: center;
	background-color: #2d8077;
	color:white;
	grid-area:footer;
	}
	.footer a{text-decoration: none;
				color:#eeeeee;}
	.footer a:hover{color:#ffbb00;}

}