.content-grid{--padding-inline:1rem;--mini-max-width:440px;--compact-max-width:640px;--content-max-width:900px;--breakout-max-width:1200px;--compact-size:calc((var(--compact-max-width) - var(--mini-max-width)) / 2);--content-size:calc((var(--content-max-width) - var(--compact-max-width)) / 2);--breakout-size:calc((var(--breakout-max-width) - var(--content-max-width)) / 2);display:grid;grid-template-columns:[full-width-start full-width-left-start] minmax(var(--padding-inline), 1fr) [breakout-start breakout-left-start] minmax(0, var(--breakout-size)) [full-width-right-start breakout-right-start content-start] minmax(0, var(--content-size)) [compact-start] minmax(0, var(--compact-size)) [mini-start] min(100% - (var(--padding-inline) * 2), var(--mini-max-width)) [mini-end] minmax(0, var(--compact-size)) [compact-end] minmax(0, var(--content-size)) [content-end breakout-left-end full-width-left-end] minmax(0, var(--breakout-size)) [breakout-right-end breakout-end] minmax(var(--padding-inline), 1fr) [full-width-right-end full-width-end]!important}.content-grid>:not(.mini,.compact,.breakout,.full-width),.full-width>:not(.mini,.compact,.breakout,.full-width){grid-column:content}.content-grid>.mini{grid-column:mini}.content-grid>.compact{grid-column:compact}.content-grid>.breakout{grid-column:breakout}.content-grid>.breakout-left{grid-column:breakout-left}.content-grid>.breakout-right{grid-column:breakout-right}.content-grid>.full-width{grid-template-columns:inherit;grid-column:full-width;display:grid}.content-grid>.full-width-left{grid-column:full-width-left}.content-grid>.full-width-right{grid-column:full-width-right}