/**
 * Z-index
 */
.z-0 {
  z-index: 0;
}
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}
.z-3 {
  z-index: 3;
}
.z-4 {
  z-index: 4;
}
.z-5 {
  z-index: 5;
}

/**
 * Position
 */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

/**
 * Top, right, bottom, left
 */
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.top-0 {
  top: 0;
}
.top-4 {
  top: 0.25rem;
}
.top-8 {
  top: 0.5rem;
}
.top-10 {
  top: 0.625rem;
}
.top-12 {
  top: 0.75rem;
}
.top-16 {
  top: 1rem;
}
.top-20 {
  top: 1.25rem;
}
.top-24 {
  top: 1.5rem;
}
.top-32 {
  top: 2rem;
}
.top-40 {
  top: 2.5rem;
}

.-top-4 {
  top: -0.25rem;
}
.-top-8 {
  top: -0.5rem;
}
.-top-10 {
  top: -0.625rem;
}
.-top-12 {
  top: -0.75rem;
}
.-top-16 {
  top: -1rem;
}
.-top-20 {
  top: -1.25rem;
}
.-top-24 {
  top: -1.5rem;
}
.-top-32 {
  top: -2rem;
}
.-top-40 {
  top: -2.5rem;
}

.right-0 {
  right: 0;
}
.right-4 {
  right: 0.25rem;
}
.right-8 {
  right: 0.5rem;
}
.right-10 {
  right: 0.625rem;
}
.right-12 {
  right: 0.75rem;
}
.right-16 {
  right: 1rem;
}
.right-20 {
  right: 1.25rem;
}
.right-24 {
  right: 1.5rem;
}
.right-32 {
  right: 2rem;
}
.right-40 {
  right: 2.5rem;
}

.-right-4 {
  right: -0.25rem;
}
.-right-8 {
  right: -0.5rem;
}
.-right-10 {
  right: -0.625rem;
}
.-right-12 {
  right: -0.75rem;
}
.-right-16 {
  right: -1rem;
}
.-right-20 {
  right: -1.25rem;
}
.-right-24 {
  right: -1.5rem;
}
.-right-32 {
  right: -2rem;
}
.-right-40 {
  right: -2.5rem;
}

.bottom-0 {
  bottom: 0;
}
.bottom-4 {
  bottom: 0.25rem;
}
.bottom-8 {
  bottom: 0.5rem;
}
.bottom-10 {
  bottom: 0.625rem;
}
.bottom-12 {
  bottom: 0.75rem;
}
.bottom-16 {
  bottom: 1rem;
}
.bottom-20 {
  bottom: 1.25rem;
}
.bottom-24 {
  bottom: 1.5rem;
}
.bottom-32 {
  bottom: 2rem;
}
.bottom-40 {
  bottom: 2.5rem;
}

.-bottom-4 {
  bottom: -0.25rem;
}
.-bottom-8 {
  bottom: -0.5rem;
}
.-bottom-10 {
  bottom: -0.625rem;
}
.-bottom-12 {
  bottom: -0.75rem;
}
.-bottom-16 {
  bottom: -1rem;
}
.-bottom-20 {
  bottom: -1.25rem;
}
.-bottom-24 {
  bottom: -1.5rem;
}
.-bottom-32 {
  bottom: -2rem;
}
.-bottom-40 {
  bottom: -2.5rem;
}

.left-0 {
  left: 0;
}
.left-4 {
  left: 0.25rem;
}
.left-8 {
  left: 0.5rem;
}
.left-10 {
  left: 0.625rem;
}
.left-12 {
  left: 0.75rem;
}
.left-16 {
  left: 1rem;
}
.left-20 {
  left: 1.25rem;
}
.left-24 {
  left: 1.5rem;
}
.left-32 {
  left: 2rem;
}
.left-40 {
  left: 2.5rem;
}

.-left-4 {
  left: -0.25rem;
}
.-left-8 {
  left: -0.5rem;
}
.-left-10 {
  left: -0.625rem;
}
.-left-12 {
  left: -0.75rem;
}
.-left-16 {
  left: -1rem;
}
.-left-20 {
  left: -1.25rem;
}
.-left-24 {
  left: -1.5rem;
}
.-left-32 {
  left: -2rem;
}
.-left-40 {
  left: -2.5rem;
}

@media screen and (min-width: 768px) {
  .md--relative {
    position: relative;
  }
  .md--absolute {
    position: absolute;
  }
  .md--fixed {
    position: fixed;
  }
  .md--sticky {
    position: sticky;
  }
}

@media screen and (min-width: 1024px) {
  .lg--relative {
    position: relative;
  }
  .lg--absolute {
    position: absolute;
  }
  .lg--fixed {
    position: fixed;
  }
  .lg--sticky {
    position: sticky;
  }
  .lg--top-120 {
    top: 7.5rem;
  }
}

@media screen and (min-width: 1200px) {
  .xl--relative {
    position: relative;
  }
  .xl--absolute {
    position: absolute;
  }
  .xl--fixed {
    position: fixed;
  }
  .xl--sticky {
    position: sticky;
  }
}