* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  background-color: #b7dcee;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.container {
  display: grid;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 10px;
}

div{
  border: solid 1px;
  padding: 10px;
  width: 100%;
}

.logo, .menu, .commercial, .news, .review, .blogg {
  background-color: #9fd3e0;
}

.news { background-color: #9cc6da; }
.review { background-color: #8abfd0; }
.blogg { background-color: #a7d6c1; }

@media only screen and (max-width: 649px){
  .container{
    grid-template-columns: 1fr;
    grid-template-areas: 
      "logo"
      "commercial"
      "news1"
      "news2"
      "review1"
      "review2"
      "blogg1"
      "blogg2";
  }

  .burger{
    display: block;
  }

  .menu{
    display: none;
  }

  .logo {grid-area: logo;}
  .commercial { grid-area: commercial; }
  .news:nth-of-type(1) { grid-area: news1; }
  .news:nth-of-type(2) { grid-area: news2; }
  .review:nth-of-type(1) { grid-area: review1; }
  .review:nth-of-type(2) { grid-area: review2; }
  .blogg:nth-of-type(1) { grid-area: blogg1; }
  .blogg:nth-of-type(2) { grid-area: blogg2; }
}

@media only screen and (min-width: 650px) 
{
  .container 
  {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo logo"
      "menu menu"
      "commercial commercial"
      "news1 news2"
      "review1 review2"
      "blogg1 blogg2";
  }

  .burger 
  {
    display: none;
  }

  .menu {
    display: flex;
    justify-content: center;
    gap: 10px;
    background-color: #9fd3e0;
    padding: 10px;
  }

  .logo {grid-area: logo;}
  .menu {grid-area: menu;}
  .commercial { grid-area: commercial; }
  .news:nth-of-type(1) { grid-area: news1; }
  .news:nth-of-type(2) { grid-area: news2; }
  .review:nth-of-type(1) { grid-area: review1; }
  .review:nth-of-type(2) { grid-area: review2; }
  .blogg:nth-of-type(1) { grid-area: blogg1; }
  .blogg:nth-of-type(2) { grid-area: blogg2; }
}

@media only screen and (min-width: 1030px) {
  .container {
    grid-template-columns: 1fr 1fr 300px;
    grid-template-areas:
      "logo logo logo"
      "menu menu menu"
      "news1 news2 commercial"
      "review1 review2 commercial"
      "blogg1 blogg2 commercial";
  }

  .burger{
    display: none;
  }

  .menu{
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .logo {grid-area: logo;}
  .menu {grid-area: menu;}
  .commercial { grid-area: commercial; }
  .news:nth-of-type(1) { grid-area: news1; }
  .news:nth-of-type(2) { grid-area: news2;}
  .review:nth-of-type(1) { grid-area: review1; }
  .review:nth-of-type(2) { grid-area: review2; }
  .blogg:nth-of-type(1) { grid-area: blogg1; }
  .blogg:nth-of-type(2) { grid-area: blogg2 ; }

}