style.css

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
:root {
    --main-bg-color: #01426A;
    --secondary-bg-color: #F2F2F2;
    --main-text-color: #FFF;
    --secondary-text-color: #706666;
}

/* * {
    border: 1px solid red;
} */

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: "Lato";
    color: var(--main-text-color);
  }

  .header {
    grid-area: header;
    background-color: var(--main-bg-color);
  }

  .sidebar {
    grid-area: sidebar;
    background-color: var(--secondary-bg-color);
    color: var(--secondary-text-color);
    overflow-y: auto;

  }

  .map {
    grid-area: map;
  }

  .wrapper {
    display: grid;
    grid-template-rows: 60px  40% auto;
    grid-template-areas:
     "header"
     "sidebar"
     "map";
    width: 100vw;
    height: 100vh;
  }

  .box {
    padding: 10px;
    font-size: 20px; 
  }

  @media only screen and (min-width: 720px)  {
    .wrapper {
      grid-template-columns: 30% auto;
      grid-template-rows: 60px  auto;
      grid-template-areas:
        "header   header"
        "sidebar  map";
      }
    }