codevise/pageflow

.root {
}

.group {
  --content-margin-fraction: 0.08;
  --content-margin: calc(var(--content-margin-fraction) * 100%);
  padding-left: var(--content-margin);
  padding-right: var(--content-margin);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--section-max-width, none);
}

.group-full {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  width: 100%;
}

.box {
  max-width: var(--content-max-width);
}

.inline {
  --content-max-width: var(--two-column-inline-content-max-width, 500px);
}

.inline.width-lg {
  --content-max-width: var(--two-column-inline-lg-content-max-width, 700px);
}

.inline.width-xl {
  --content-max-width: var(--two-column-inline-xl-content-max-width, 1200px);
}

.inline.width-full {
  --content-margin-fraction: 0;
  --content-max-width: none;
}

.restrict-xxs,
.restrict-xs,
.restrict-sm {
  margin: 0 auto;
}

.restrict-xxs {
  width: 30%;
}

.restrict-xs {
  width: 50%;
}

.restrict-sm {
  width: 70%;
}

.customMargin {
  /*
    We want to undo the group padding by applying a negative margin to
    the box.

    Percentage margin and max-width of the box are calculated relative
    to the inner width and height of the group, which does not include
    the padding of the group. We apply a factor to express the group
    width in terms of box width. Note that

          box-width = group-width - 2 * group-width * content-margin-factor
      <=> group-width = box-width / (1 - 2 * content-margin-factor)
  */
  --f: calc(1 / (1 - 2 * var(--content-margin-fraction)));
  margin-left: calc(-100% * var(--content-margin-fraction) * var(--f));
  margin-right: calc(-100% * var(--content-margin-fraction) * var(--f));
  max-width: calc(var(--content-margin) * var(--f) * 2 + var(--content-max-width));
}

.right .inline {
  margin-left: auto;
}

.sticky {
  --content-width: var(--theme-two-column-sticky-content-width, 25vw);
  --content-max-width: min(var(--content-width), var(--two-column-sticky-content-max-width, 600px));
  position: sticky;
  float: right;
  clear: both;
  top: 33%;
  width: var(--content-width);
}

.right .sticky {
  float: left;
}

.sticky.width-lg {
  --content-width: var(--theme-two-column-sticky-lg-content-width, 35vw);
  --content-max-width: min(var(--content-width),
                           var(--two-column-sticky-lg-content-max-width, 700px));
}

.sticky.width-xl {
  --content-width: var(--theme-two-column-sticky-xl-content-width, 45vw);
  --content-max-width: min(var(--content-width),
                           var(--two-column-sticky-xl-content-max-width, 1000px));
}

.sticky.customMargin {
  width: 100%;
}