// ############################################################ // Article Grid // ############################################################

article {

display: grid;
grid-template-columns: minmax(285px, 450px);
grid-template-rows: min-content min-content min-content min-content auto min-content min-content;
grid-column-gap: 0;
grid-row-gap: 0;
grid-template-areas:
  "article-figure"
  "article-header"
  "article-meta"
  "article-content"
  "article-nav"
  "article-aside"
  "article-footer"
;

}

// ============================================================ // Article Grid Areas // ============================================================

article>figure {

grid-area: article-figure;

min-width: 240px;
max-width: 750px;

margin-bottom: 2rem;

display: flex;
flex-direction: column;
justify-content: flex-start;

&>a {

  padding-bottom: unset;
  border-bottom: unset;

  &>canvas {
    background: #000;
  }

  &>img {
    width: 100%;
    border-top: 1px solid #ddd;
    filter: drop-shadow(0 0 15px #eee);
  }

}

&>figcaption {
  text-align: center;
  font-weight: 300;
  margin-top: 2rem;

}

}

article>header {

grid-area: article-header;

border-left: 1px solid #ccc;

margin-bottom: 4rem;

h1 {
  -moz-font-feature-settings: "salt"2;
  -webkit-font-feature-settings: "salt"2;
  font-feature-settings: "salt"2;

  font-weight: 300;
  font-size: 2rem;
  letter-spacing: -1px;
  line-height: 3rem;
  padding: 1rem;
}

}

article.meta {

grid-area: article-meta;

}

article>nav {

grid-area: article-nav;

&>ul {
  list-style: none;
}

}

article>div.content {

grid-area: article-content;

min-width: 285px;
max-width: 450px;

&>section {

  margin-right: 1rem;

  max-width: 450px;
  margin: 4rem 0;

  a {
    text-decoration: none;
  }

  &>h2 {
    margin: 4rem 0;
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: -1px;
    line-height: 3rem;
  }

  &>h2:first-child {
    margin-top: 1rem;
  }

  &>h3 {
    margin: 2rem 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 2rem;
  }

  &>p {
    margin: 1rem 0;
  }

  &>p:first-child {
    margin-top: 0;
    background-color: #eee;
    padding: 1rem;
    margin-bottom: 4rem;
  }

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

  &>ul {

    list-style: none;
    margin-bottom: 1rem;

    &>li {
      display: flex;

      >div {
        display: flex;
        flex-direction: column;
      }
    }

    &>li:before {
      margin-right: 1rem;
      content: "-";
      font-weight: 600;
    }

  }

  &>ol {

    list-style: none;
    margin-bottom: 1rem;

    &>li:first-child {
      counter-reset: element;
    }

    &>li:before {

      margin-right: 1rem;

      content: counter(element) ".";
      counter-increment: element;
      font-weight: 600;
    }

    &>li {
      display: flex;

      &>div {
        display: flex;
        flex-direction: column;

        &>ol {

          &>li:first-child {
            counter-reset: subelement;
          }

          &>li:before {
            content: counter(element) "."counter(subelement) "";
            counter-increment: subelement;
          }
        }
      }
    }

    &>li:after {
      padding-left: 1rem;
    }
  }

  &>dl {
    margin: 1rem 0;

    &>dt {
      font-weight: bold;
    }

    &>dd {
      margin: 1rem 0 1rem 2rem;
    }
  }
}

&>section:first-child {
  margin-top: 0;
}

}

article>aside {

grid-area: article-aside;

min-width: 240px;
max-width: 255px;

border-left: 1px solid #ccc;
margin-bottom: 2rem;

&>section {

  &>h3 {
    margin-bottom: 2rem;
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 2rem;
  }

  &>ul {
    list-style: none;
    margin-left: 3rem;

    &>li {
      &>a {
        font-weight: 300;
        text-decoration: none;
      }
    }
  }
}

}

article>footer {

grid-area: article-footer;
min-width: 240px;
max-width: 255px;

}

// ============================================================ // Article Grid Mixins // ============================================================

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

// ———————————————————— // 15px * 36 = 540px width // ———————————————————— @mixin article-540px() {

article {
  min-width: 525px;
  max-width: 705px;

  grid-template-columns: minmax(240px, 255px) minmax(285px, 450px);
  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content min-content;
  grid-column-gap: 1rem;
  grid-row-gap: 0;
  grid-template-areas:
    "article-header article-content"
    "article-figure article-content"
    "article-aside  article-content"
    "article-meta   article-content"
    ".              article-content"
    ".              article-content"
    ".              article-footer"
    ".              article-nav"
  ;
}

article>header {
  height: 16rem;
  margin-bottom: 2rem;
}

article>div.content {
  &>section {
    &>p:first-child {
      height: 16rem;
      margin-bottom: 8rem;
    }
  }
}

article>aside {
  padding-right: 1rem;
  border-right: 1px solid #eee;
}

}

// ———————————————————— // 15px * 57 = 810px width // ———————————————————— @mixin article-855px() {

article {

  min-width: 855px;
  max-width: 1455px;

  grid-template-columns: minmax(240px, 255px) minmax(285px, 450px) minmax(285px, 750px);
  grid-template-rows: min-content min-content min-content min-content min-content;
  grid-column-gap: 1.5rem;
  grid-row-gap: 0;
  grid-template-areas:
    "article-header article-content article-figure"
    "article-aside  article-content article-figure"
    "article-meta   article-content article-figure"
    ".              article-footer  article-footer"
    ".              article-nav     article-nav"
  ;
}

}