.grid
{
text-align: center;
vertical-align: super;
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"one"
"two"
"three"
"four"
"five"
"six"
"seven"
"eight"
"nine";
}

.one
{
grid-area: one;
}

.two
{
grid-area: two;
}

.three
{
grid-area: three;
}

.four
{
grid-area: four;
}

.five
{
grid-area: five;
}

.six
{
grid-area: six;
}

.seven
{
grid-area: seven;
}

.eight
{
grid-area: eight;
}

.nine
{
grid-area: nine;
}

.intro h2
{
font-size: 1.2em;
}

@media screen and (min-width: 900px) 
{

.intro h2
{
font-size: 2em;
}

.grid
{
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"one five two four"
"three six seven seven"
"nine nine eight .";
}

.seven
{
grid-area: seven;
padding-top: 40px;
}

}

/*
div :nth-child(odd)
{
background-color: red;
}

div :nth-child(even)
{
background-color: green;
}
*/