body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 20px 20px 1fr;
    margin:0;
    background-color: #F3EDD6;
}

#top {
    background-color: #F5E8BC;
    grid-column: 1 / -1;
    grid-row: 1;
}

#corner {
    background-color: #7F0000;
    grid-row: 1;
    grid-column: 1;
}
#lambda {
    grid-row: -2;
    grid-column: 1;
    align-self: end;
}

#content {
    grid-row: 3 / -1;
    grid-column: 1 / -1;
}

.square {
	width: 20px;
	height: 20px;
}
#square1 {
	background: #BF0000;
	grid-row: 1;
	grid-column: 1;
}
				
#square2 {
	background: #FF0000;
	grid-row-start: 2;
	grid-column-start: 2;
			      
}

@media (min-width: 600px) {
    body{
	grid-template-rows: 100px 100px 1fr;
    }
    #contra {
	background-color: #7F0000;
	grid-row-start: 2;
	grid-column-start: 2;
    }
    #left {
	background-color: #F5E8BC;
	grid-row: 1 / -1;
	grid-column: 1;
    }
    #content {
	grid-column: 3 / -1;
    }
    .square {
	width: 100px;
	height: 100px;
    }
    #lambda {
	grid-column: 2;
	padding: 2rem;
    }
}