.wrapper {
  max-width: 900px;
  min-width: 240px;
}

@supports (display: grid) {

  @media (min-width: 800px) {

    .wrapper {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto;
      grid-template-areas: 
        "header           header"
        "libraries        launcher"
        "download-info    download-info"
        "download         download"
        "extras           extras"
        "news             news"
        "news-one         news-two"
        "features         features"
        "screenshots      screenshots"
        "videos           videos"
        "footer           footer";
      width: 98%;
      margin: 2em auto;
      margin-top: 3em;
    }

    .header {
      grid-area: header;
      justify-self: stretch;
    }

    .libraries {
      grid-area: libraries;
      justify-self: stretch;
    }

    .launcher {
      grid-area: launcher;
      justify-self: stretch;
    }

    .download {
      grid-area: download;
      justify-self: stretch;
    }

    .download-info {
      grid-area: download-info;
      justify-self: stretch;
    }

    .extras {
      grid-area: extras;
      justify-self: stretch;
    }

    .news {
      grid-area: news;
      justify-self: stretch;
    }

    .news-one {
      grid-area: news-one;
      justify-self: stretch;
    }

    .news-two {
      grid-area: news-two;
      justify-self: stretch;
    }

    .features {
      grid-area: features;
      justify-self: stretch;
    }

    .screenshots {
      grid-area: screenshots;
      justify-self: stretch;
    }

    .videos {
      grid-area: videos;
      justify-self: stretch;
    }

    .footer {
      grid-area: footer;
      justify-self: stretch;
    }
  }
}