body {
	align-content: center;
}
#Canvas {
    background-color: White;
    width: 420px;
    height: 100px;
    border: groove;
}

#Extrait {
    width: 250px;
       
}

input {
    width: 80px;
    text-align: center;
}

#info3 td{
    width: 220px;
    border: groove;
	text-align: center;

}
#info3 {
    border-collapse: collapse;
}

#info2 td:hover {background-color: #f5f5f5;}

.images {
	width: 420px;
}



@media screen and (min-width: 800px) {
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(70px, auto);
}

.zero {
  grid-column: 1/3;
  grid-row: 1;
  border: solid;
}
.one {
  grid-column: 1;
  grid-row: 2;
  border: solid;
}
.two { 
  grid-column: 2;
  grid-row: 2;
  border: solid;
}
.three {
  grid-column: 1;
  grid-row: 3 ;
  border: solid;
}
.four {
  grid-column: 2;
  grid-row: 3;
  border: solid;
  
}
}