styles.css

.header { 
  grid-area: header; 
}

.header > a { 
  text-decoration: none;
  color: black;
  font-family: monospace;
  font-size: x-large;
}

.main { 
        grid-area: main;
        min-height: calc(100vh - 220px);
      }

.right { grid-area: right; }
.footer { grid-area: footer; }

.grid {
    display: grid;
    grid-template-areas:
      'header'
      'main'
      'right'
      'footer';
    grid-gap: 10px;
    padding: 10px;
    text-size-adjust: auto;
    color: black;
    font-family: sans-serif;
}

@media only screen and (min-width: 1024px) and (max-resolution: 200dpi) {
  .grid {
    grid-template-areas:
    'header header header header header header header'
    'main main main main right right right'
    'footer footer footer footer footer footer footer';
    font-size: large;
  }

  .main { 
    width: 80%;
  }
}