// ############################################################ // Main Grid // ############################################################

main {

// min-width: 285px;
// width: 100%;
// margin: 15px auto;
// border-top: 1px solid #eee;

display: grid;
grid-template-columns: auto;
grid-template-rows: min-content min-content min-content min-content min-content;
grid-column-gap: 0;
grid-row-gap: 0;
grid-template-areas:
  "main-header"
  "main-nav"
  "main-article"
  "main-sidebar"
  "main-footer";

}

// ============================================================ // Main Grid Areas // ============================================================

main>header {

grid-area: main-header;

margin-bottom: 4rem;

&>span {

  display: block;

  &>hr {
    width: 1rem;
    margin: 4rem auto 4rem 0;
    border: 0;
    text-shadow: unset;
    border-bottom: 1px solid #000;
  }
}

}

main>nav {

grid-area: main-nav;

}

main>article {

grid-area: main-article;

margin-bottom: 4rem;

}

main-sidebar {

grid-area: main-sidebar;

section {
  ul {
    list-style: none;
  }
}

}

main>footer {

grid-area: main-footer;

}

// ============================================================ // Main Grid Mixins // ============================================================

// ———————————————————— // Default // ———————————————————— @mixin main-default() {}

// ———————————————————— // 15px * 27 = 810px width // ———————————————————— @mixin main-810px() {

main {
  grid-template-columns: auto 255px;
  grid-template-rows: min-content min-content min-content;
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-areas:
    "main-header main-nav"
    "main-article main-sidebar"
    "main-article main-footer"
  ;
}

#main-sidebar {
  padding-top: 15px;

  h3 {
    margin-bottom: 4rem;
  }
}

}