.wrapper {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "navbar"
        "sidebar2"
        "content"
        "footer";
      grid-gap: 1em;
      max-width: 100%;
      margin: auto;

    }

    .header {
      grid-area: header;
    }

    .navbar {
      grid-area: navbar;
    }

    .content {
      grid-area: content;
    }

    .sidebar2 {
      grid-area: sidebar2;
    }

    .footer {
      grid-area: footer;
    }

    @media only screen and (min-width: 500px) {
      .wrapper {
        grid-template-columns: 1fr 3fr;
        /* Two column layout */
        grid-template-areas:
          "header"
          "navbar"
          "content"
          "sidebar2"
          "footer footer";
      }
    }

    @media only screen and (min-width: 600px) {
      .wrapper {
        grid-template-columns: 1fr 3fr 1fr;
        /* Three column layout with main content wider */
        grid-template-areas:
          "header header header"
          "navbar content sidebar2"
          "footer footer footer";
        max-width: 600px;
      }
    }

    .box {
      font-size: 80%;
    }

    @media only screen and (max-width: 500px) {
      .card {
        width: 100%;
      }
    }