.grid-areas-site {
  grid-template-areas:
    "header header header"
    "main main main"
    "footer footer footer";
}

@media (min-width: 1024px) {
  .grid-areas-site {
    grid-template-areas:
      "sidebar header header"
      "sidebar main main"
      "sidebar footer footer";
  }
}

.grid-in-header {
  grid-area: header;
}

.grid-in-sidebar {
  grid-area: sidebar;
}

.grid-in-main {
  grid-area: main;
}

.grid-in-footer {
  grid-area: footer;
}