/* Define grid areas with ASCII art */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 20px;
}

/* Place items in areas */
header {
  grid-area: header;
}

aside {
  grid-area: sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

/* Dashboard layout */
.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 250px;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "nav nav nav"
    "sidebar main right"
    "footer footer footer";
  gap: 20px;
}

/* Mobile responsive areas */
.layout {
  display: grid;
  grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer";
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

/* Magazine-style layout */
.magazine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "hero hero hero"
    "article featured featured"
    "article sidebar sidebar"
    "footer footer footer";
  gap: 20px;
}

.magazine > .hero { grid-area: hero; }
.magazine > article { grid-area: article; }
.magazine > .featured { grid-area: featured; }
.magazine > aside { grid-area: sidebar; }
.magazine > footer { grid-area: footer; }