template/components/styles-layout.css

/*
  Column: 60px
  Gutter: 24px

  Body: 648px
    - 8 columns
    - 7 gutters
  Middle: 816px
  Page: 984px
    - 12 columns
    - 11 gutters
*/

.l-body,
.l-body-outset,
.l-page,
.l-page-outset,
.l-middle,
.l-middle-outset,
dt-article > div,
dt-article > p,
dt-article > h1,
dt-article > h2,
dt-article > h3,
dt-article > h4,
dt-article > figure,
dt-article > ul,
dt-article > dt-byline,
dt-article > dt-code,
dt-article section > div,
dt-article section > p,
dt-article section > h1,
dt-article section > h2,
dt-article section > h3,
dt-article section > h4,
dt-article section > figure,
dt-article section > ul,
dt-article section > dt-byline,
dt-article section > dt-code {
  width: auto;
  margin-left: 24px;
  margin-right: 24px;
  box-sizing: border-box;
}

@media(min-width: 768px) {
  .l-body,
  .l-body-outset,
  .l-page,
  .l-page-outset,
  .l-middle,
  .l-middle-outset,
  dt-article > div,
  dt-article > p,
  dt-article > h1,
  dt-article > h2,
  dt-article > h3,
  dt-article > h4,
  dt-article > figure,
  dt-article > ul,
  dt-article > dt-byline,
  dt-article > dt-code,
  dt-article section > div,
  dt-article section > p,
  dt-article section > h1,
  dt-article section > h2,
  dt-article section > h3,
  dt-article section > h4,
  dt-article section > figure,
  dt-article section > ul,
  dt-article section > dt-byline,
  dt-article section > dt-code {
    margin-left: 72px;
    margin-right: 72px;
  }
}

@media(min-width: 1080px) {
  .l-body,
  dt-article > div,
  dt-article > p,
  dt-article > h2,
  dt-article > h3,
  dt-article > h4,
  dt-article > figure,
  dt-article > ul,
  dt-article > dt-byline,
  dt-article > dt-code,
  dt-article section > div,
  dt-article section > p,
  dt-article section > h2,
  dt-article section > h3,
  dt-article section > h4,
  dt-article section > figure,
  dt-article section > ul,
  dt-article section > dt-byline,
  dt-article section > dt-code {
    margin-left: calc(50% - 984px / 2);
    width: 648px;
  }
  .l-body-outset,
  dt-article .l-body-outset {
    margin-left: calc(50% - 984px / 2 - 96px/2);
    width: calc(648px + 96px);
  }
  .l-middle,
  dt-article .l-middle {
    width: 816px;
    margin-left: calc(50% - 984px / 2);
    margin-right: auto;
  }
  .l-middle-outset,
  dt-article .l-middle-outset {
    width: calc(816px + 96px);
    margin-left: calc(50% - 984px / 2 - 48px);
    margin-right: auto;
  }
  dt-article > h1,
  dt-article section > h1,
  .l-page,
  dt-article .l-page,
  dt-article.centered .l-page {
    width: 984px;
    margin-left: auto;
    margin-right: auto;
  }
  .l-page-outset,
  dt-article .l-page-outset,
  dt-article.centered .l-page-outset {
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
  .l-screen,
  dt-article .l-screen,
  dt-article.centered .l-screen {
    margin-left: auto;
    margin-right: auto;
    width: auto;
  }
  .l-screen-inset,
  dt-article .l-screen-inset,
  dt-article.centered .l-screen-inset {
    margin-left: 24px;
    margin-right: 24px;
    width: auto;
  }
  .l-gutter,
  dt-article .l-gutter {
    clear: both;
    float: right;
    margin-top: 0;
    margin-left: 24px;
    margin-right: calc((100vw - 984px) / 2 + 168px);
    width: calc((984px - 648px) / 2 - 24px);
  }

  /* Side */
  .side.l-body,
  dt-article .side.l-body {
    clear: both;
    float: right;
    margin-top: 0;
    margin-left: 48px;
    margin-right: calc((100vw - 984px + 648px) / 2);
    width: calc(648px / 2 - 24px - 84px);
  }
  .side.l-body-outset,
  dt-article .side.l-body-outset {
    clear: both;
    float: right;
    margin-top: 0;
    margin-left: 48px;
    margin-right: calc((100vw - 984px + 648px - 48px) / 2);
    width: calc(648px / 2 - 48px + 24px);
  }
  .side.l-middle,
  dt-article .side.l-middle {
    clear: both;
    float: right;
    width: calc(456px - 84px);
    margin-left: 48px;
    margin-right: calc((100vw - 984px) / 2 + 168px);
  }
  .side.l-middle-outset,
  dt-article .side.l-middle-outset {
    clear: both;
    float: right;
    width: 456px;
    margin-left: 48px;
    margin-right: calc((100vw - 984px) / 2 + 168px);
  }
  .side.l-page,
  dt-article .side.l-page {
    clear: both;
    float: right;
    margin-left: 48px;
    width: calc(624px - 84px);
    margin-right: calc((100vw - 984px) / 2);
  }
  .side.l-page-outset,
  dt-article .side.l-page-outset {
    clear: both;
    float: right;
    width: 624px;
    margin-right: calc((100vw - 984px) / 2);
  }
}

/* Centered */

@media(min-width: 1080px) {
  .centered .l-body,
  .centered.l-body,
  dt-article.centered > div,
  dt-article.centered > p,
  dt-article.centered > h2,
  dt-article.centered > h3,
  dt-article.centered > h4,
  dt-article.centered > figure,
  dt-article.centered > ul,
  dt-article.centered > dt-byline,
  dt-article.centered > dt-code,
  dt-article.centered section > div,
  dt-article.centered section > p,
  dt-article.centered section > h2,
  dt-article.centered section > h3,
  dt-article.centered section > h4,
  dt-article.centered section > figure,
  dt-article.centered section > ul,
  dt-article.centered section > dt-byline,
  dt-article.centered section > dt-code,
  dt-article section.centered > div,
  dt-article section.centered > p,
  dt-article section.centered > h2,
  dt-article section.centered > h3,
  dt-article section.centered > h4,
  dt-article section.centered > figure,
  dt-article section.centered > ul,
  dt-article section.centered > dt-byline,
  dt-article section.centered > dt-code {
    margin-left: auto;
    margin-right: auto;
    width: 648px;
  }
  .centered .l-body-outset,
  .centered.l-body-outset,
  dt-article.centered .l-body-outset {
    margin-left: auto;
    margin-right: auto;
    width: calc(648px + 96px);
  }
  dt-article.centered > h1,
  dt-article.centered section > h1,
  dt-article section.centered > h1,
  .centered .l-middle,
  .centered.l-middle,
  dt-article.centered .l-middle {
    width: 816px;
    margin-left: auto;
    margin-right: auto;
  }

  .centered .l-middle-outset,
  .centered.l-middle-outset,
  dt-article.centered .l-middle-outset {
    width: calc(816px + 96px);
    margin-left: auto;
    margin-right: auto;
  }

  /* page and screen are already centered */

  /* Side */

  .centered .side.l-body,
  .centered dt-article .side.l-body {
    clear: both;
    float: right;
    margin-top: 0;
    margin-left: 48px;
    margin-right: calc((100vw - 648px) / 2);
    width: calc(4 * 60px + 3 * 24px);
  }
  .centered .side.l-body-outset,
  .centered dt-article .side.l-body-outset {
    clear: both;
    float: right;
    margin-top: 0;
    margin-left: 48px;
    margin-right: calc((100vw - 648px) / 2);
    width: calc(4 * 60px + 3 * 24px);
  }
  .centered .side.l-middle,
  .centered dt-article .side.l-middle {
    clear: both;
    float: right;
    width: 396px;
    margin-left: 48px;
    margin-right: calc((100vw - 984px) / 2 + 168px / 2);
  }
  .centered .side.l-middle-outset,
  .centered dt-article .side.l-middle-outset {
    clear: both;
    float: right;
    width: 456px;
    margin-left: 48px;
    margin-right: calc((100vw - 984px) / 2 + 168px);
  }
  .centered .side.l-page,
  .centered dt-article .side.l-page {
    clear: both;
    float: right;
    width: 480px;
    margin-right: calc((100vw - 984px) / 2);
  }
  .centered .side.l-page-outset,
  .centered dt-article .side.l-page-outset {
    clear: both;
    float: right;
    width: 480px;
    margin-right: calc((100vw - 984px) / 2);
  }
  .centered .l-gutter,
  .centered.l-gutter,
  dt-article.centered .l-gutter {
    clear: both;
    float: right;
    margin-top: 0;
    margin-left: 24px;
    margin-right: calc((100vw - 984px) / 2);
    width: calc((984px - 648px) / 2 - 24px);
  }

}

/* Rows and Columns */

.row {
  display: flex;
}
.column {
  flex: 1;
  box-sizing: border-box;
  margin-right: 24px;
  margin-left: 24px;
}
.row > .column:first-of-type {
  margin-left: 0;
}
.row > .column:last-of-type {
  margin-right: 0;
}