.expand,
.expandx,
.expandx-start,
.expandx-end,
.expandy,
.expandy-top,
.expandy-bottom {
  position: relative;
}

.expand,
.expandx,
.expandx-start,
.expandx-end {
  //--lx-expand-contained-w: calc(100vw - var(--lx-scrollbar-width, 17px));
  --lx-expand-ps: calc((var(--#{$prefix}gutter-x) * .5));
  --lx-expand-pe: calc((var(--#{$prefix}gutter-x) * .5));
  --lx-expand-ms: calc((var(--#{$prefix}gutter-x) * .5));
  --lx-expand-me: calc((var(--#{$prefix}gutter-x) * .5));
  --lx-expand-w: calc(100% + var(--lx-expand-ms) + var(--lx-expand-me));

  width: var(--lx-expand-w);
  padding-right: var(--lx-expand-pe);
  padding-left: var(--lx-expand-ps);
  margin-right: calc(-1 * var(--lx-expand-me));
  margin-left: calc(-1 * var(--lx-expand-ms));
}

.expand,
.expandx,
.expandx-start {
  --lx-expand-ms: var(--#{$prefix}container-outer-w);
}

.expand,
.expandx,
.expandx-end {
  --lx-expand-me: var(--#{$prefix}container-outer-w);
}

.expand,
.expandy,
.expandy-top,
.expandy-bottom {
  //--lx-expand-contained-w: calc(100vw - var(--lx-scrollbar-width, 17px));
  --lx-expand-pt: 0;
  --lx-expand-pb: 0;
  --lx-expand-mt: 0;
  --lx-expand-mb: 0;
  --lx-expand-h: calc(100% + var(--lx-expand-mt) + var(--lx-expand-mb));

  height: var(--lx-expand-h);
  padding-top: var(--lx-expand-pt);
  padding-bottom: var(--lx-expand-pb);
  margin-top: calc(-1 * var(--lx-expand-mt));
  margin-bottom: calc(-1 * var(--lx-expand-mb));
}

.expand,
.expandy,
.expandy-top {
  --lx-expand-mt: var(--lx-section-spacer-t);
}

.expand,
.expandy,
.expandy-bottom {
  --lx-expand-mb: var(--lx-section-spacer-b);
}

.expand--realign,
.expandx--realign {
  --lx-expand-ps: var(--#{$prefix}container-outer-w);
  --lx-expand-pe: var(--#{$prefix}container-outer-w);
}

.expand--realign,
.expandy--realign {
  --lx-expand-pt: var(--lx-section-spacer-t);
  --lx-expand-pb: var(--lx-section-spacer-b);
}