.root {
}

.group {
  padding-left: 8%;
  padding-right: 8%;
  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%;
}

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

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

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

.narrowViewport.right .sticky {
  margin-left: auto;
}

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

.wideViewport.right .sticky {
  float: left;
}

.root {
}

.group {
  padding-left: 8%;
  padding-right: 8%;
  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%;
}

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

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

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

.narrowViewport.right .sticky {
  margin-left: auto;
}

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

.wideViewport.right .sticky {
  float: left;
}

Apply consist max-width to wide elements
Apply consist max-width to wide elements

Do not apply inline content max width below wide viewport. This
prevents awkward intermediate states on tablets.

REDMINE-19482
