body {
  height: 100%;
  color: var(--clr-foreground);
  background-color: var(--clr-background);
  display: grid;
  grid-template-columns: auto 1268px auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "left header right"
    "left main right"
    "left footer right";

  @media (max-width: 700px) {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto auto auto;
  grid-template-areas: 
    "header"
    "main"
    "left"
    "right"
    "footer";
  }
}

body > main { 
  grid-area: main; 
  margin-bottom: var(--md);

  @media (max-width: 700px) { 
    padding: var(--xxs); 
  }
}

body > header { 
  grid-area: header; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: var(--xxs) var(--md) var(--xs) var(--md);
  background-color: var(--clr-muted);
}

body > footer { 
  grid-area: footer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: var(--xxs) var(--md) var(--xs) var(--md);
  background-color: var(--clr-muted);
}

body > header > nav > ul { 
  display: flex; 
  gap: 0.5ch; 
  align-items: center;
  list-style: none;
  font-size: var(--sm);
}

body > header > nav { display: flex; gap: var(--xxs); align-items: center; } 
body > footer > ul { 
  display: flex; 
  gap: 0.5ch; 
  align-items: center; 
  border-top: 1px solid var(--clr-secondary); 
  width: 100%; 
  justify-content: center;
  padding-top: var(--sm);
}
nav > ul > li:nth-child(1)::before, footer > ul > li:nth-child(1)::before { content: ""; }
footer > ul > li:nth-child(2)::before { content: " | "; }
nav > ul > li::before , footer > ul > li::before { content: "• "; }
li.h-entry::before { content: ""; }

/* CONTENT */

body > main > article > header { margin-bottom: var(--lg); }
body > main > article > footer { margin-top: var(--lg); }
body > main > article > footer > ul { list-style: none; display: flex; gap: 1ch;}
body > main > article > footer > ul > li::before { content: "#" !important; }
body > main > article > footer > .p-author { margin-top: var(--md); }
body > main > article > footer > .p-author::before { content: "//"; }

body > main > ul.h-feed { margin: auto; }
body > main > ul.h-feed > li { padding-bottom: var(--xxl); border-bottom: 1px solid var(--clr-secondary); }
body > main > ul { 
  list-style: none; 
  display: flex;
  flex-direction: column;
  gap: var(--md);
}

body > main > article > footer > nav { 
  display: flex; 
  justify-content: space-between; 
  padding: var(--md) 0 
}