.parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.div1 { 
	grid-area: 1 / 1 / 2 / 2; 
	background-color:#D2D1D1;
	margin:0 5 5 0;
	padding:10px;
}
.div1:hover {
	transition: all 0.3s ease-out;
	transform: scale(0.95, 0.95);
	background:#B0B0B0;
}
.div2 { 
	grid-area: 1 / 2 / 3 / 3;
	background-color:#D2D1D1;
	margin:0 0 5 0;
	padding:10px;
}
.div2:hover {
	transition: all 0.3s ease-out;
	transform: scale(0.95, 0.95);
	background:#B0B0B0;
}
.div3 { 
	grid-area: 2 / 1 / 3 / 2; 
	background-color:#D2D1D1;
	margin:0 5 5 0;
	padding:20px;
}
.div3:hover {
	transition: all 0.3s ease-out;
	transform: scale(0.95, 0.95);
	background:#B0B0B0;
}


@media (max-width: 830px) {
	.parent {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	
	.div1 { grid-area: 1 / 1 / 2 / 2; }
	.div2 { grid-area: 2 / 1 / 3 / 2; }
	.div3 { display:none;}
}
@media screen and (max-width: 630px) {
	.parent {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	
	.div1 { grid-area: 1 / 1 / 2 / 2; }
	.div2 { grid-area: 2 / 1 / 3 / 2; }
	.div3 {display:none;}
}