jekyll_patternbot 0.12.0

data/assets/_patternbot/common/common.min.css

@@ -0,0 +1 @@
+:root{--color-patternbot-primary:rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface),.9);--color-patternbot-opposite:rgba(var(--color-patternbot-interface-opposite),var(--color-patternbot-interface-opposite),var(--color-patternbot-interface-opposite),.9);--color-patternbot-interface-background:#fff;--font-patternbot-primary:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--font-patternbot-code:"Source Code Pro",monospace}html{font-family:var(--font-patternbot-primary)}.patternbot-no-wrap{white-space:nowrap}.patternbot-list-group{background-color:transparent;text-align:left}.patternbot-list-group>li:before{content:"";display:none}.patternbot-font-primary{font-family:var(--font-patternbot-primary)}.patternbot-color-body{color:var(--color-patternbot-primary)}.patternbot-max-length{margin-left:0;margin-right:0}code,pre{display:block;margin:0;overflow-x:hidden;color:var(--color-patternbot-primary);font-family:var(--font-patternbot-code);font-size:14px;font-style:normal;font-weight:400;line-height:2}code{padding:0 .4em .15em;background-color:rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface),.05);border:1px solid transparent;border-color:rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface),.05);border-radius:4px}.patternbot-hr{border-width:1px;border-color:rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface),.1)}.patternbot-hr:last-child,.patternbot-hr:last-of-type:not(:first-child){display:none}.patternbot-code-invisible{background-color:transparent;border-color:transparent}.patternbot-pad-box{background-color:var(--color-patternbot-interface-accent,--color-primary,rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface)))}.patternbot-pad-box-inner{overflow:hidden;background-color:var(--color-patternbot-interface-background)}.patternbot-spacing-display h2{color:var(--color-patternbot-primary);line-height:1.9;font-family:var(--font-patternbot-primary);font-size:32px;font-style:normal;font-weight:700}.patternbot-mq-display-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}.patternbot-mq-display-wrap,.patternbot-mq-display-wrap *{color:var(--color-patternbot-primary);line-height:2;font-family:var(--font-patternbot-primary);font-size:14px;font-style:normal;font-weight:400}.patternbot-mq-display{background-color:transparent;overflow:hidden}.patternbot-mq-display>li{padding:0}.patternbot-mq-display>li:last-child{padding-bottom:6rem}.patternbot-mq-inner{min-height:2rem;background-color:var(--color-patternbot-interface-accent,--color-primary,rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface),.1));border-top:2px solid var(--color-patternbot-interface-background)}.patternbot-mq-list{min-width:24em;padding-top:2.2rem;border-left:2px solid var(--color-patternbot-interface-accent,--color-primary,rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface),.1))}.patternbot-mq-list>dd,.patternbot-mq-list>dt{padding:0;font-weight:400;font-style:normal;font-size:inherit}.patternbot-mq-list>dt{width:7em}.patternbot-code-details{margin:0 0 .75em;padding:1.5em 0 0;border-bottom:1px solid rgba(var(--color-patternbot-interface),var(--color-patternbot-interface),var(--color-patternbot-interface),.05);font-size:14px;line-height:2;text-align:left}.patternbot-code-details,.patternbot-code-details *{color:var(--color-patternbot-primary)}.patternbot-code-details-under{padding-top:0;border:0}.patternbot-code-details-center{text-align:center}.patternbot-tool-btn{display:flex;left:100%;min-height:1.4em;min-width:1.2em;padding:1px 2px 2px;position:absolute;top:50%;transform:translateY(-50%);background-color:transparent;border:2px solid transparent;border-radius:4px;cursor:pointer;opacity:.4}.patternbot-tool-btn,.patternbot-tool-btn *{stroke:var(--color-patternbot-primary);color:var(--color-patternbot-primary)}.patternbot-tool-btn:focus,.patternbot-tool-btn:hover{background-color:transparent;border-color:transparent;outline:none;opacity:1;color:var(--color-patternbot-primary)}.patternbot-tool-btn:active,.patternbot-tool-btn:focus,.patternbot-tool-btn[aria-pressed=true]{border-color:var(--color-patternbot-primary)}

data/assets/_patternbot/common/gridifier.css

@@ -0,0 +1,1175 @@
+/*
+  Gridifier || Code released under the UNLICENSE
+  https://gridifier.web-dev.tools/#xs,6,0,0,0;s,6,25,0,0;m,6,38,1,1;l,6,60,1,1
+*/
+
+.grid {
+  margin: 0;
+  padding: 0;
+  letter-spacing: -.31em;
+  text-rendering: optimizeSpeed;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+}
+
+.grid-bottom {
+  -webkit-align-items: flex-end;
+  -ms-align-items: flex-end;
+  align-items: flex-end;
+}
+
+.grid-middle {
+  -webkit-align-items: center;
+  -ms-align-items: center;
+  align-items: center;
+}
+
+.grid-stretch {
+  -webkit-align-items: stretch;
+  -ms-align-items: stretch;
+  align-items: stretch;
+}
+
+.opera-only :-o-prefocus,
+.grid {
+  word-spacing: -.43em;
+}
+
+.unit {
+  letter-spacing: normal;
+  text-rendering: auto;
+  vertical-align: top;
+  word-spacing: normal;
+  display: inline-block;
+  visibility: visible;
+}
+
+.grid-bottom .unit {
+  vertical-align: bottom;
+}
+
+.grid-middle .unit {
+  vertical-align: middle;
+}
+
+[class*="unit-push-"],
+[class*="unit-pull-"] {
+  position: relative;
+}
+
+.unit-content-distribute {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.unit-content-center,
+.unit-content-center-vertical {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-flex-direction: column wrap;
+  -ms-flex-direction: column wrap;
+  flex-flow: column wrap;
+}
+
+.unit-content-center-horizontal {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-flex-direction: row wrap;
+  -ms-flex-direction: row wrap;
+  flex-flow: row wrap;
+}
+
+.content-fill,
+.content-stretch {
+  -ms-flex-grow: 2;
+  -webkit-flex-grow: 2;
+  flex-grow: 2;
+  max-width: 100%; /* @bugfix: IE 10, 11 */
+}
+
+.content-shrink {
+  -ms-align-self: center;
+  -webkit-align-self: center;
+  align-self: center;
+}
+
+.unit-xs-hidden,
+.xs-0 {
+  display: none;
+  visibility: hidden;
+}
+
+.unit-xs-centered {
+  margin: 0 auto;
+}
+
+.unit-xs-1,
+.xs-1 {
+  display: block;
+  visibility: visible;
+  width: 100%;
+}
+
+.unit-xs-1-2,
+.xs-1-2 {
+  width: 50%;
+}
+
+.unit-xs-1-3,
+.xs-1-3 {
+  width: 33.3333%;
+}
+
+.unit-xs-2-3,
+.xs-2-3 {
+  width: 66.6667%;
+}
+
+.unit-xs-1-4,
+.xs-1-4 {
+  width: 25%;
+}
+
+.unit-xs-3-4,
+.xs-3-4 {
+  width: 75%;
+}
+
+.unit-xs-1-5,
+.xs-1-5 {
+  width: 20%;
+}
+
+.unit-xs-2-5,
+.xs-2-5 {
+  width: 40%;
+}
+
+.unit-xs-3-5,
+.xs-3-5 {
+  width: 60%;
+}
+
+.unit-xs-4-5,
+.xs-4-5 {
+  width: 80%;
+}
+
+.unit-xs-1-6,
+.xs-1-6 {
+  width: 16.6667%;
+}
+
+.unit-xs-5-6,
+.xs-5-6 {
+  width: 83.3333%;
+}
+
+.unit-xs-1-2,
+.xs-1-2,
+.unit-xs-1-3,
+.xs-1-3,
+.unit-xs-2-3,
+.xs-2-3,
+.unit-xs-1-4,
+.xs-1-4,
+.unit-xs-3-4,
+.xs-3-4,
+.unit-xs-1-5,
+.xs-1-5,
+.unit-xs-2-5,
+.xs-2-5,
+.unit-xs-3-5,
+.xs-3-5,
+.unit-xs-4-5,
+.xs-4-5,
+.unit-xs-1-6,
+.xs-1-6,
+.unit-xs-5-6,
+.xs-5-6 {
+  display: inline-block;
+  visibility: visible;
+}
+
+.unit-xs-1-2[class*="-content-"],
+.xs-1-2[class*="-content-"],
+.unit-xs-1-3[class*="-content-"],
+.xs-1-3[class*="-content-"],
+.unit-xs-2-3[class*="-content-"],
+.xs-2-3[class*="-content-"],
+.unit-xs-1-4[class*="-content-"],
+.xs-1-4[class*="-content-"],
+.unit-xs-3-4[class*="-content-"],
+.xs-3-4[class*="-content-"],
+.unit-xs-1-5[class*="-content-"],
+.xs-1-5[class*="-content-"],
+.unit-xs-2-5[class*="-content-"],
+.xs-2-5[class*="-content-"],
+.unit-xs-3-5[class*="-content-"],
+.xs-3-5[class*="-content-"],
+.unit-xs-4-5[class*="-content-"],
+.xs-4-5[class*="-content-"],
+.unit-xs-1-6[class*="-content-"],
+.xs-1-6[class*="-content-"],
+.unit-xs-5-6[class*="-content-"],
+.xs-5-6[class*="-content-"] {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.unit-xs-content-distribute,
+.xs-content-distribute {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.unit-xs-content-center,
+.unit-xs-content-center-vertical {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-flex-direction: column wrap;
+  -ms-flex-direction: column wrap;
+  flex-flow: column wrap;
+}
+
+.unit-xs-content-center-horizontal {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-flex-direction: row wrap;
+  -ms-flex-direction: row wrap;
+  flex-flow: row wrap;
+}
+
+.xs-content-fill,
+.xs-content-stretch {
+  -ms-flex-grow: 2;
+  -webkit-flex-grow: 2;
+  flex-grow: 2;
+  max-width: 100%; /* @bugfix: IE 10, 11 */
+}
+
+.xs-content-shrink {
+  -ms-align-self: center;
+  -webkit-align-self: center;
+  align-self: center;
+}
+
+@media only screen and (min-width: 25em) {
+
+  .unit-s-hidden,
+  .s-0 {
+    display: none;
+    visibility: hidden;
+  }
+
+  .unit-s-centered {
+    margin: 0 auto;
+  }
+
+  .unit-s-1,
+  .s-1 {
+    display: block;
+    visibility: visible;
+    width: 100%;
+  }
+
+  .unit-s-1-2,
+  .s-1-2 {
+    width: 50%;
+  }
+
+  .unit-s-1-3,
+  .s-1-3 {
+    width: 33.3333%;
+  }
+
+  .unit-s-2-3,
+  .s-2-3 {
+    width: 66.6667%;
+  }
+
+  .unit-s-1-4,
+  .s-1-4 {
+    width: 25%;
+  }
+
+  .unit-s-3-4,
+  .s-3-4 {
+    width: 75%;
+  }
+
+  .unit-s-1-5,
+  .s-1-5 {
+    width: 20%;
+  }
+
+  .unit-s-2-5,
+  .s-2-5 {
+    width: 40%;
+  }
+
+  .unit-s-3-5,
+  .s-3-5 {
+    width: 60%;
+  }
+
+  .unit-s-4-5,
+  .s-4-5 {
+    width: 80%;
+  }
+
+  .unit-s-1-6,
+  .s-1-6 {
+    width: 16.6667%;
+  }
+
+  .unit-s-5-6,
+  .s-5-6 {
+    width: 83.3333%;
+  }
+
+  .unit-s-1-2,
+  .s-1-2,
+  .unit-s-1-3,
+  .s-1-3,
+  .unit-s-2-3,
+  .s-2-3,
+  .unit-s-1-4,
+  .s-1-4,
+  .unit-s-3-4,
+  .s-3-4,
+  .unit-s-1-5,
+  .s-1-5,
+  .unit-s-2-5,
+  .s-2-5,
+  .unit-s-3-5,
+  .s-3-5,
+  .unit-s-4-5,
+  .s-4-5,
+  .unit-s-1-6,
+  .s-1-6,
+  .unit-s-5-6,
+  .s-5-6 {
+    display: inline-block;
+    visibility: visible;
+  }
+
+  .unit-s-1-2[class*="-content-"],
+  .s-1-2[class*="-content-"],
+  .unit-s-1-3[class*="-content-"],
+  .s-1-3[class*="-content-"],
+  .unit-s-2-3[class*="-content-"],
+  .s-2-3[class*="-content-"],
+  .unit-s-1-4[class*="-content-"],
+  .s-1-4[class*="-content-"],
+  .unit-s-3-4[class*="-content-"],
+  .s-3-4[class*="-content-"],
+  .unit-s-1-5[class*="-content-"],
+  .s-1-5[class*="-content-"],
+  .unit-s-2-5[class*="-content-"],
+  .s-2-5[class*="-content-"],
+  .unit-s-3-5[class*="-content-"],
+  .s-3-5[class*="-content-"],
+  .unit-s-4-5[class*="-content-"],
+  .s-4-5[class*="-content-"],
+  .unit-s-1-6[class*="-content-"],
+  .s-1-6[class*="-content-"],
+  .unit-s-5-6[class*="-content-"],
+  .s-5-6[class*="-content-"] {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .unit-s-content-distribute,
+  .s-content-distribute {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
+
+  .unit-s-content-center,
+  .unit-s-content-center-vertical {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-flex-direction: column wrap;
+    -ms-flex-direction: column wrap;
+    flex-flow: column wrap;
+  }
+
+  .unit-s-content-center-horizontal {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-flex-direction: row wrap;
+    -ms-flex-direction: row wrap;
+    flex-flow: row wrap;
+  }
+
+  .s-content-fill,
+  .s-content-stretch {
+    -ms-flex-grow: 2;
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
+    max-width: 100%; /* @bugfix: IE 10, 11 */
+  }
+
+  .s-content-shrink {
+    -ms-align-self: center;
+    -webkit-align-self: center;
+    align-self: center;
+  }
+
+}
+
+@media only screen and (min-width: 38em) {
+
+  .unit-m-hidden,
+  .m-0 {
+    display: none;
+    visibility: hidden;
+  }
+
+  .unit-m-centered {
+    margin: 0 auto;
+  }
+
+  .unit-m-1,
+  .m-1 {
+    display: block;
+    visibility: visible;
+    width: 100%;
+  }
+
+  .unit-offset-m-0 {
+    margin-left: 0;
+  }
+
+  .unit-push-m-0,
+  .unit-pull-m-0 {
+    left: 0;
+  }
+
+  .unit-m-1-2,
+  .m-1-2 {
+    width: 50%;
+  }
+
+  .unit-offset-m-1-2 {
+    margin-left: 50%;
+  }
+
+  .unit-push-m-1-2 {
+    left: 50%;
+  }
+
+  .unit-pull-m-1-2 {
+    left: -50%;
+  }
+
+  .unit-m-1-3,
+  .m-1-3 {
+    width: 33.3333%;
+  }
+
+  .unit-offset-m-1-3 {
+    margin-left: 33.3333%;
+  }
+
+  .unit-push-m-1-3 {
+    left: 33.3333%;
+  }
+
+  .unit-pull-m-1-3 {
+    left: -33.3333%;
+  }
+
+  .unit-m-2-3,
+  .m-2-3 {
+    width: 66.6667%;
+  }
+
+  .unit-offset-m-2-3 {
+    margin-left: 66.6667%;
+  }
+
+  .unit-push-m-2-3 {
+    left: 66.6667%;
+  }
+
+  .unit-pull-m-2-3 {
+    left: -66.6667%;
+  }
+
+  .unit-m-1-4,
+  .m-1-4 {
+    width: 25%;
+  }
+
+  .unit-offset-m-1-4 {
+    margin-left: 25%;
+  }
+
+  .unit-push-m-1-4 {
+    left: 25%;
+  }
+
+  .unit-pull-m-1-4 {
+    left: -25%;
+  }
+
+  .unit-m-3-4,
+  .m-3-4 {
+    width: 75%;
+  }
+
+  .unit-offset-m-3-4 {
+    margin-left: 75%;
+  }
+
+  .unit-push-m-3-4 {
+    left: 75%;
+  }
+
+  .unit-pull-m-3-4 {
+    left: -75%;
+  }
+
+  .unit-m-1-5,
+  .m-1-5 {
+    width: 20%;
+  }
+
+  .unit-offset-m-1-5 {
+    margin-left: 20%;
+  }
+
+  .unit-push-m-1-5 {
+    left: 20%;
+  }
+
+  .unit-pull-m-1-5 {
+    left: -20%;
+  }
+
+  .unit-m-2-5,
+  .m-2-5 {
+    width: 40%;
+  }
+
+  .unit-offset-m-2-5 {
+    margin-left: 40%;
+  }
+
+  .unit-push-m-2-5 {
+    left: 40%;
+  }
+
+  .unit-pull-m-2-5 {
+    left: -40%;
+  }
+
+  .unit-m-3-5,
+  .m-3-5 {
+    width: 60%;
+  }
+
+  .unit-offset-m-3-5 {
+    margin-left: 60%;
+  }
+
+  .unit-push-m-3-5 {
+    left: 60%;
+  }
+
+  .unit-pull-m-3-5 {
+    left: -60%;
+  }
+
+  .unit-m-4-5,
+  .m-4-5 {
+    width: 80%;
+  }
+
+  .unit-offset-m-4-5 {
+    margin-left: 80%;
+  }
+
+  .unit-push-m-4-5 {
+    left: 80%;
+  }
+
+  .unit-pull-m-4-5 {
+    left: -80%;
+  }
+
+  .unit-m-1-6,
+  .m-1-6 {
+    width: 16.6667%;
+  }
+
+  .unit-offset-m-1-6 {
+    margin-left: 16.6667%;
+  }
+
+  .unit-push-m-1-6 {
+    left: 16.6667%;
+  }
+
+  .unit-pull-m-1-6 {
+    left: -16.6667%;
+  }
+
+  .unit-m-5-6,
+  .m-5-6 {
+    width: 83.3333%;
+  }
+
+  .unit-offset-m-5-6 {
+    margin-left: 83.3333%;
+  }
+
+  .unit-push-m-5-6 {
+    left: 83.3333%;
+  }
+
+  .unit-pull-m-5-6 {
+    left: -83.3333%;
+  }
+
+  .unit-m-1-2,
+  .m-1-2,
+  .unit-m-1-3,
+  .m-1-3,
+  .unit-m-2-3,
+  .m-2-3,
+  .unit-m-1-4,
+  .m-1-4,
+  .unit-m-3-4,
+  .m-3-4,
+  .unit-m-1-5,
+  .m-1-5,
+  .unit-m-2-5,
+  .m-2-5,
+  .unit-m-3-5,
+  .m-3-5,
+  .unit-m-4-5,
+  .m-4-5,
+  .unit-m-1-6,
+  .m-1-6,
+  .unit-m-5-6,
+  .m-5-6 {
+    display: inline-block;
+    visibility: visible;
+  }
+
+  .unit-m-1-2[class*="-content-"],
+  .m-1-2[class*="-content-"],
+  .unit-m-1-3[class*="-content-"],
+  .m-1-3[class*="-content-"],
+  .unit-m-2-3[class*="-content-"],
+  .m-2-3[class*="-content-"],
+  .unit-m-1-4[class*="-content-"],
+  .m-1-4[class*="-content-"],
+  .unit-m-3-4[class*="-content-"],
+  .m-3-4[class*="-content-"],
+  .unit-m-1-5[class*="-content-"],
+  .m-1-5[class*="-content-"],
+  .unit-m-2-5[class*="-content-"],
+  .m-2-5[class*="-content-"],
+  .unit-m-3-5[class*="-content-"],
+  .m-3-5[class*="-content-"],
+  .unit-m-4-5[class*="-content-"],
+  .m-4-5[class*="-content-"],
+  .unit-m-1-6[class*="-content-"],
+  .m-1-6[class*="-content-"],
+  .unit-m-5-6[class*="-content-"],
+  .m-5-6[class*="-content-"] {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .unit-m-content-distribute,
+  .m-content-distribute {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
+
+  .unit-m-content-center,
+  .unit-m-content-center-vertical {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-flex-direction: column wrap;
+    -ms-flex-direction: column wrap;
+    flex-flow: column wrap;
+  }
+
+  .unit-m-content-center-horizontal {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-flex-direction: row wrap;
+    -ms-flex-direction: row wrap;
+    flex-flow: row wrap;
+  }
+
+  .m-content-fill,
+  .m-content-stretch {
+    -ms-flex-grow: 2;
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
+    max-width: 100%; /* @bugfix: IE 10, 11 */
+  }
+
+  .m-content-shrink {
+    -ms-align-self: center;
+    -webkit-align-self: center;
+    align-self: center;
+  }
+
+}
+
+@media only screen and (min-width: 60em) {
+
+  .unit-l-hidden,
+  .l-0 {
+    display: none;
+    visibility: hidden;
+  }
+
+  .unit-l-centered {
+    margin: 0 auto;
+  }
+
+  .unit-l-1,
+  .l-1 {
+    display: block;
+    visibility: visible;
+    width: 100%;
+  }
+
+  .unit-offset-l-0 {
+    margin-left: 0;
+  }
+
+  .unit-push-l-0,
+  .unit-pull-l-0 {
+    left: 0;
+  }
+
+  .unit-l-1-2,
+  .l-1-2 {
+    width: 50%;
+  }
+
+  .unit-offset-l-1-2 {
+    margin-left: 50%;
+  }
+
+  .unit-push-l-1-2 {
+    left: 50%;
+  }
+
+  .unit-pull-l-1-2 {
+    left: -50%;
+  }
+
+  .unit-l-1-3,
+  .l-1-3 {
+    width: 33.3333%;
+  }
+
+  .unit-offset-l-1-3 {
+    margin-left: 33.3333%;
+  }
+
+  .unit-push-l-1-3 {
+    left: 33.3333%;
+  }
+
+  .unit-pull-l-1-3 {
+    left: -33.3333%;
+  }
+
+  .unit-l-2-3,
+  .l-2-3 {
+    width: 66.6667%;
+  }
+
+  .unit-offset-l-2-3 {
+    margin-left: 66.6667%;
+  }
+
+  .unit-push-l-2-3 {
+    left: 66.6667%;
+  }
+
+  .unit-pull-l-2-3 {
+    left: -66.6667%;
+  }
+
+  .unit-l-1-4,
+  .l-1-4 {
+    width: 25%;
+  }
+
+  .unit-offset-l-1-4 {
+    margin-left: 25%;
+  }
+
+  .unit-push-l-1-4 {
+    left: 25%;
+  }
+
+  .unit-pull-l-1-4 {
+    left: -25%;
+  }
+
+  .unit-l-3-4,
+  .l-3-4 {
+    width: 75%;
+  }
+
+  .unit-offset-l-3-4 {
+    margin-left: 75%;
+  }
+
+  .unit-push-l-3-4 {
+    left: 75%;
+  }
+
+  .unit-pull-l-3-4 {
+    left: -75%;
+  }
+
+  .unit-l-1-5,
+  .l-1-5 {
+    width: 20%;
+  }
+
+  .unit-offset-l-1-5 {
+    margin-left: 20%;
+  }
+
+  .unit-push-l-1-5 {
+    left: 20%;
+  }
+
+  .unit-pull-l-1-5 {
+    left: -20%;
+  }
+
+  .unit-l-2-5,
+  .l-2-5 {
+    width: 40%;
+  }
+
+  .unit-offset-l-2-5 {
+    margin-left: 40%;
+  }
+
+  .unit-push-l-2-5 {
+    left: 40%;
+  }
+
+  .unit-pull-l-2-5 {
+    left: -40%;
+  }
+
+  .unit-l-3-5,
+  .l-3-5 {
+    width: 60%;
+  }
+
+  .unit-offset-l-3-5 {
+    margin-left: 60%;
+  }
+
+  .unit-push-l-3-5 {
+    left: 60%;
+  }
+
+  .unit-pull-l-3-5 {
+    left: -60%;
+  }
+
+  .unit-l-4-5,
+  .l-4-5 {
+    width: 80%;
+  }
+
+  .unit-offset-l-4-5 {
+    margin-left: 80%;
+  }
+
+  .unit-push-l-4-5 {
+    left: 80%;
+  }
+
+  .unit-pull-l-4-5 {
+    left: -80%;
+  }
+
+  .unit-l-1-6,
+  .l-1-6 {
+    width: 16.6667%;
+  }
+
+  .unit-offset-l-1-6 {
+    margin-left: 16.6667%;
+  }
+
+  .unit-push-l-1-6 {
+    left: 16.6667%;
+  }
+
+  .unit-pull-l-1-6 {
+    left: -16.6667%;
+  }
+
+  .unit-l-5-6,
+  .l-5-6 {
+    width: 83.3333%;
+  }
+
+  .unit-offset-l-5-6 {
+    margin-left: 83.3333%;
+  }
+
+  .unit-push-l-5-6 {
+    left: 83.3333%;
+  }
+
+  .unit-pull-l-5-6 {
+    left: -83.3333%;
+  }
+
+  .unit-l-1-2,
+  .l-1-2,
+  .unit-l-1-3,
+  .l-1-3,
+  .unit-l-2-3,
+  .l-2-3,
+  .unit-l-1-4,
+  .l-1-4,
+  .unit-l-3-4,
+  .l-3-4,
+  .unit-l-1-5,
+  .l-1-5,
+  .unit-l-2-5,
+  .l-2-5,
+  .unit-l-3-5,
+  .l-3-5,
+  .unit-l-4-5,
+  .l-4-5,
+  .unit-l-1-6,
+  .l-1-6,
+  .unit-l-5-6,
+  .l-5-6 {
+    display: inline-block;
+    visibility: visible;
+  }
+
+  .unit-l-1-2[class*="-content-"],
+  .l-1-2[class*="-content-"],
+  .unit-l-1-3[class*="-content-"],
+  .l-1-3[class*="-content-"],
+  .unit-l-2-3[class*="-content-"],
+  .l-2-3[class*="-content-"],
+  .unit-l-1-4[class*="-content-"],
+  .l-1-4[class*="-content-"],
+  .unit-l-3-4[class*="-content-"],
+  .l-3-4[class*="-content-"],
+  .unit-l-1-5[class*="-content-"],
+  .l-1-5[class*="-content-"],
+  .unit-l-2-5[class*="-content-"],
+  .l-2-5[class*="-content-"],
+  .unit-l-3-5[class*="-content-"],
+  .l-3-5[class*="-content-"],
+  .unit-l-4-5[class*="-content-"],
+  .l-4-5[class*="-content-"],
+  .unit-l-1-6[class*="-content-"],
+  .l-1-6[class*="-content-"],
+  .unit-l-5-6[class*="-content-"],
+  .l-5-6[class*="-content-"] {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .unit-l-content-distribute,
+  .l-content-distribute {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
+
+  .unit-l-content-center,
+  .unit-l-content-center-vertical {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-flex-direction: column wrap;
+    -ms-flex-direction: column wrap;
+    flex-flow: column wrap;
+  }
+
+  .unit-l-content-center-horizontal {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-flex-direction: row wrap;
+    -ms-flex-direction: row wrap;
+    flex-flow: row wrap;
+  }
+
+  .l-content-fill,
+  .l-content-stretch {
+    -ms-flex-grow: 2;
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
+    max-width: 100%; /* @bugfix: IE 10, 11 */
+  }
+
+  .l-content-shrink {
+    -ms-align-self: center;
+    -webkit-align-self: center;
+    align-self: center;
+  }
+
+}