@import url('./_size.css');

.auto {
  margin: auto;
}

/* 1.5 */
.hor-xx-small {
  margin-left: calc($base / 8);
  margin-right: calc($base / 8);
}

/* 3 */
.top-x-small {
  margin-top: calc($base / 4);
}

.left-x-small {
  margin-left: calc($base / 4);
}

.hor-x-small {
  margin-left: calc($base / 4);
  margin-right: calc($base / 4);
}

/* 6 */
.left-small {
  margin-left: calc($base / 2);
}

.top-small {
  margin-top: calc($base / 2);
}

.hor-small {
  margin-left: calc($base / 2);
  margin-right: calc($base / 2);
}

.small {
  margin: calc($base / 2);
}

/* 12 */
.left-medium {
  margin-left: calc($base * 1);
}

.right-medium {
  margin-right: calc($base * 1);
}

.top-medium {
  margin-top: calc($base * 1);
}

.hor-medium {
  margin-left: calc($base * 1);
  margin-right: calc($base * 1);
}

/* 24 */
.left-large {
  margin-left: calc($base * 2);
}

.top-large {
  margin-top: calc($base * 2);
}

/* 36 */
.top-x-large {
  margin-top: calc($base * 3);
}