/* Basic reset */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* Grid container */
.page {
  min-height: 100vh;
  display: grid;

  /* Desktop layout */
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

/* Assign grid areas */
.header  { grid-area: header;  background: #2f6fed; color: white; padding: 1rem; }
.sidebar { grid-area: sidebar; background: #f0f2f5; padding: 1rem; }
.content { grid-area: content; padding: 1rem; }
.footer  { grid-area: footer;  background: #222; color: white; padding: 1rem; }

/* Tablet breakpoint */
@media (max-width: 900px) {
  .page {
    grid-template-columns: 200px 1fr;
  }
}

/* Mobile breakpoint */
@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;

    grid-template-areas:
      "header"
      "sidebar"
      "content"
      "footer";
  }
}