.page-wrapper {
  display: grid;
  border-style: solid;
  border-color: black;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  background-image: url(canvas.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.intro {
  background: dodgerblue; opacity: .80;
  border-style: solid;
  border-color: black;
  grid-row: 1;
  grid-column: 1;
  padding: 2em;
  font-family: 'Oswald', sans-serif;
}

.intro a {
  color: whitesmoke;
  font-family: 'Oswald', sans-serif;
}

.intro a:hover {
  color: cyan;
}

.main {
  background: crimson; opacity: .80;
  border-style: solid;
  border-color: black;
  grid-row: span 2;
  grid-column: span 2;
  padding: 2em;
  font-family: 'Oswald', sans-serif;
}

.main a {
  color: whitesmoke;
  font-family: 'Oswald', sans-serif;
}

.main a:hover {
  color: lightpink;
}

p {
  font-family: 'Oswald', sans-serif;
  color: black;
}

.sidebar {
  border-style: solid;
  border-color: black;
  background: whitesmoke; opacity: .80;
  grid-row: 3;
  grid-column: span 3;
  padding: 2em;
  font-family: 'Oswald', sans-serif;
}

h1 {
  font-family: 'Oswald', sans-serif;
}

.sidebar a {
  color: crimson;
  font-family: 'Oswald', sans-serif;
}

.sidebar a:hover {
  color: dodgerblue;
}


@media screen and (max-width: 760px) {

 .page-wrapper {
    display: block;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-items: center;
 }
}