footer{
	padding: 70px 0;
	background-color: var(--secondary-color)
}


footer h2{
	font-size: 50px;
	text-align: center;
}


.grid_container{
	margin: 60px auto;
	width: 1500px;
	max-width: 90%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 300px 300px;
	gap: 15px;
	grid-template-areas: 
	"item1 item1 item2 item3"
	"item4 item5 item5 item3";
}   


.grid_item{
	background-color: var(--light-secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px;
	gap: 50px;
}


.grid_item img{
	height: 150px,
	width: 150px;
	border-radius: 30px;
}


#item1{
	grid-area: item1;

}


#item2{
	grid-area: item2;
	flex-direction: column;
	gap: 10px;

}


#item3{
	grid-area: item3;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;

}


#item4{
	grid-area: item4;
	flex-direction: column;
	gap: 10px;

}


#item5{
	grid-area: item5;

}


@media(max-width: 1300px){
	.grid_container{
	    grid-template-columns: 1fr 1fr 1fr;
	    grid-template-rows: 300px 300px 300px;
	    
	    grid-template-areas: 
	    "item1 item1 item2 "
	    "item4 item5 item5 "
	    "item3 item3 item3 ";
	}
}


@media(max-width: 900px){
	.grid_container{
	    grid-template-columns: 1fr 1fr;
	    grid-template-rows: auto auto auto auto;
	    
	    grid-template-areas: 
	    "item1 item1"
	    "item5 item5"
	    "item2 item4"
	    "item3 item3";
	}
}


@media(max-width: 650px){
	footer h2{
		font-size: 9vw;
	}

	.grid_item{
		padding: 20px;
	}

	.grid_item img{
		height: 100px;
		width: 100px;
	}

	.grid_item h3{
		font-size: 24px;
	}
}