@supports not (display: grid) {
  distill-header,
  d-title,
  d-abstract,
  d-article,
  d-appendix,
  d-byline,
  d-footnote-list,
  distill-footer {
    display: block;
    padding: 8px;
  }
}

distill-header,
d-title,
d-abstract,
d-article,
d-appendix,
d-byline,
d-footnote-list,
distill-footer {
  display: grid;
  justify-items: stretch;
  grid-template-columns: [screen-start] 0.5fr [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 0.5fr [screen-end];
  grid-column-gap: 30px;
}

@media(min-width: 768px) {
  distill-header,
  d-title,
  d-abstract,
  d-article,
  d-appendix,
  d-byline,
  d-footnote-list,
  distill-footer {
    grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] 45px 45px 45px 45px 45px 45px 45px 45px [ kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end];
    grid-column-gap: 30px;
  }
}

@media(min-width: 1000px) {
  distill-header,
  d-title,
  d-abstract,
  d-article,
  d-appendix,
  d-byline,
  d-footnote-list,
  distill-footer {
    grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end];
    grid-column-gap: 30px;
  }
}

@media(min-width: 1280px) {
  distill-header,
  d-title,
  d-abstract,
  d-article,
  d-appendix,
  d-byline,
  d-footnote-list,
  distill-footer {
    grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];
    grid-column-gap: 30px;
  }
}


.grid {
  display: grid;
  grid-column-gap: 30px;
}

.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
}

.col-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 30px;
}


/* .l-body,
d-article > *  {
  grid-column: text;
}

.l-page,
d-title > *,
d-figure {
  grid-column: page;
} */

.l-body-outset {
  grid-column: left-outset / right-outset;
}

.l-page-outset {
  grid-column: left-outset / right-outset;
}

.l-screen {
  grid-column: start / end;
}

.l-screen-inset {
  grid-column: start / end;
  padding-left: 16px;
  padding-left: 16px;
}


/* Aside */

d-article aside {
  grid-column: gutter;
}

@media(min-width: 768px) {
  aside {
    grid-column: right-outset / right-page;
    font-size: 14px;
    line-height: 1.3;
  }

  .side {
    margin-left: 24px;
    float: right;
    width: 50%;
  }
}