.masthead {
    grid-area: masthead;
}
.page-head {
    grid-area: page_head;
}
.content {
    grid-area: content;
}
.main-nav {
    grid-area: nav;
}
.main-nav menu {
    list-style-type: none;
    padding-left: 0;
}
.main-nav li {
    font-size: 120%;
}
.main-nav a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-weight: bold;
    padding: 0 3px;
}
.sidebar {
    grid-area: sidebar;
    background-color: bisque;
}
.ad {
    grid-area: ad;
}
.main-footer {
    grid-area: footer;
}
.ack {
    grid-area: ack;
}

.wrapper {
    display: grid;
    gap: 20px;
    grid-template-areas:
        "masthead"
        "page_head"
        "logo"
        "header"
        "nav"
        "sidebar"
        "content"
        "ad"
        "footer"
        "ack";
}

@media (min-width: 700px) {
    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-areas:
            "masthead   page_head"
            "nav        nav"
            "sidebar    content"
            "ack        content"
            "ad         footer";
    }
    nav ul {
        display: flex;
        justify-content: space-between;
    }
}

@media (min-width: 1080px) {
    .wrapper {
      grid-template-columns: 1fr 3fr 1fr;
      grid-template-areas:
        "masthead   page_head   logo"
        "nav        content     sidebar"
        "ad         footer      ack";
    }
    nav ul {
      flex-direction: column;
    }
  }