section {
display:grid;
grid-template-rows: 1fr;
padding: 0 10px;
}
 @media all and (min-width: 600px) { 
 * {border:1px solid purple;}
nav ul{
display:flex;
justify-content: center;
}
nav li{
flex-grow:1;
flex:1;
}
 section {
 grid-template-columns: 1fr 1fr 1fr;
 }

header, footer {
display:grid;
grid-column: 1 / span 3;
 }
 #instructions {grid-column: 2 / span 2;
 display:grid;}
 }
  @media all and (max-width: 599px) {
  *{border-bottom: 3px solid purple; padding: 10px;}
  }
  img {width:100%;}
 
nav a{
text-decoration :none;
background:red;
color:white;
padding:10px 20px;
margin:2px;
display: block;
}
nav a:hover{
background:green;
}
nav li{
list-style: none;
}
article :nth-child(odd){
background:azure}
article :nth-child(even){
background:lightyellow}
#empty,#finishing{
display:flex;
background:azure;
}