*{
  box-sizing: border-box;
}

.header,
.content,
.sidebar,
.box-1,
.box-2,
.box-3,
.box-4,
.footer {
  border: 1px #ccc solid;
  padding: 0.5rem;
  background: #f4f4f4;
}




.container {
  display: grid;
  grid-template-areas: 
    'header header header'
    'content content sidebar'
    'box-1 box-2 box-3'
    'box-4 box-4 box-4'
    'footer footer footer';
  grid-gap: 1rem;
}

.header {
  grid-area: header;
  text-align: center;
}
.content {grid-area: content;}
.sidebar {grid-area: sidebar;}
.box-1 {grid-area: box-1;}
.box-2 {grid-area: box-2;}
.box-3 {grid-area: box-3;}
.box-4 {grid-area: box-4;}
.footer {
  grid-area: footer;
  text-align: center;
}




@media (max-width: 768px) {
  .container {
    grid-template-areas: 
      'header header'
      'content sidebar'
      'box-1 box-2'
      'box-3 box-3'
      'box-4 box-4'
      'footer footer';
    
    grid-template-columns: 1.4fr 1fr;
    }
}

@media (max-width: 500px) {
  .container {
    grid-template-areas: 
      'header header'
      'content content' 
      'sidebar sidebar'
      'box-1 box-2'
      'box-3 box-3'
      'box-4 box-4'
      'footer footer';
    grid-template-columns: 1fr 1fr;
  }

  .sidebar {
    grid-row: 7 /span 7;
  }

  .footer {
    grid-row: 14 /span 5;
  }
  
}