/* ========================================================= */
/* Colors */

/* Text colors */
.white { color: var(--white); }
.gray1 { color: var(--gray1); }
.gray2 { color: var(--gray2); }
.red1  { color: var(--red1); }
.black { color: var(--black); }

/* Background colors */
.bg-white { background-color: var(--white); }
.bg-greige1 { background-color: var(--greige1); }
.bg-greige2 { background-color: var(--greige2); }
.bg-greige3 { background-color: var(--greige3); }
.bg-gray1 { background-color: var(--gray1); }
.bg-gray2 { background-color: var(--gray2); }
.bg-black { background-color: var(--black); }
.bg-red1 { background-color: var(--red1); }
.bg-red2 { background-color: var(--red2); }

/* Border colors */
.bc-white { border-color: var(--white); }
.bc-greige2 { border-color: var(--greige2); }
.bc-greige3 { border-color: var(--greige3); }
.bc-greige4 { border-color: var(--greige4); }


/* ========================================================= */
/* Typography

   Line heights: heading 1.2 / body 1.75 / double 2
                                                             */
/* ========================================================= */

html { color: var(--black); font-family: var(--serif); font-size: 100%; height: 100%; }
@media (min-width: 30rem) {
  html { font-size: 112.5%; } /* 18px w/o font scaling */
}
@media (min-width: 64em) {
  html { font-size: 131.25%; } /* 21px w/o font scaling */
}

body { font-size: var(--s3); line-height: 1.75; }
button, input, select, textarea { font-family: inherit; }

/* Heading 1 */
h1, .h1, .sm-h1, .md-h1, .lg-h1, .xl-h1 {
  font-family: var(--sans-serif);
  font-size: 2.5rem;
  line-height: var(--lh-single);
	font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--s3);
  text-rendering: optimizeLegibility;
  text-transform: none;
}
@media (min-width: 54em) {
  h1, .h1, .sm-h1, .md-h1, .lg-h1, .xl-h1 {
    font-size: 3rem;
    letter-spacing: var(--ls-condensed);
  }
}

/* Heading 2 */
h2, .h2, .sm-h2, .md-h2, .lg-h2, .xl-h2 {
  font-family: var(--sans-serif);
  font-size: var(--fs5);
  line-height: var(--lh-single);
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--s3);
  text-rendering: optimizeLegibility;
  text-transform: none;
  letter-spacing: --lh-condensed;
}

/* Heading 3 */
h3, .h3, .sm-h3, .md-h3, .lg-h3, .xl-h3 {
  font-family: var(--sans-serif);
  font-size: var(--fs4);
  line-height: var(--lh-heading);
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--s3);
  text-rendering: optimizeLegibility;
  text-transform: none;
  letter-spacing: var(--ls-condensed);
}

/* Heading 4 */
h4, .h4, .sm-h4, .md-h4, .lg-h4, .xl-h4 {
  font-family: var(--sans-serif);
  font-size: var(--fs3);
  line-height: var(--lh-heading);
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--s3);
  text-rendering: optimizeLegibility;
  text-transform: none;
}

/* Heading 5 */
h5, .h5, .sm-h5, .md-h5, .lg-h5, .xl-h5 {
  font-family: var(--sans-serif);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--s3);
  text-transform: none;
}

/* Heading 6 */
h6, .h6, .sm-h6, .md-h6, .lg-h6, .xl-h6 {
  font-family: var(--sans-serif);
  font-size: var(--fs1);
  line-height: var(--lh-body);
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--s3);
  text-transform: none;
}

/* Paragraphs */
p { margin: 0 0 var(--s4) 0; }
p + p { margin-top: calc(0rem - var(--s3)); }
p:last-child { margin-bottom: 0; }

/* Links */
a {
  color: var(--black);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--greige4);
  text-underline-offset: 4px;
}
a:hover {
  color: var(--gray2);
}
.linkReset, .linkReset:hover, .linkReset:focus {
  text-decoration: none;
}

.footnoteContainer, .footnoteLinkInText { background: none; margin-left: calc(0rem - var(--s2)); margin-right:  calc(0rem - var(--s2)); padding-left: var(--s2); padding-right: var(--s2); border-radius: var(--r-rounded); }
.footnoteContainer.active, .footnoteLinkInText.active { animation: highlightFootnote 3.5s cubic-bezier(0.3, 0, 1, 0.7); }
@keyframes highlightFootnote {
  0%   { background-color: rgba(255,84,66,0.15); }
  100% { background-color: rgba(255,84,66,0); }
}

.footnoteAnchor { display: inline-block; width: 0; pointer-events: none; padding-top: 10.25rem; margin-top: -10.25rem; }
@media (min-width: 54em) { .footnoteAnchor { padding-top: var(--s6); margin-top: calc(0rem - var(--s6)); } }
.footnote p:last-of-type { display: inline; }
.footnote p { margin-bottom: var(--s1); }
/* Footnote links */
sup {
  vertical-align: baseline;
  position: relative;
  top: -0.5em;
}
sup a {
  padding: 0 var(--s2);
  margin: 0 -0.4375rem;
  text-decoration: none;
  color: var(--red1);
}
sup a:hover {
  color: var(--red2);
  text-decoration: none;
}
.footnoteBacklink {
  color: var(--red1);
  position: relative; top: 2px;
}
.footnoteBacklink:hover {
  color: var(--red2);
}


/* Font styling */
em, .italic { font-style: italic; }
strong { font-weight: 800; }
abbr[title] { text-decoration: none; }
.small { font-size: var(--fs0); }
small { font-size: var(--fs1); }
.futura { font-family: var(--sans-serif); }
.caps { text-transform: uppercase; letter-spacing: --lh-extended; }
.small.caps { font-weight: 700; }
.lhSingle { line-height: var(--lh-single); }
.lhHeading { line-height: var(--lh-heading); }
.lhBody { line-height: var(--lh-body); }
.lhDouble { line-height: var(--lh-double); }
.measure { max-width: 55ch; }
.antialias { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Blockquote */
blockquote {
  border-left: 8px solid var(--greige3);
  margin: 0 0 var(--s4) 0;
  padding-left: var(--s4);
}
blockquote p {
  font-size: var(--fs3);
  margin-bottom: 0;
  margin-top: var(--s3);
}
blockquote p:first-child {
  margin-top: 0;
}
blockquote p.attribution {
  font-size: var(--fs1);
  font-family: var(--sans-serif);
  color: var(--gray2);
  margin-top: var(--s1);
}

/* Lists */
ul {
  margin-top: 0;
  margin-bottom: var(--s4);
  list-style-position: outside;
  padding-left: var(--s3);
  margin-left: var(--s1);
}
ol {
  margin-top: 0;
  margin-bottom: var(--s4);
  padding-left: var(--s4);
  list-style-position: outside;
  list-style: none;
  counter-reset: li;
}
ol li {
  counter-increment: li;
  display: flex;
}
ol li:before {
  content: counter(li)'.';
  display: inline-block;
  width: var(--s4);
  margin-left: calc(0rem - var(--s4)) calc(0rem - var(--s4));
}
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }
.listReset { list-style: none; }

img { height: auto; }
.cover { object-fit: cover; } /* use with img */

figure { margin: 0; }

.noWrap { white-space: nowrap; }
.trunclipse {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================= */
/* Layout

   gutter: 0.5em
                                                             */
/* ========================================================= */

.container { margin-left: auto; margin-right: auto; max-width: calc(100% - var(--s4)); }
.columns { display: flex; flex-wrap: wrap; margin-left: calc(0em - var(--gutter)); margin-right: calc(0em - var(--gutter)); }
.justifyCenter { justify-content: center; }
.justifyEvenly { justify-content: space-evenly; }
.justifyBetween { justify-content: space-between; }
.justifyStart { justify-content: start; }
.justifyEnd { justify-content: flex-end; }
.alignStart { align-items: flex-start; }
.alignCenter { align-items: center; }
.alignEnd { align-items: flex-end; }
.flex1 { flex: 1; }
.flexColumn { flex-direction: column; }
.flexRow { flex-direction: row; }
.flexWrap { flex-wrap: wrap; }
.flexWrapReverse { flex-wrap: wrap-reverse; }
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { padding-left: var(--gutter); padding-right: var(--gutter); }
.colAuto { width: auto; }
.col1 { width: calc(1 / 12 * 100%); }
.col2 { width: calc(2 / 12 * 100%); }
.col3 { width: calc(3 / 12 * 100%); }
.col4 { width: calc(4 / 12 * 100%); }
.col5 { width: calc(5 / 12 * 100%); }
.col6 { width: calc(6 / 12 * 100%); }
.col7 { width: calc(7 / 12 * 100%); }
.col8 { width: calc(8 / 12 * 100%); }
.col9 { width: calc(9 / 12 * 100%); }
.col10 { width: calc(10 / 12 * 100%); }
.col11 { width: calc(11 / 12 * 100%); }
.col12 { width: calc(12 / 12 * 100%); }

@media (min-width: 30em) {
  .sm-justifyCenter { justify-content: center; }
  .sm-justifyEvenly { justify-content: space-evenly; }
  .sm-justifyBetween { justify-content: space-between; }
  .sm-justifyStart { justify-content: start; }
  .sm-justifyEnd { justify-content: flex-end; }
  .sm-alignStart { align-items: flex-start; }
  .sm-alignCenter { align-items: center; }
  .sm-alignEnd { align-items: flex-end; }
  .sm-flex1 { flex: 1; }
  .sm-flexColumn { flex-direction: column; }
  .sm-flexRow { flex-direction: row; }
  .sm-flexWrap { flex-wrap: wrap; }
  .sm-flexWrapReverse { flex-wrap: wrap-reverse; }
  .sm-colAuto { width: auto; }
  .sm-col1 { width: calc(1 / 12 * 100%); }
  .sm-col2 { width: calc(2 / 12 * 100%); }
  .sm-col3 { width: calc(3 / 12 * 100%); }
  .sm-col4 { width: calc(4 / 12 * 100%); }
  .sm-col5 { width: calc(5 / 12 * 100%); }
  .sm-col6 { width: calc(6 / 12 * 100%); }
  .sm-col7 { width: calc(7 / 12 * 100%); }
  .sm-col8 { width: calc(8 / 12 * 100%); }
  .sm-col9 { width: calc(9 / 12 * 100%); }
  .sm-col10 { width: calc(10 / 12 * 100%); }
  .sm-col11 { width: calc(11 / 12 * 100%); }
  .sm-col12 { width: calc(12 / 12 * 100%); }
}
@media (min-width: 54em) {
  .md-justifyCenter { justify-content: center; }
  .md-justifyEvenly { justify-content: space-evenly; }
  .md-justifyBetween { justify-content: space-between; }
  .md-justifyStart { justify-content: start; }
  .md-justifyEnd { justify-content: flex-end; }
  .md-alignStart { align-items: flex-start; }
  .md-alignCenter { align-items: center; }
  .md-alignEnd { align-items: flex-end; }
  .md-flex1 { flex: 1; }
  .md-flexColumn { flex-direction: column; }
  .md-flexRow { flex-direction: row; }
  .md-flexWrap { flex-wrap: wrap; }
  .md-flexWrapReverse { flex-wrap: wrap-reverse; }
  .md-colAuto { width: auto; }
  .md-col1 { width: calc(1 / 12 * 100%); }
  .md-col2 { width: calc(2 / 12 * 100%); }
  .md-col3 { width: calc(3 / 12 * 100%); }
  .md-col4 { width: calc(4 / 12 * 100%); }
  .md-col5 { width: calc(5 / 12 * 100%); }
  .md-col6 { width: calc(6 / 12 * 100%); }
  .md-col7 { width: calc(7 / 12 * 100%); }
  .md-col8 { width: calc(8 / 12 * 100%); }
  .md-col9 { width: calc(9 / 12 * 100%); }
  .md-col10 { width: calc(10 / 12 * 100%); }
  .md-col11 { width: calc(11 / 12 * 100%); }
  .md-col12 { width: calc(12 / 12 * 100%); }
}
@media (min-width: 60em) {
  .lg-justifyCenter { justify-content: center; }
  .lg-justifyEvenly { justify-content: space-evenly; }
  .lg-justifyBetween { justify-content: space-between; }
  .lg-justifyStart { justify-content: start; }
  .lg-justifyEnd { justify-content: flex-end; }
  .lg-alignStart { align-items: flex-start; }
  .lg-alignCenter { align-items: center; }
  .lg-alignEnd { align-items: flex-end; }
  .lg-flex1 { flex: 1; }
  .lg-flexColumn { flex-direction: column; }
  .lg-flexRow { flex-direction: row; }
  .lg-flexWrap { flex-wrap: wrap; }
  .lg-flexWrapReverse { flex-wrap: wrap-reverse; }
  .lg-colAuto { width: auto; }
  .lg-col1 { width: calc(1 / 12 * 100%); }
  .lg-col2 { width: calc(2 / 12 * 100%); }
  .lg-col3 { width: calc(3 / 12 * 100%); }
  .lg-col4 { width: calc(4 / 12 * 100%); }
  .lg-col5 { width: calc(5 / 12 * 100%); }
  .lg-col6 { width: calc(6 / 12 * 100%); }
  .lg-col7 { width: calc(7 / 12 * 100%); }
  .lg-col8 { width: calc(8 / 12 * 100%); }
  .lg-col9 { width: calc(9 / 12 * 100%); }
  .lg-col10 { width: calc(10 / 12 * 100%); }
  .lg-col11 { width: calc(11 / 12 * 100%); }
  .lg-col12 { width: calc(12 / 12 * 100%); }
}
@media (min-width: 90em) {
  .xl-justifyCenter { justify-content: center; }
  .xl-justifyEvenly { justify-content: space-evenly; }
  .xl-justifyBetween { justify-content: space-between; }
  .xl-justifyStart { justify-content: start; }
  .xl-justifyEnd { justify-content: flex-end; }
  .xl-alignStart { align-items: flex-start; }
  .xl-alignCenter { align-items: center; }
  .xl-alignEnd { align-items: flex-end; }
  .xl-flex1 { flex: 1; }
  .xl-flexColumn { flex-direction: column; }
  .xl-flexRow { flex-direction: row; }
  .xl-flexWrap { flex-wrap: wrap; }
  .xl-flexWrapReverse { flex-wrap: wrap-reverse; }
  .xl-colAuto { width: auto; }
  .xl-col1 { width: calc(1 / 12 * 100%); }
  .xl-col2 { width: calc(2 / 12 * 100%); }
  .xl-col3 { width: calc(3 / 12 * 100%); }
  .xl-col4 { width: calc(4 / 12 * 100%); }
  .xl-col5 { width: calc(5 / 12 * 100%); }
  .xl-col6 { width: calc(6 / 12 * 100%); }
  .xl-col7 { width: calc(7 / 12 * 100%); }
  .xl-col8 { width: calc(8 / 12 * 100%); }
  .xl-col9 { width: calc(9 / 12 * 100%); }
  .xl-col10 { width: calc(10 / 12 * 100%); }
  .xl-col11 { width: calc(11 / 12 * 100%); }
  .xl-col12 { width: calc(12 / 12 * 100%); }
}

/* ========================================================= */
/* Button
/* ========================================================= */

.button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans-serif);
  font-size: var(--fs1);
  font-weight: 400;
  line-height: var(--lh-body);
  padding: var(--s2) var(--s3);
  transition: all 0.3s ease-out;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  display: inline-block;
}
.button.small {
  font-size: var(--fs0);
}
.button.tiny {
  font-size: var(--fs0);
  padding: var(--s1) var(--s2);
}

.button.buttonRed {
  background-color: var(--red1);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.button.buttonRed:hover { background-color: var(--red2); }

.button.buttonGreige {
  background-color: var(--greige3);
  color: var(--black);
}

.button.buttonWhite {
  background-color: var(--white);
  color: var(--black);
}
.button.buttonWhite:hover,
.button.buttonGreige:hover {
  background-color: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.button.buttonRound {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--gray1);
  padding: 0;
}
.button.buttonRound:hover { background-color: var(--greige2); color: var(--black); }

.button.invisibleButton {
  background-color: transparent;
  color: var(--black);
}
.button.invisibleButton:hover {
  background-color: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.button.buttonSidebar {
  width: 100%;
  height: 3.25rem;
}
@media (min-width: 54em) {
  .button.buttonSidebar {
    width: auto;
    height: auto;
  }
}

button[disabled], .button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================================= */
/* Border
/* ========================================================= */

.border { border-style: solid; }
.borderBottom { border-bottom-style: solid; }
.borderTop { border-top-style: solid; }
.borderLeft { border-left-style: solid; }
.borderRight { border-right-style: solid; }
.bw0 { border-width: 0; }
.bw2 { border-width: 2px; }
.bw8 { border-width: 8px; }
.rounded { border-radius: 4px; }
.circular { border-radius: 50%; }

@media (min-width: 30em) {
  .sm-bw0 { border-width: 0; }
  .sm-bw2 { border-width: 2px; }
  .sm-bw8 { border-width: 8px; }
}
@media (min-width: 54em) {
  .md-bw0 { border-width: 0; }
  .md-bw2 { border-width: 2px; }
  .md-bw8 { border-width: 8px; }
}
@media (min-width: 64em) {
  .lg-bw0 { border-width: 0; }
  .lg-bw2 { border-width: 2px; }
  .lg-bw8 { border-width: 8px; }
}
@media (min-width: 90em) {
  .xl-bw0 { border-width: 0; }
  .xl-bw2 { border-width: 2px; }
  .xl-bw8 { border-width: 8px; }
}

/* ========================================================= */
/* Display
/* ========================================================= */

.inline { display: inline; }
.inlineBlock { display: inline-block; }
.block { display: block; }
.none { display: none; }
.flex { display: flex; }
.inlineFlex { display: inline-flex; }

@media (min-width: 30em) {
  .sm-inline { display: inline; }
  .sm-inlineBlock { display: inline-block; }
  .sm-block { display: block; }
  .sm-none { display: none; }
  .sm-flex { display: flex; }
  .sm-inlineFlex { display: inline-flex; }
}
@media (min-width: 54em) {
  .md-inline { display: inline; }
  .md-inlineBlock { display: inline-block; }
  .md-block { display: block; }
  .md-none { display: none; }
  .md-flex { display: flex; }
  .md-inlineFlex { display: inline-flex; }
}
@media (min-width: 60em) {
  .lg-inline { display: inline; }
  .lg-inlineBlock { display: inline-block; }
  .lg-block { display: block; }
  .lg-none { display: none; }
  .lg-flex { display: flex; }
  .lg-inlineFlex { display: inline-flex; }
}
@media (min-width: 90em) {
  .xl-inline { display: inline; }
  .xl-inlineBlock { display: inline-block; }
  .xl-block { display: block; }
  .xl-none { display: none; }
  .xl-flex { display: flex; }
  .xl-inlineFlex { display: inline-flex; }
}

/* ========================================================= */
/* Interactions
/* ========================================================= */

.pointer { cursor: pointer; }
.pointerEventsNone { pointer-events: none; }

/* ========================================================= */
/* Margin & Padding
/* ========================================================= */

.ma  { margin: auto; }
.mla { margin-left: auto; }
.mra { margin-right: auto; }
.mxa { margin-left: auto; margin-right: auto; }

.m0  { margin: 0; }
.m1  { margin: var(--s1); }
.m2  { margin: var(--s2); }
.m3  { margin: var(--s3); }
.m4  { margin: var(--s4); }
.m5  { margin: var(--s5); }
.m6  { margin: var(--s6); }
.m7  { margin: var(--s7); }

.mt0 { margin-top: 0; }
.mt1 { margin-top: var(--s1); }
.mt2 { margin-top: var(--s2); }
.mt3 { margin-top: var(--s3); }
.mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mt7 { margin-top: var(--s7); }

.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: var(--s1); }
.mb2 { margin-bottom: var(--s2); }
.mb3 { margin-bottom: var(--s3); }
.mb4 { margin-bottom: var(--s4); }
.mb5 { margin-bottom: var(--s5); }
.mb6 { margin-bottom: var(--s6); }
.mb7 { margin-bottom: var(--s7); }

.ml0 { margin-left: 0; }
.ml1 { margin-left: var(--s1); }
.ml2 { margin-left: var(--s2); }
.ml3 { margin-left: var(--s3); }
.ml4 { margin-left: var(--s4); }
.ml5 { margin-left: var(--s5); }
.ml6 { margin-left: var(--s6); }
.ml7 { margin-left: var(--s7); }

.mr0 { margin-right: 0; }
.mr1 { margin-right: var(--s1); }
.mr2 { margin-right: var(--s2); }
.mr3 { margin-right: var(--s3); }
.mr4 { margin-right: var(--s4); }
.mr5 { margin-right: var(--s5); }
.mr6 { margin-right: var(--s6); }
.mr7 { margin-right: var(--s7); }

.my0 { margin-top: 0; margin-bottom: 0; }
.my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
.my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
.my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
.my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
.my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
.my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
.my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

.mx0 { margin-left: 0; margin-right: 0; }
.mx1 { margin-left: var(--s1); margin-right: var(--s1); }
.mx2 { margin-left: var(--s2); margin-right: var(--s2); }
.mx3 { margin-left: var(--s3); margin-right: var(--s3); }
.mx4 { margin-left: var(--s4); margin-right: var(--s4); }
.mx5 { margin-left: var(--s5); margin-right: var(--s5); }
.mx6 { margin-left: var(--s6); margin-right: var(--s6); }
.mx7 { margin-left: var(--s7); margin-right: var(--s7); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: calc(0rem - var(--s1)); }
.mt-2 { margin-top: calc(0rem - var(--s2)); }
.mt-3 { margin-top: calc(0rem - var(--s3)); }
.mt-4 { margin-top: calc(0rem - var(--s4)); }
.mt-5 { margin-top: calc(0rem - var(--s5)); }
.mt-6 { margin-top: calc(0rem - var(--s6)); }
.mt-7 { margin-top: calc(0rem - var(--s7)); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: calc(0rem - var(--s1)); }
.mb-2 { margin-bottom: calc(0rem - var(--s2)); }
.mb-3 { margin-bottom: calc(0rem - var(--s3)); }
.mb-4 { margin-bottom: calc(0rem - var(--s4)); }
.mb-5 { margin-bottom: calc(0rem - var(--s5)); }
.mb-6 { margin-bottom: calc(0rem - var(--s6)); }
.mb-7 { margin-bottom: calc(0rem - var(--s7)); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: calc(0rem - var(--s1)); }
.ml-2 { margin-left: calc(0rem - var(--s2)); }
.ml-3 { margin-left: calc(0rem - var(--s3)); }
.ml-4 { margin-left: calc(0rem - var(--s4)); }
.ml-5 { margin-left: calc(0rem - var(--s5)); }
.ml-6 { margin-left: calc(0rem - var(--s6)); }
.ml-7 { margin-left: calc(0rem - var(--s7)); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: calc(0rem - var(--s1)); }
.mr-2 { margin-right: calc(0rem - var(--s2)); }
.mr-3 { margin-right: calc(0rem - var(--s3)); }
.mr-4 { margin-right: calc(0rem - var(--s4)); }
.mr-5 { margin-right: calc(0rem - var(--s5)); }
.mr-6 { margin-right: calc(0rem - var(--s6)); }
.mr-7 { margin-right: calc(0rem - var(--s7)); }

.p0  { padding: 0; }
.p1  { padding: var(--s1); }
.p2  { padding: var(--s2); }
.p3  { padding: var(--s3); }
.p4  { padding: var(--s4); }
.p5  { padding: var(--s5); }
.p6  { padding: var(--s6); }
.p7  { padding: var(--s7); }

.pt0 { padding-top: 0; }
.pt1 { padding-top: var(--s1); }
.pt2 { padding-top: var(--s2); }
.pt3 { padding-top: var(--s3); }
.pt4 { padding-top: var(--s4); }
.pt5 { padding-top: var(--s5); }
.pt6 { padding-top: var(--s6); }
.pt7 { padding-top: var(--s7); }

.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: var(--s1); }
.pb2 { padding-bottom: var(--s2); }
.pb3 { padding-bottom: var(--s3); }
.pb4 { padding-bottom: var(--s4); }
.pb5 { padding-bottom: var(--s5); }
.pb6 { padding-bottom: var(--s6); }
.pb7 { padding-bottom: var(--s7); }

.pl0 { padding-left: 0; }
.pl1 { padding-left: var(--s1); }
.pl2 { padding-left: var(--s2); }
.pl3 { padding-left: var(--s3); }
.pl4 { padding-left: var(--s4); }
.pl5 { padding-left: var(--s5); }
.pl6 { padding-left: var(--s6); }
.pl7 { padding-left: var(--s7); }

.pr0 { padding-right: 0; }
.pr1 { padding-right: var(--s1); }
.pr2 { padding-right: var(--s2); }
.pr3 { padding-right: var(--s3); }
.pr4 { padding-right: var(--s4); }
.pr5 { padding-right: var(--s5); }
.pr6 { padding-right: var(--s6); }
.pr7 { padding-right: var(--s7); }

.py0 { padding-top: 0; padding-bottom: 0; }
.py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
.py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
.py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
.py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
.py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
.py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
.py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

.px0 { padding-left: 0; padding-right: 0; }
.px1 { padding-left: var(--s1); padding-right: var(--s1); }
.px2 { padding-left: var(--s2); padding-right: var(--s2); }
.px3 { padding-left: var(--s3); padding-right: var(--s3); }
.px4 { padding-left: var(--s4); padding-right: var(--s4); }
.px5 { padding-left: var(--s5); padding-right: var(--s5); }
.px6 { padding-left: var(--s6); padding-right: var(--s6); }
.px7 { padding-left: var(--s7); padding-right: var(--s7); }
@media (min-width: 30em) {
  .sm-ma  { margin: auto; }
  .sm-mla { margin-left: auto; }
  .sm-mra { margin-right: auto; }
  .sm-mxa { margin-left: auto; margin-right: auto; }

  .sm-m0  { margin: 0; }
  .sm-m1  { margin: var(--s1); }
  .sm-m2  { margin: var(--s2); }
  .sm-m3  { margin: var(--s3); }
  .sm-m4  { margin: var(--s4); }
  .sm-m5  { margin: var(--s5); }
  .sm-m6  { margin: var(--s6); }
  .sm-m7  { margin: var(--s7); }

  .sm-mt0 { margin-top: 0; }
  .sm-mt1 { margin-top: var(--s1); }
  .sm-mt2 { margin-top: var(--s2); }
  .sm-mt3 { margin-top: var(--s3); }
  .sm-mt4 { margin-top: var(--s4); }
  .sm-mt5 { margin-top: var(--s5); }
  .sm-mt6 { margin-top: var(--s6); }
  .sm-mt7 { margin-top: var(--s7); }

  .sm-mb0 { margin-bottom: 0; }
  .sm-mb1 { margin-bottom: var(--s1); }
  .sm-mb2 { margin-bottom: var(--s2); }
  .sm-mb3 { margin-bottom: var(--s3); }
  .sm-mb4 { margin-bottom: var(--s4); }
  .sm-mb5 { margin-bottom: var(--s5); }
  .sm-mb6 { margin-bottom: var(--s6); }
  .sm-mb7 { margin-bottom: var(--s7); }

  .sm-ml0 { margin-left: 0; }
  .sm-ml1 { margin-left: var(--s1); }
  .sm-ml2 { margin-left: var(--s2); }
  .sm-ml3 { margin-left: var(--s3); }
  .sm-ml4 { margin-left: var(--s4); }
  .sm-ml5 { margin-left: var(--s5); }
  .sm-ml6 { margin-left: var(--s6); }
  .sm-ml7 { margin-left: var(--s7); }

  .sm-mr0 { margin-right: 0; }
  .sm-mr1 { margin-right: var(--s1); }
  .sm-mr2 { margin-right: var(--s2); }
  .sm-mr3 { margin-right: var(--s3); }
  .sm-mr4 { margin-right: var(--s4); }
  .sm-mr5 { margin-right: var(--s5); }
  .sm-mr6 { margin-right: var(--s6); }
  .sm-mr7 { margin-right: var(--s7); }

  .sm-my0 { margin-top: 0; margin-bottom: 0; }
  .sm-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .sm-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .sm-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .sm-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .sm-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .sm-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .sm-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .sm-mx0 { margin-left: 0; margin-right: 0; }
  .sm-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .sm-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .sm-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .sm-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .sm-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .sm-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .sm-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .sm-mt-0 { margin-top: 0; }
  .sm-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .sm-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .sm-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .sm-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .sm-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .sm-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .sm-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .sm-mb-0 { margin-bottom: 0; }
  .sm-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .sm-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .sm-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .sm-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .sm-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .sm-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .sm-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .sm-ml-0 { margin-left: 0; }
  .sm-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .sm-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .sm-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .sm-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .sm-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .sm-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .sm-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .sm-mr-0 { margin-right: 0; }
  .sm-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .sm-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .sm-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .sm-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .sm-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .sm-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .sm-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .sm-p0  { padding: 0; }
  .sm-p1  { padding: var(--s1); }
  .sm-p2  { padding: var(--s2); }
  .sm-p3  { padding: var(--s3); }
  .sm-p4  { padding: var(--s4); }
  .sm-p5  { padding: var(--s5); }
  .sm-p6  { padding: var(--s6); }
  .sm-p7  { padding: var(--s7); }

  .sm-pt0 { padding-top: 0; }
  .sm-pt1 { padding-top: var(--s1); }
  .sm-pt2 { padding-top: var(--s2); }
  .sm-pt3 { padding-top: var(--s3); }
  .sm-pt4 { padding-top: var(--s4); }
  .sm-pt5 { padding-top: var(--s5); }
  .sm-pt6 { padding-top: var(--s6); }
  .sm-pt7 { padding-top: var(--s7); }

  .sm-pb0 { padding-bottom: 0; }
  .sm-pb1 { padding-bottom: var(--s1); }
  .sm-pb2 { padding-bottom: var(--s2); }
  .sm-pb3 { padding-bottom: var(--s3); }
  .sm-pb4 { padding-bottom: var(--s4); }
  .sm-pb5 { padding-bottom: var(--s5); }
  .sm-pb6 { padding-bottom: var(--s6); }
  .sm-pb7 { padding-bottom: var(--s7); }

  .sm-pl0 { padding-left: 0; }
  .sm-pl1 { padding-left: var(--s1); }
  .sm-pl2 { padding-left: var(--s2); }
  .sm-pl3 { padding-left: var(--s3); }
  .sm-pl4 { padding-left: var(--s4); }
  .sm-pl5 { padding-left: var(--s5); }
  .sm-pl6 { padding-left: var(--s6); }
  .sm-pl7 { padding-left: var(--s7); }

  .sm-pr0 { padding-right: 0; }
  .sm-pr1 { padding-right: var(--s1); }
  .sm-pr2 { padding-right: var(--s2); }
  .sm-pr3 { padding-right: var(--s3); }
  .sm-pr4 { padding-right: var(--s4); }
  .sm-pr5 { padding-right: var(--s5); }
  .sm-pr6 { padding-right: var(--s6); }
  .sm-pr7 { padding-right: var(--s7); }

  .sm-py0 { padding-top: 0; padding-bottom: 0; }
  .sm-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .sm-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .sm-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .sm-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .sm-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .sm-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .sm-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .sm-px0 { padding-left: 0; padding-right: 0; }
  .sm-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .sm-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .sm-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .sm-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .sm-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .sm-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .sm-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}
@media (min-width: 54em) {
  .md-ma  { margin: auto; }
  .md-mla { margin-left: auto; }
  .md-mra { margin-right: auto; }
  .md-mxa { margin-left: auto; margin-right: auto; }

  .md-m0  { margin: 0; }
  .md-m1  { margin: var(--s1); }
  .md-m2  { margin: var(--s2); }
  .md-m3  { margin: var(--s3); }
  .md-m4  { margin: var(--s4); }
  .md-m5  { margin: var(--s5); }
  .md-m6  { margin: var(--s6); }
  .md-m7  { margin: var(--s7); }

  .md-mt0 { margin-top: 0; }
  .md-mt1 { margin-top: var(--s1); }
  .md-mt2 { margin-top: var(--s2); }
  .md-mt3 { margin-top: var(--s3); }
  .md-mt4 { margin-top: var(--s4); }
  .md-mt5 { margin-top: var(--s5); }
  .md-mt6 { margin-top: var(--s6); }
  .md-mt7 { margin-top: var(--s7); }

  .md-mb0 { margin-bottom: 0; }
  .md-mb1 { margin-bottom: var(--s1); }
  .md-mb2 { margin-bottom: var(--s2); }
  .md-mb3 { margin-bottom: var(--s3); }
  .md-mb4 { margin-bottom: var(--s4); }
  .md-mb5 { margin-bottom: var(--s5); }
  .md-mb6 { margin-bottom: var(--s6); }
  .md-mb7 { margin-bottom: var(--s7); }

  .md-ml0 { margin-left: 0; }
  .md-ml1 { margin-left: var(--s1); }
  .md-ml2 { margin-left: var(--s2); }
  .md-ml3 { margin-left: var(--s3); }
  .md-ml4 { margin-left: var(--s4); }
  .md-ml5 { margin-left: var(--s5); }
  .md-ml6 { margin-left: var(--s6); }
  .md-ml7 { margin-left: var(--s7); }

  .md-mr0 { margin-right: 0; }
  .md-mr1 { margin-right: var(--s1); }
  .md-mr2 { margin-right: var(--s2); }
  .md-mr3 { margin-right: var(--s3); }
  .md-mr4 { margin-right: var(--s4); }
  .md-mr5 { margin-right: var(--s5); }
  .md-mr6 { margin-right: var(--s6); }
  .md-mr7 { margin-right: var(--s7); }

  .md-my0 { margin-top: 0; margin-bottom: 0; }
  .md-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .md-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .md-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .md-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .md-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .md-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .md-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .md-mx0 { margin-left: 0; margin-right: 0; }
  .md-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .md-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .md-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .md-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .md-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .md-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .md-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .md-mt-0 { margin-top: 0; }
  .md-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .md-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .md-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .md-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .md-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .md-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .md-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .md-mb-0 { margin-bottom: 0; }
  .md-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .md-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .md-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .md-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .md-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .md-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .md-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .md-ml-0 { margin-left: 0; }
  .md-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .md-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .md-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .md-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .md-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .md-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .md-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .md-mr-0 { margin-right: 0; }
  .md-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .md-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .md-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .md-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .md-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .md-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .md-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .md-p0  { padding: 0; }
  .md-p1  { padding: var(--s1); }
  .md-p2  { padding: var(--s2); }
  .md-p3  { padding: var(--s3); }
  .md-p4  { padding: var(--s4); }
  .md-p5  { padding: var(--s5); }
  .md-p6  { padding: var(--s6); }
  .md-p7  { padding: var(--s7); }

  .md-pt0 { padding-top: 0; }
  .md-pt1 { padding-top: var(--s1); }
  .md-pt2 { padding-top: var(--s2); }
  .md-pt3 { padding-top: var(--s3); }
  .md-pt4 { padding-top: var(--s4); }
  .md-pt5 { padding-top: var(--s5); }
  .md-pt6 { padding-top: var(--s6); }
  .md-pt7 { padding-top: var(--s7); }

  .md-pb0 { padding-bottom: 0; }
  .md-pb1 { padding-bottom: var(--s1); }
  .md-pb2 { padding-bottom: var(--s2); }
  .md-pb3 { padding-bottom: var(--s3); }
  .md-pb4 { padding-bottom: var(--s4); }
  .md-pb5 { padding-bottom: var(--s5); }
  .md-pb6 { padding-bottom: var(--s6); }
  .md-pb7 { padding-bottom: var(--s7); }

  .md-pl0 { padding-left: 0; }
  .md-pl1 { padding-left: var(--s1); }
  .md-pl2 { padding-left: var(--s2); }
  .md-pl3 { padding-left: var(--s3); }
  .md-pl4 { padding-left: var(--s4); }
  .md-pl5 { padding-left: var(--s5); }
  .md-pl6 { padding-left: var(--s6); }
  .md-pl7 { padding-left: var(--s7); }

  .md-pr0 { padding-right: 0; }
  .md-pr1 { padding-right: var(--s1); }
  .md-pr2 { padding-right: var(--s2); }
  .md-pr3 { padding-right: var(--s3); }
  .md-pr4 { padding-right: var(--s4); }
  .md-pr5 { padding-right: var(--s5); }
  .md-pr6 { padding-right: var(--s6); }
  .md-pr7 { padding-right: var(--s7); }

  .md-py0 { padding-top: 0; padding-bottom: 0; }
  .md-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .md-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .md-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .md-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .md-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .md-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .md-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .md-px0 { padding-left: 0; padding-right: 0; }
  .md-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .md-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .md-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .md-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .md-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .md-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .md-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}
@media (min-width: 64em) {
  .lg-ma  { margin: auto; }
  .lg-mla { margin-left: auto; }
  .lg-mra { margin-right: auto; }
  .lg-mxa { margin-left: auto; margin-right: auto; }

  .lg-m0  { margin: 0; }
  .lg-m1  { margin: var(--s1); }
  .lg-m2  { margin: var(--s2); }
  .lg-m3  { margin: var(--s3); }
  .lg-m4  { margin: var(--s4); }
  .lg-m5  { margin: var(--s5); }
  .lg-m6  { margin: var(--s6); }
  .lg-m7  { margin: var(--s7); }

  .lg-mt0 { margin-top: 0; }
  .lg-mt1 { margin-top: var(--s1); }
  .lg-mt2 { margin-top: var(--s2); }
  .lg-mt3 { margin-top: var(--s3); }
  .lg-mt4 { margin-top: var(--s4); }
  .lg-mt5 { margin-top: var(--s5); }
  .lg-mt6 { margin-top: var(--s6); }
  .lg-mt7 { margin-top: var(--s7); }

  .lg-mb0 { margin-bottom: 0; }
  .lg-mb1 { margin-bottom: var(--s1); }
  .lg-mb2 { margin-bottom: var(--s2); }
  .lg-mb3 { margin-bottom: var(--s3); }
  .lg-mb4 { margin-bottom: var(--s4); }
  .lg-mb5 { margin-bottom: var(--s5); }
  .lg-mb6 { margin-bottom: var(--s6); }
  .lg-mb7 { margin-bottom: var(--s7); }

  .lg-ml0 { margin-left: 0; }
  .lg-ml1 { margin-left: var(--s1); }
  .lg-ml2 { margin-left: var(--s2); }
  .lg-ml3 { margin-left: var(--s3); }
  .lg-ml4 { margin-left: var(--s4); }
  .lg-ml5 { margin-left: var(--s5); }
  .lg-ml6 { margin-left: var(--s6); }
  .lg-ml7 { margin-left: var(--s7); }

  .lg-mr0 { margin-right: 0; }
  .lg-mr1 { margin-right: var(--s1); }
  .lg-mr2 { margin-right: var(--s2); }
  .lg-mr3 { margin-right: var(--s3); }
  .lg-mr4 { margin-right: var(--s4); }
  .lg-mr5 { margin-right: var(--s5); }
  .lg-mr6 { margin-right: var(--s6); }
  .lg-mr7 { margin-right: var(--s7); }

  .lg-my0 { margin-top: 0; margin-bottom: 0; }
  .lg-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .lg-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .lg-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .lg-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .lg-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .lg-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .lg-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .lg-mx0 { margin-left: 0; margin-right: 0; }
  .lg-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .lg-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .lg-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .lg-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .lg-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .lg-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .lg-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .lg-mt-0 { margin-top: 0; }
  .lg-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .lg-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .lg-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .lg-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .lg-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .lg-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .lg-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .lg-mb-0 { margin-bottom: 0; }
  .lg-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .lg-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .lg-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .lg-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .lg-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .lg-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .lg-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .lg-ml-0 { margin-left: 0; }
  .lg-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .lg-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .lg-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .lg-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .lg-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .lg-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .lg-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .lg-mr-0 { margin-right: 0; }
  .lg-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .lg-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .lg-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .lg-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .lg-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .lg-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .lg-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .lg-p0  { padding: 0; }
  .lg-p1  { padding: var(--s1); }
  .lg-p2  { padding: var(--s2); }
  .lg-p3  { padding: var(--s3); }
  .lg-p4  { padding: var(--s4); }
  .lg-p5  { padding: var(--s5); }
  .lg-p6  { padding: var(--s6); }
  .lg-p7  { padding: var(--s7); }

  .lg-pt0 { padding-top: 0; }
  .lg-pt1 { padding-top: var(--s1); }
  .lg-pt2 { padding-top: var(--s2); }
  .lg-pt3 { padding-top: var(--s3); }
  .lg-pt4 { padding-top: var(--s4); }
  .lg-pt5 { padding-top: var(--s5); }
  .lg-pt6 { padding-top: var(--s6); }
  .lg-pt7 { padding-top: var(--s7); }

  .lg-pb0 { padding-bottom: 0; }
  .lg-pb1 { padding-bottom: var(--s1); }
  .lg-pb2 { padding-bottom: var(--s2); }
  .lg-pb3 { padding-bottom: var(--s3); }
  .lg-pb4 { padding-bottom: var(--s4); }
  .lg-pb5 { padding-bottom: var(--s5); }
  .lg-pb6 { padding-bottom: var(--s6); }
  .lg-pb7 { padding-bottom: var(--s7); }

  .lg-pl0 { padding-left: 0; }
  .lg-pl1 { padding-left: var(--s1); }
  .lg-pl2 { padding-left: var(--s2); }
  .lg-pl3 { padding-left: var(--s3); }
  .lg-pl4 { padding-left: var(--s4); }
  .lg-pl5 { padding-left: var(--s5); }
  .lg-pl6 { padding-left: var(--s6); }
  .lg-pl7 { padding-left: var(--s7); }

  .lg-pr0 { padding-right: 0; }
  .lg-pr1 { padding-right: var(--s1); }
  .lg-pr2 { padding-right: var(--s2); }
  .lg-pr3 { padding-right: var(--s3); }
  .lg-pr4 { padding-right: var(--s4); }
  .lg-pr5 { padding-right: var(--s5); }
  .lg-pr6 { padding-right: var(--s6); }
  .lg-pr7 { padding-right: var(--s7); }

  .lg-py0 { padding-top: 0; padding-bottom: 0; }
  .lg-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .lg-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .lg-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .lg-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .lg-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .lg-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .lg-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .lg-px0 { padding-left: 0; padding-right: 0; }
  .lg-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .lg-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .lg-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .lg-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .lg-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .lg-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .lg-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}

@media (min-width: 90em) {
  .xl-ma  { margin: auto; }
  .xl-mla { margin-left: auto; }
  .xl-mra { margin-right: auto; }
  .xl-mxa { margin-left: auto; margin-right: auto; }
  .xl-m0  { margin: 0; }
  .xl-m1  { margin: var(--s1); }
  .xl-m2  { margin: var(--s2); }
  .xl-m3  { margin: var(--s3); }
  .xl-m4  { margin: var(--s4); }
  .xl-m5  { margin: var(--s5); }
  .xl-m6  { margin: var(--s6); }
  .xl-m7  { margin: var(--s7); }

  .xl-mt0 { margin-top: 0; }
  .xl-mt1 { margin-top: var(--s1); }
  .xl-mt2 { margin-top: var(--s2); }
  .xl-mt3 { margin-top: var(--s3); }
  .xl-mt4 { margin-top: var(--s4); }
  .xl-mt5 { margin-top: var(--s5); }
  .xl-mt6 { margin-top: var(--s6); }
  .xl-mt7 { margin-top: var(--s7); }

  .xl-mb0 { margin-bottom: 0; }
  .xl-mb1 { margin-bottom: var(--s1); }
  .xl-mb2 { margin-bottom: var(--s2); }
  .xl-mb3 { margin-bottom: var(--s3); }
  .xl-mb4 { margin-bottom: var(--s4); }
  .xl-mb5 { margin-bottom: var(--s5); }
  .xl-mb6 { margin-bottom: var(--s6); }
  .xl-mb7 { margin-bottom: var(--s7); }

  .xl-ml0 { margin-left: 0; }
  .xl-ml1 { margin-left: var(--s1); }
  .xl-ml2 { margin-left: var(--s2); }
  .xl-ml3 { margin-left: var(--s3); }
  .xl-ml4 { margin-left: var(--s4); }
  .xl-ml5 { margin-left: var(--s5); }
  .xl-ml6 { margin-left: var(--s6); }
  .xl-ml7 { margin-left: var(--s7); }

  .xl-mr0 { margin-right: 0; }
  .xl-mr1 { margin-right: var(--s1); }
  .xl-mr2 { margin-right: var(--s2); }
  .xl-mr3 { margin-right: var(--s3); }
  .xl-mr4 { margin-right: var(--s4); }
  .xl-mr5 { margin-right: var(--s5); }
  .xl-mr6 { margin-right: var(--s6); }
  .xl-mr7 { margin-right: var(--s7); }

  .xl-my0 { margin-top: 0; margin-bottom: 0; }
  .xl-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .xl-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .xl-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .xl-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .xl-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .xl-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .xl-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .xl-mx0 { margin-left: 0; margin-right: 0; }
  .xl-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .xl-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .xl-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .xl-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .xl-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .xl-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .xl-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .xl-mt-0 { margin-top: 0; }
  .xl-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .xl-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .xl-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .xl-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .xl-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .xl-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .xl-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .xl-mb-0 { margin-bottom: 0; }
  .xl-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .xl-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .xl-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .xl-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .xl-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .xl-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .xl-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .xl-ml-0 { margin-left: 0; }
  .xl-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .xl-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .xl-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .xl-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .xl-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .xl-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .xl-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .xl-mr-0 { margin-right: 0; }
  .xl-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .xl-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .xl-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .xl-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .xl-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .xl-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .xl-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .xl-p0  { padding: 0; }
  .xl-p1  { padding: var(--s1); }
  .xl-p2  { padding: var(--s2); }
  .xl-p3  { padding: var(--s3); }
  .xl-p4  { padding: var(--s4); }
  .xl-p5  { padding: var(--s5); }
  .xl-p6  { padding: var(--s6); }
  .xl-p7  { padding: var(--s7); }

  .xl-pt0 { padding-top: 0; }
  .xl-pt1 { padding-top: var(--s1); }
  .xl-pt2 { padding-top: var(--s2); }
  .xl-pt3 { padding-top: var(--s3); }
  .xl-pt4 { padding-top: var(--s4); }
  .xl-pt5 { padding-top: var(--s5); }
  .xl-pt6 { padding-top: var(--s6); }
  .xl-pt7 { padding-top: var(--s7); }

  .xl-pb0 { padding-bottom: 0; }
  .xl-pb1 { padding-bottom: var(--s1); }
  .xl-pb2 { padding-bottom: var(--s2); }
  .xl-pb3 { padding-bottom: var(--s3); }
  .xl-pb4 { padding-bottom: var(--s4); }
  .xl-pb5 { padding-bottom: var(--s5); }
  .xl-pb6 { padding-bottom: var(--s6); }
  .xl-pb7 { padding-bottom: var(--s7); }

  .xl-pl0 { padding-left: 0; }
  .xl-pl1 { padding-left: var(--s1); }
  .xl-pl2 { padding-left: var(--s2); }
  .xl-pl3 { padding-left: var(--s3); }
  .xl-pl4 { padding-left: var(--s4); }
  .xl-pl5 { padding-left: var(--s5); }
  .xl-pl6 { padding-left: var(--s6); }
  .xl-pl7 { padding-left: var(--s7); }

  .xl-pr0 { padding-right: 0; }
  .xl-pr1 { padding-right: var(--s1); }
  .xl-pr2 { padding-right: var(--s2); }
  .xl-pr3 { padding-right: var(--s3); }
  .xl-pr4 { padding-right: var(--s4); }
  .xl-pr5 { padding-right: var(--s5); }
  .xl-pr6 { padding-right: var(--s6); }
  .xl-pr7 { padding-right: var(--s7); }

  .xl-py0 { padding-top: 0; padding-bottom: 0; }
  .xl-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .xl-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .xl-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .xl-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .xl-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .xl-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .xl-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .xl-px0 { padding-left: 0; padding-right: 0; }
  .xl-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .xl-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .xl-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .xl-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .xl-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .xl-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .xl-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}

/* ========================================================= */
/* Overflow
/* ========================================================= */

.ofHidden { overflow: hidden; }
.ofXHidden { overflow-x: hidden; }

.ofAuto { overflow: auto; }

.ofScroll { overflow: scroll; }
.ofYScroll { overflow-y: scroll; }

/* ========================================================= */
/* Position
/* ========================================================= */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: -webkit-sticky; position: sticky; }

/* Combine with .absolute to center elements with arbitrary height/width */
.transformCenter {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.left1px { left: 1px; }
.left2px { left: 2px; }

.tblr0 { top: 0; bottom: 0; left: 0; right: 0; }
.top0 { top: 0; }
.top1 { top: var(--s1); }
.top2 { top: var(--s2); }
.top3 { top: var(--s3); }
.top4 { top: var(--s4); }
.top5 { top: var(--s5); }
.top6 { top: var(--s6); }
.top7 { top: var(--s7); }

.bottom0 { bottom: 0; }
.bottom1 { bottom: var(--s1); }
.bottom2 { bottom: var(--s2); }
.bottom3 { bottom: var(--s3); }
.bottom4 { bottom: var(--s4); }
.bottom5 { bottom: var(--s5); }
.bottom6 { bottom: var(--s6); }
.bottom7 { bottom: var(--s7); }

.left0 { left: 0; }
.left1 { left: var(--s1); }
.left2 { left: var(--s2); }
.left3 { left: var(--s3); }
.left4 { left: var(--s4); }
.left5 { left: var(--s5); }
.left6 { left: var(--s6); }
.left7 { left: var(--s7); }

.right0 { right: 0; }
.right1 { right: var(--s1); }
.right2 { right: var(--s2); }
.right3 { right: var(--s3); }
.right4 { right: var(--s4); }
.right5 { right: var(--s5); }
.right6 { right: var(--s6); }
.right7 { right: var(--s7); }

.top-0 { top: 0; }
.top-1 { top: calc(0rem - var(--s1)); }
.top-2 { top: calc(0rem - var(--s2)); }
.top-3 { top: calc(0rem - var(--s3)); }
.top-4 { top: calc(0rem - var(--s4)); }
.top-5 { top: calc(0rem - var(--s5)); }
.top-6 { top: calc(0rem - var(--s6)); }
.top-7 { top: calc(0rem - var(--s7)); }

.bottom-0 { bottom: 0; }
.bottom-1 { bottom: calc(0rem - var(--s1)); }
.bottom-2 { bottom: calc(0rem - var(--s2)); }
.bottom-3 { bottom: calc(0rem - var(--s3)); }
.bottom-4 { bottom: calc(0rem - var(--s4)); }
.bottom-5 { bottom: calc(0rem - var(--s5)); }
.bottom-6 { bottom: calc(0rem - var(--s6)); }
.bottom-7 { bottom: calc(0rem - var(--s7)); }

.left-0 { left: 0; }
.left-1 { left: calc(0rem - var(--s1)); }
.left-2 { left: calc(0rem - var(--s2)); }
.left-3 { left: calc(0rem - var(--s3)); }
.left-4 { left: calc(0rem - var(--s4)); }
.left-5 { left: calc(0rem - var(--s5)); }
.left-6 { left: calc(0rem - var(--s6)); }
.left-7 { left: calc(0rem - var(--s7)); }

.right-0 { right: 0; }
.right-1 { right: calc(0rem - var(--s1)); }
.right-2 { right: calc(0rem - var(--s2)); }
.right-3 { right: calc(0rem - var(--s3)); }
.right-4 { right: calc(0rem - var(--s4)); }
.right-5 { right: calc(0rem - var(--s5)); }
.right-6 { right: calc(0rem - var(--s6)); }
.right-7 { right: calc(0rem - var(--s7)); }

@media (min-width: 30em) {
  .sm-relative { position: relative; }
  .sm-absolute { position: absolute; }
  .sm-fixed { position: fixed; }
  .sm-sticky { position: sticky; }
  .sm-tblr0 { top: 0; bottom: 0; left: 0; right: 0; }
  .sm-top0 { top: 0; }
  .sm-top1 { top: var(--s1); }
  .sm-top2 { top: var(--s2); }
  .sm-top3 { top: var(--s3); }
  .sm-top4 { top: var(--s4); }
  .sm-top5 { top: var(--s5); }
  .sm-top6 { top: var(--s6); }
  .sm-top7 { top: var(--s7); }
  .sm-bottom0 { bottom: 0; }
  .sm-bottom1 { bottom: var(--s1); }
  .sm-bottom2 { bottom: var(--s2); }
  .sm-bottom3 { bottom: var(--s3); }
  .sm-bottom4 { bottom: var(--s4); }
  .sm-bottom5 { bottom: var(--s5); }
  .sm-bottom6 { bottom: var(--s6); }
  .sm-bottom7 { bottom: var(--s7); }
  .sm-left0 { left: 0; }
  .sm-left1 { left: var(--s1); }
  .sm-left2 { left: var(--s2); }
  .sm-left3 { left: var(--s3); }
  .sm-left4 { left: var(--s4); }
  .sm-left5 { left: var(--s5); }
  .sm-left6 { left: var(--s6); }
  .sm-left7 { left: var(--s7); }
  .sm-right0 { right: 0; }
  .sm-right1 { right: var(--s1); }
  .sm-right2 { right: var(--s2); }
  .sm-right3 { right: var(--s3); }
  .sm-right4 { right: var(--s4); }
  .sm-right5 { right: var(--s5); }
  .sm-right6 { right: var(--s6); }
  .sm-right7 { right: var(--s7); }
  .sm-top-0 { top: 0; }
  .sm-top-1 { top: calc(0rem - var(--s1)); }
  .sm-top-2 { top: calc(0rem - var(--s2)); }
  .sm-top-3 { top: calc(0rem - var(--s3)); }
  .sm-top-4 { top: calc(0rem - var(--s4)); }
  .sm-top-5 { top: calc(0rem - var(--s5)); }
  .sm-top-6 { top: calc(0rem - var(--s6)); }
  .sm-top-7 { top: calc(0rem - var(--s7)); }
  .sm-bottom-0 { bottom: 0; }
  .sm-bottom-1 { bottom: calc(0rem - var(--s1)); }
  .sm-bottom-2 { bottom: calc(0rem - var(--s2)); }
  .sm-bottom-3 { bottom: calc(0rem - var(--s3)); }
  .sm-bottom-4 { bottom: calc(0rem - var(--s4)); }
  .sm-bottom-5 { bottom: calc(0rem - var(--s5)); }
  .sm-bottom-6 { bottom: calc(0rem - var(--s6)); }
  .sm-bottom-7 { bottom: calc(0rem - var(--s7)); }
  .sm-left-0 { left: 0; }
  .sm-left-1 { left: calc(0rem - var(--s1)); }
  .sm-left-2 { left: calc(0rem - var(--s2)); }
  .sm-left-3 { left: calc(0rem - var(--s3)); }
  .sm-left-4 { left: calc(0rem - var(--s4)); }
  .sm-left-5 { left: calc(0rem - var(--s5)); }
  .sm-left-6 { left: calc(0rem - var(--s6)); }
  .sm-left-7 { left: calc(0rem - var(--s7)); }
  .sm-right-0 { right: 0; }
  .sm-right-1 { right: calc(0rem - var(--s1)); }
  .sm-right-2 { right: calc(0rem - var(--s2)); }
  .sm-right-3 { right: calc(0rem - var(--s3)); }
  .sm-right-4 { right: calc(0rem - var(--s4)); }
  .sm-right-5 { right: calc(0rem - var(--s5)); }
  .sm-right-6 { right: calc(0rem - var(--s6)); }
  .sm-right-7 { right: calc(0rem - var(--s7)); }
}

@media (min-width: 54em) {
  .md-relative { position: relative; }
  .md-absolute { position: absolute; }
  .md-fixed { position: fixed; }
  .md-sticky { position: sticky; }
  .md-top0 { top: 0; }
  .md-top1 { top: var(--s1); }
  .md-top2 { top: var(--s2); }
  .md-top3 { top: var(--s3); }
  .md-top4 { top: var(--s4); }
  .md-top5 { top: var(--s5); }
  .md-top6 { top: var(--s6); }
  .md-top7 { top: var(--s7); }
  .md-bottom0 { bottom: 0; }
  .md-bottom1 { bottom: var(--s1); }
  .md-bottom2 { bottom: var(--s2); }
  .md-bottom3 { bottom: var(--s3); }
  .md-bottom4 { bottom: var(--s4); }
  .md-bottom5 { bottom: var(--s5); }
  .md-bottom6 { bottom: var(--s6); }
  .md-bottom7 { bottom: var(--s7); }
  .md-left0 { left: 0; }
  .md-left1 { left: var(--s1); }
  .md-left2 { left: var(--s2); }
  .md-left3 { left: var(--s3); }
  .md-left4 { left: var(--s4); }
  .md-left5 { left: var(--s5); }
  .md-left6 { left: var(--s6); }
  .md-left7 { left: var(--s7); }
  .md-right0 { right: 0; }
  .md-right1 { right: var(--s1); }
  .md-right2 { right: var(--s2); }
  .md-right3 { right: var(--s3); }
  .md-right4 { right: var(--s4); }
  .md-right5 { right: var(--s5); }
  .md-right6 { right: var(--s6); }
  .md-right7 { right: var(--s7); }
  .md-top-0 { top: 0; }
  .md-top-1 { top: calc(0rem - var(--s1)); }
  .md-top-2 { top: calc(0rem - var(--s2)); }
  .md-top-3 { top: calc(0rem - var(--s3)); }
  .md-top-4 { top: calc(0rem - var(--s4)); }
  .md-top-5 { top: calc(0rem - var(--s5)); }
  .md-top-6 { top: calc(0rem - var(--s6)); }
  .md-top-7 { top: calc(0rem - var(--s7)); }
  .md-bottom-0 { bottom: 0; }
  .md-bottom-1 { bottom: calc(0rem - var(--s1)); }
  .md-bottom-2 { bottom: calc(0rem - var(--s2)); }
  .md-bottom-3 { bottom: calc(0rem - var(--s3)); }
  .md-bottom-4 { bottom: calc(0rem - var(--s4)); }
  .md-bottom-5 { bottom: calc(0rem - var(--s5)); }
  .md-bottom-6 { bottom: calc(0rem - var(--s6)); }
  .md-bottom-7 { bottom: calc(0rem - var(--s7)); }
  .md-left-0 { left: 0; }
  .md-left-1 { left: calc(0rem - var(--s1)); }
  .md-left-2 { left: calc(0rem - var(--s2)); }
  .md-left-3 { left: calc(0rem - var(--s3)); }
  .md-left-4 { left: calc(0rem - var(--s4)); }
  .md-left-5 { left: calc(0rem - var(--s5)); }
  .md-left-6 { left: calc(0rem - var(--s6)); }
  .md-left-7 { left: calc(0rem - var(--s7)); }
  .md-right-0 { right: 0; }
  .md-right-1 { right: calc(0rem - var(--s1)); }
  .md-right-2 { right: calc(0rem - var(--s2)); }
  .md-right-3 { right: calc(0rem - var(--s3)); }
  .md-right-4 { right: calc(0rem - var(--s4)); }
  .md-right-5 { right: calc(0rem - var(--s5)); }
  .md-right-6 { right: calc(0rem - var(--s6)); }
  .md-right-7 { right: calc(0rem - var(--s7)); }
}

@media (min-width: 64em) {
  .lg-relative { position: relative; }
  .lg-absolute { position: absolute; }
  .lg-fixed { position: fixed; }
  .lg-sticky { position: sticky; }
  .lg-tblr0 { top: 0; bottom: 0; left: 0; right: 0; }
  .lg-top0 { top: 0; }
  .lg-top1 { top: var(--s1); }
  .lg-top2 { top: var(--s2); }
  .lg-top3 { top: var(--s3); }
  .lg-top4 { top: var(--s4); }
  .lg-top5 { top: var(--s5); }
  .lg-top6 { top: var(--s6); }
  .lg-top7 { top: var(--s7); }
  .lg-bottom0 { bottom: 0; }
  .lg-bottom1 { bottom: var(--s1); }
  .lg-bottom2 { bottom: var(--s2); }
  .lg-bottom3 { bottom: var(--s3); }
  .lg-bottom4 { bottom: var(--s4); }
  .lg-bottom5 { bottom: var(--s5); }
  .lg-bottom6 { bottom: var(--s6); }
  .lg-bottom7 { bottom: var(--s7); }
  .lg-left0 { left: 0; }
  .lg-left1 { left: var(--s1); }
  .lg-left2 { left: var(--s2); }
  .lg-left3 { left: var(--s3); }
  .lg-left4 { left: var(--s4); }
  .lg-left5 { left: var(--s5); }
  .lg-left6 { left: var(--s6); }
  .lg-left7 { left: var(--s7); }
  .lg-right0 { right: 0; }
  .lg-right1 { right: var(--s1); }
  .lg-right2 { right: var(--s2); }
  .lg-right3 { right: var(--s3); }
  .lg-right4 { right: var(--s4); }
  .lg-right5 { right: var(--s5); }
  .lg-right6 { right: var(--s6); }
  .lg-right7 { right: var(--s7); }
  .lg-top-0 { top: 0; }
  .lg-top-1 { top: calc(0rem - var(--s1)); }
  .lg-top-2 { top: calc(0rem - var(--s2)); }
  .lg-top-3 { top: calc(0rem - var(--s3)); }
  .lg-top-4 { top: calc(0rem - var(--s4)); }
  .lg-top-5 { top: calc(0rem - var(--s5)); }
  .lg-top-6 { top: calc(0rem - var(--s6)); }
  .lg-top-7 { top: calc(0rem - var(--s7)); }
  .lg-bottom-0 { bottom: 0; }
  .lg-bottom-1 { bottom: calc(0rem - var(--s1)); }
  .lg-bottom-2 { bottom: calc(0rem - var(--s2)); }
  .lg-bottom-3 { bottom: calc(0rem - var(--s3)); }
  .lg-bottom-4 { bottom: calc(0rem - var(--s4)); }
  .lg-bottom-5 { bottom: calc(0rem - var(--s5)); }
  .lg-bottom-6 { bottom: calc(0rem - var(--s6)); }
  .lg-bottom-7 { bottom: calc(0rem - var(--s7)); }
  .lg-left-0 { left: 0; }
  .lg-left-1 { left: calc(0rem - var(--s1)); }
  .lg-left-2 { left: calc(0rem - var(--s2)); }
  .lg-left-3 { left: calc(0rem - var(--s3)); }
  .lg-left-4 { left: calc(0rem - var(--s4)); }
  .lg-left-5 { left: calc(0rem - var(--s5)); }
  .lg-left-6 { left: calc(0rem - var(--s6)); }
  .lg-left-7 { left: calc(0rem - var(--s7)); }
  .lg-right-0 { right: 0; }
  .lg-right-1 { right: calc(0rem - var(--s1)); }
  .lg-right-2 { right: calc(0rem - var(--s2)); }
  .lg-right-3 { right: calc(0rem - var(--s3)); }
  .lg-right-4 { right: calc(0rem - var(--s4)); }
  .lg-right-5 { right: calc(0rem - var(--s5)); }
  .lg-right-6 { right: calc(0rem - var(--s6)); }
  .lg-right-7 { right: calc(0rem - var(--s7)); }
}

@media (min-width: 90em) {
  .xl-relative { position: relative; }
  .xl-absolute { position: absolute; }
  .xl-fixed { position: fixed; }
  .xl-sticky { position: sticky; }
  .xl-tblr0 { top: 0; bottom: 0; left: 0; right: 0; }
  .xl-top0 { top: 0; }
  .xl-top1 { top: var(--s1); }
  .xl-top2 { top: var(--s2); }
  .xl-top3 { top: var(--s3); }
  .xl-top4 { top: var(--s4); }
  .xl-top5 { top: var(--s5); }
  .xl-top6 { top: var(--s6); }
  .xl-top7 { top: var(--s7); }
  .xl-bottom0 { bottom: 0; }
  .xl-bottom1 { bottom: var(--s1); }
  .xl-bottom2 { bottom: var(--s2); }
  .xl-bottom3 { bottom: var(--s3); }
  .xl-bottom4 { bottom: var(--s4); }
  .xl-bottom5 { bottom: var(--s5); }
  .xl-bottom6 { bottom: var(--s6); }
  .xl-bottom7 { bottom: var(--s7); }
  .xl-left0 { left: 0; }
  .xl-left1 { left: var(--s1); }
  .xl-left2 { left: var(--s2); }
  .xl-left3 { left: var(--s3); }
  .xl-left4 { left: var(--s4); }
  .xl-left5 { left: var(--s5); }
  .xl-left6 { left: var(--s6); }
  .xl-left7 { left: var(--s7); }
  .xl-right0 { right: 0; }
  .xl-right1 { right: var(--s1); }
  .xl-right2 { right: var(--s2); }
  .xl-right3 { right: var(--s3); }
  .xl-right4 { right: var(--s4); }
  .xl-right5 { right: var(--s5); }
  .xl-right6 { right: var(--s6); }
  .xl-right7 { right: var(--s7); }
  .xl-top-0 { top: 0; }
  .xl-top-1 { top: calc(0rem - var(--s1)); }
  .xl-top-2 { top: calc(0rem - var(--s2)); }
  .xl-top-3 { top: calc(0rem - var(--s3)); }
  .xl-top-4 { top: calc(0rem - var(--s4)); }
  .xl-top-5 { top: calc(0rem - var(--s5)); }
  .xl-top-6 { top: calc(0rem - var(--s6)); }
  .xl-top-7 { top: calc(0rem - var(--s7)); }
  .xl-bottom-0 { bottom: 0; }
  .xl-bottom-1 { bottom: calc(0rem - var(--s1)); }
  .xl-bottom-2 { bottom: calc(0rem - var(--s2)); }
  .xl-bottom-3 { bottom: calc(0rem - var(--s3)); }
  .xl-bottom-4 { bottom: calc(0rem - var(--s4)); }
  .xl-bottom-5 { bottom: calc(0rem - var(--s5)); }
  .xl-bottom-6 { bottom: calc(0rem - var(--s6)); }
  .xl-bottom-7 { bottom: calc(0rem - var(--s7)); }
  .xl-left-0 { left: 0; }
  .xl-left-1 { left: calc(0rem - var(--s1)); }
  .xl-left-2 { left: calc(0rem - var(--s2)); }
  .xl-left-3 { left: calc(0rem - var(--s3)); }
  .xl-left-4 { left: calc(0rem - var(--s4)); }
  .xl-left-5 { left: calc(0rem - var(--s5)); }
  .xl-left-6 { left: calc(0rem - var(--s6)); }
  .xl-left-7 { left: calc(0rem - var(--s7)); }
  .xl-right-0 { right: 0; }
  .xl-right-1 { right: calc(0rem - var(--s1)); }
  .xl-right-2 { right: calc(0rem - var(--s2)); }
  .xl-right-3 { right: calc(0rem - var(--s3)); }
  .xl-right-4 { right: calc(0rem - var(--s4)); }
  .xl-right-5 { right: calc(0rem - var(--s5)); }
  .xl-right-6 { right: calc(0rem - var(--s6)); }
  .xl-right-7 { right: calc(0rem - var(--s7)); }
}

/* ========================================================= */
/* Size
/* ========================================================= */

.heightAuto { height: auto; }
.widthAuto  { width: auto; }
.height100 { height: 100%; }
.width100  { width: 100%; }
.maxWidth100 { max-width: 100%; }
.maxHeight100 { max-height: 100%; }
.maxWidthNone { max-width: none; }
.minWidth100 { min-width: 100%; }
.minHeight100 { min-height: 100%; }
.minWidthNone { min-width: none; }
.width0 { width: 0; }
.width1 { width: var(--s1); }
.width2 { width: var(--s2); }
.width3 { width: var(--s3); }
.width4 { width: var(--s4); }
.width5 { width: var(--s5); }
.width6 { width: var(--s6); }
.width7 { width: var(--s7); }
.height0 { height: 0; }
.height1 { height: var(--s1); }
.height2 { height: var(--s2); }
.height3 { height: var(--s3); }
.height4 { height: var(--s4); }
.height5 { height: var(--s5); }
.height6 { height: var(--s6); }
.height7 { height: var(--s7); }

/* ========================================================= */
/* Text Align
/* ========================================================= */

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
@media (min-width: 30em) {
  .sm-left { text-align: left; }
  .sm-right { text-align: right; }
  .sm-center { text-align: center; }
}
@media (min-width: 54em) {
  .md-left { text-align: left; }
  .md-right { text-align: right; }
  .md-center { text-align: center; }
}
@media (min-width: 64em) {
  .lg-left { text-align: left; }
  .lg-right { text-align: right; }
  .lg-center { text-align: center; }
}
@media (min-width: 90em) {
  .xl-left { text-align: left; }
  .xl-right { text-align: right; }
  .xl-center { text-align: center; }
}

/* ========================================================= */
/* Z-Index
/* ========================================================= */

.z1  { z-index: 1; }
.z2  { z-index: 2; }
.z3  { z-index: 3; }
.z4  { z-index: 4; }
.z5  { z-index: 5; }
.z6  { z-index: 6; }
.z-1 { z-index: -1; }