.wrapper {
    display: grid;
    gap: 16px;
    grid-template:
      "header header header"
      "left-sidebar main right-sidebar"
      "footer footer footer"
      / 1fr 3fr 1.5fr;
      justify-content: space-around;
      justify-items: center;
      align-content: stretch;
      margin: 0 auto;
  }

    header { grid-area: header; }
    aside .left-sidebar { grid-area: left-sidebar; }
    aside .right-sidebar { grid-area: right-sidebar; }
    main { grid-area: main; }
    footer { grid-area: footer; }

                                                                                                            

    @media (max-width: 1060px) {
        :root {font-size: 13px;}
        .wrapper {
            grid-template:
            "header header"
            "left-sidebar main"
            "right-sidebar right-sidebar"
            "footer footer"
            / 1fr;
        }
    }
    /* tablet breakpoint */
@media (min-width:768px) {

}

    @media (max-width: 800px) {
        :root {font-size: 11px;}

        .wrapper {
            grid-template:
            "header"
            "main"
            "left-sidebar"
            "right-sidebar"
            "footer"
            / 1fr;
        }
      }

    @media (max-width: 800px)  {
        .wrapper {
            max-width: 100%;
            overflow-x: none;
        }
                .wrapper div {
            max-width: 90vw;
        }
        main {
            width: 80vw;
        }
        .left-sidebar, .right-sidebar {
            max-width: 90vw;
    } 
}
@media (min-width: 100px) {
    main > div {
        margin: 0 auto;
    }
    main {
        align-content: center;
    }

}