/* ------------------------------ */
/* ------------------------------ */

/*

0.  WRAPPERS
1.  FLEX
2.  MARGINS
3.  PADDING
4.  FLOATS

*/

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 0. WRAPPERS */
/* -------------------------------------------- */

.wrapper.inlineBl {
  display: inline-block;
}
.wrapper.textContent.inline p {
  display: inline-block;
}

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 1. FLEX */
/* ---------------------------------------- */

.wrapper.flx {
  display: flex;
}
.wrapper.flx.alignEnd {
  align-items: flex-end;
}
.wrapper.flx.btw {
  justify-content: space-between;
}

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 2. MARGINS */
/* ------------------------------------------- */

.mg-t-1 {
  margin-top: calc(var(--sizeUnit) * 1);
}
.mg-t-2 {
  margin-top: calc(var(--sizeUnit) * 2);
}
.mg-t-3 {
  margin-top: calc(var(--sizeUnit) * 3);
}

.mg-r-1 {
  margin-right: calc(var(--sizeUnit) * 1);
}
.mg-r-2 {
  margin-right: calc(var(--sizeUnit) * 2);
}
.mg-r-3 {
  margin-right: calc(var(--sizeUnit) * 3);
}

.mg-b-1 {
  margin-bottom: calc(var(--sizeUnit) * 1);
}
.mg-b-2 {
  margin-bottom: calc(var(--sizeUnit) * 2);
}
.mg-b-3 {
  margin-bottom: calc(var(--sizeUnit) * 3);
}

.mg-l-1 {
  margin-left: calc(var(--sizeUnit) * 1);
}
.mg-l-2 {
  margin-left: calc(var(--sizeUnit) * 2);
}
.mg-l-3 {
  margin-left: calc(var(--sizeUnit) * 3);
}

.mg-b-1line {
  margin-bottom: 1.2em;
}

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 3. PADDING */
/* ------------------------------------------- */

.pd-t-1 {
  padding-top: calc(var(--sizeUnit) * 1);
}
.pd-t-2 {
  padding-top: calc(var(--sizeUnit) * 2);
}
.pd-t-3 {
  padding-top: calc(var(--sizeUnit) * 3);
}

.pd-r-1 {
  padding-right: calc(var(--sizeUnit) * 1);
}
.pd-r-2 {
  padding-right: calc(var(--sizeUnit) * 2);
}
.pd-r-3 {
  padding-right: calc(var(--sizeUnit) * 3);
}

.pd-b-1 {
  padding-bottom: calc(var(--sizeUnit) * 1);
}
.pd-b-2 {
  padding-bottom: calc(var(--sizeUnit) * 2);
}
.pd-b-3 {
  padding-bottom: calc(var(--sizeUnit) * 3);
}

.pd-l-1 {
  padding-left: calc(var(--sizeUnit) * 1);
}
.pd-l-2 {
  padding-left: calc(var(--sizeUnit) * 2);
}
.pd-l-3 {
  padding-left: calc(var(--sizeUnit) * 3);
}

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 4. FLOATS */
/* ------------------------------------------ */

.fl-r {
  float: right;
}

/* ------------------------------ */
/* ------------------------------ */