.wrapper {
    display: grid;
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: 75px auto auto  auto auto auto auto auto 50px;
    grid-template-areas: 
        "a a b b b b b b b"
        "c c d d d d d d d"
        "c c d d d d d d d"
        "c c d d d d d d d"
        "c c d d d d d d d"
        "c c d d d d d d d"
        "c c d d d d d d d"
        "c c d d d d d d d"
        "c c e e e e e e e";
}

.logo{
    display: grid;
    grid-area: a;
    background-color: #718729;
    color: #ffffff;
    font-size: 40px;
    justify-items: center;
    align-items: center;

}
.header{
    display: grid;
    grid-area: b;
    background-color: #718729;
    color: #ffffff;
    font-size: 40px;
    justify-items: center;
    align-items: center;
}
.nav{
    display: grid;
    grid-area: c;
    background-color: #298752;
    color: #ffffff;
    font-size: 25px;
    justify-items: center;  

    ul {
        list-style: none;
    }
    a {
        text-decoration:none;
    }
    a:hover {
        background-color: #772987;
    }
}
.nav ul li a{
    list-style-type: none;
    display: inline-grid;
    color: #ffffff;
}

.content{
    display: grid;
    grid-area: d;
    background-color: #772987;
    color: #ffffff;
    font-size: 20px;
}
.footer{
    display: grid;
    grid-area: e;
    background-color: #718729;
    color: #ffffff;
    justify-items: center;
    align-items: center;

}

@media screen and (max-width: 480px) {
    .wrapper {
/*      grid-template-columns: 1fr 1fr;*/
      display: grid;
      grid-template-columns: repeat(2, 1fr);  
      grid-template-areas:
        "a a"
        "b b"
        "c c"
        "d d"
        "e e";
/*        "g g";*/
    }
    .nav{
/*        grid-area: c;*/
        justify-content:center;
        display: inline-grid;
    }
    .nav ul li {
      justify-content: center;
      display: inline-grid;
    }
  }