index.scss

$red: #ffd3d3;
$blue: #caecff;
$grey: #f0f0f0;

html, body {
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, sans-serif;
}

#header h1 {
  margin: 0;
}

.container {
  max-width: map-get($breakpoints, screen);
  margin: auto;
}

.page-grid {
  display: grid;
  grid-auto-rows: minmax(75px, auto); 
}

#header {
  background: $red;
  padding: 1rem;
  grid-row: 1 / span 1;
}

#content {
  grid-row: 2 / span 1;
}

@include respond-above(screen){
  #content {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-auto-rows: minmax(600px, auto);

    .sidebar {
      background: $grey;
      grid-column: 1 / span 1;
    }

    .main {
      padding: 1rem;
      grid-column: 2 / span 1;
    }
  }
}

@include respond-below(screen){ 
  #content {
    padding: 1rem;
  }
}

#footer {
  background: $blue;
  padding: 1rem;
  grid-row: 3 / span 1;
}