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

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

/* 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-static { position: static; }
  .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: 48em) {
  .md-relative { position: relative; }
  .md-absolute { position: absolute; }
  .md-fixed { position: fixed; }
  .md-sticky { position: sticky; }
  .md-static { position: static; }
  .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-static { position: static; }
  .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-static { position: static; }
  .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)); }
}