Browse code

Revert removal of position:relative from the background wrapper fragments container and implement a solution to respect the background wrapper content area

Benjamin Roth authored on01/03/2025 23:34:53
Showing4 changed files
... ...
@@ -171,7 +171,8 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_vAlign'] = [
171 171
     'options'   => [
172 172
         ''          => 'oben',
173 173
         '-va-center'         => 'mitte',
174
-        '-va-bottom'          => 'unten',
174
+        '-va-bottom'         => 'unten',
175
+        '-va-stretch'        => 'Höhe des Containers'
175 176
     ],
176 177
     'eval'      => ['tl_class' => 'clr w50'],
177 178
     'sql'       => "varchar(16) NOT NULL default ''"
... ...
@@ -266,6 +266,7 @@
266 266
 }
267 267
 .content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
268 268
   grid-column: content;
269
+  position: relative;
269 270
 }
270 271
 .-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
271 272
   grid-column: indent;
... ...
@@ -339,6 +340,14 @@
339 340
   align-items: flex-end;
340 341
 }
341 342
 
343
+.-va-stretch.content-background-wrapper .content-background-wrapper-fg {
344
+  display: flex;
345
+  align-items: stretch;
346
+}
347
+.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid {
348
+  flex: 1;
349
+}
350
+
342 351
 .-padding.content-background-wrapper .content-background-wrapper-fg .fragments {
343 352
   padding: var(--vr-bw-padding-small) 0;
344 353
 }
... ...
@@ -2,4 +2,4 @@
2 2
     (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2
3 3
   );--vr-bw-breakout-size:calc(
4 4
     (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2
5
-  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{position:relative}.content-background-wrapper .content-background-wrapper-bg{position:absolute;inset:0}.content-background-wrapper .content-background-wrapper-bg img{position:absolute;inset:0;object-fit:cover;object-position:50% 50%;display:block;width:100%;height:100%}.content-background-wrapper .content-background-wrapper-bg video{position:absolute;inset:0;display:block;width:100%;height:100%}.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img{object-fit:contain}.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img{object-fit:fill}.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-fit:none}.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img{object-position:0 0}.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img{object-position:50%0}.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img{object-position:100%0}.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img{object-position:0 50%}.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 50%}.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img{object-position:100% 50%}.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img{object-position:0 100%}.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 100%}.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-position:100% 100%}.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg{opacity:.1}.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg{opacity:.2}.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg{opacity:.3}.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg{opacity:.4}.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg{opacity:.5}.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg{opacity:.6}.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg{opacity:.7}.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg{opacity:.8}.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg{opacity:.9}.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg{opacity:1}.content-background-wrapper.-alt-color-1{background-color:var(--vr-bw-bgcolor-1)}.content-background-wrapper.-alt-color-2{background-color:var(--vr-bw-bgcolor-2)}.content-background-wrapper.-alt-color-3{background-color:var(--vr-bw-bgcolor-3)}.content-background-wrapper.-alt-color-black{background-color:#000}.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6{color:#fff}.content-background-wrapper.-alt-color-white{background-color:#fff}.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6{color:#000}.content-background-wrapper .content-background-wrapper-fg{position:relative;box-sizing:border-box;display:flex;align-items:flex-start}.-mh-small.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-small)}.-mh-medium.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-medium)}.-mh-large.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-large)}.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:100svh}.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:66.666svh}.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:50svh}.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:33.333svh}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg{display:flow-root}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{display:table;content:"";padding-top:100%;float:left}.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:42.857%}.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:62.5%}.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:56.25%}.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:37.5%}.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:80%}.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:75%}.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:66.666%}.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:20%}.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:25%}.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:33.333%}.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:50%}.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:100%}.content-background-wrapper .content-background-wrapper-fg .content-grid{width:100%;display:grid;grid-template-columns:[full-width-start]minmax(var(--vr-bw-padding-inline),1fr)[breakout-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[content-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[indent-start]min(100% - var(--vr-bw-padding-inline)*6,var(--vr-bw-indent-max-width))[indent-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[content-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[breakout-end]minmax(var(--vr-bw-padding-inline),1fr)[full-width-end]}.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content}.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent}.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/indent}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent/breakout}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/breakout}.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}@media screen and (max-width:599px){.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}.-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}}.-va-center.content-background-wrapper .content-background-wrapper-fg{align-items:center}.-va-bottom.content-background-wrapper .content-background-wrapper-fg{align-items:flex-end}.-padding.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-large)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg{color:var(--vr-bw-color-inverted)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h2,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h3,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h4,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h5,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h6{color:var(--vr-bw-color-headline-inverted)}
6 5
\ No newline at end of file
6
+  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{position:relative}.content-background-wrapper .content-background-wrapper-bg{position:absolute;inset:0}.content-background-wrapper .content-background-wrapper-bg img{position:absolute;inset:0;object-fit:cover;object-position:50% 50%;display:block;width:100%;height:100%}.content-background-wrapper .content-background-wrapper-bg video{position:absolute;inset:0;display:block;width:100%;height:100%}.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img{object-fit:contain}.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img{object-fit:fill}.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-fit:none}.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img{object-position:0 0}.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img{object-position:50%0}.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img{object-position:100%0}.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img{object-position:0 50%}.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 50%}.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img{object-position:100% 50%}.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img{object-position:0 100%}.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 100%}.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-position:100% 100%}.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg{opacity:.1}.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg{opacity:.2}.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg{opacity:.3}.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg{opacity:.4}.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg{opacity:.5}.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg{opacity:.6}.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg{opacity:.7}.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg{opacity:.8}.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg{opacity:.9}.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg{opacity:1}.content-background-wrapper.-alt-color-1{background-color:var(--vr-bw-bgcolor-1)}.content-background-wrapper.-alt-color-2{background-color:var(--vr-bw-bgcolor-2)}.content-background-wrapper.-alt-color-3{background-color:var(--vr-bw-bgcolor-3)}.content-background-wrapper.-alt-color-black{background-color:#000}.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6{color:#fff}.content-background-wrapper.-alt-color-white{background-color:#fff}.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6{color:#000}.content-background-wrapper .content-background-wrapper-fg{position:relative;box-sizing:border-box;display:flex;align-items:flex-start}.-mh-small.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-small)}.-mh-medium.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-medium)}.-mh-large.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-large)}.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:100svh}.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:66.666svh}.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:50svh}.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:33.333svh}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg{display:flow-root}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{display:table;content:"";padding-top:100%;float:left}.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:42.857%}.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:62.5%}.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:56.25%}.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:37.5%}.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:80%}.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:75%}.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:66.666%}.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:20%}.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:25%}.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:33.333%}.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:50%}.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:100%}.content-background-wrapper .content-background-wrapper-fg .content-grid{width:100%;display:grid;grid-template-columns:[full-width-start]minmax(var(--vr-bw-padding-inline),1fr)[breakout-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[content-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[indent-start]min(100% - var(--vr-bw-padding-inline)*6,var(--vr-bw-indent-max-width))[indent-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[content-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[breakout-end]minmax(var(--vr-bw-padding-inline),1fr)[full-width-end]}.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content;position:relative}.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent}.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/indent}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent/breakout}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/breakout}.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}@media screen and (max-width:599px){.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}.-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}}.-va-center.content-background-wrapper .content-background-wrapper-fg{align-items:center}.-va-bottom.content-background-wrapper .content-background-wrapper-fg{align-items:flex-end}.-va-stretch.content-background-wrapper .content-background-wrapper-fg{display:flex;align-items:stretch}.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid{flex:1}.-padding.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-large)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg{color:var(--vr-bw-color-inverted)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h2,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h3,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h4,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h5,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h6{color:var(--vr-bw-color-headline-inverted)}
7 7
\ No newline at end of file
... ...
@@ -180,7 +180,7 @@
180 180
 
181 181
       > .fragments {
182 182
         grid-column: content;
183
-        //position: relative;
183
+        position: relative;
184 184
 
185 185
         @at-root .-width-small#{&} { grid-column: indent; }
186 186
         @at-root .-width-extended#{&} { grid-column: breakout; }
... ...
@@ -216,6 +216,11 @@
216 216
 
217 217
     @at-root .-va-center#{&} { align-items: center; }
218 218
     @at-root .-va-bottom#{&} { align-items: flex-end; }
219
+    @at-root .-va-stretch#{&} {
220
+      display:flex;
221
+      align-items: stretch;
222
+      .content-grid { flex: 1; }
223
+    }
219 224
   }
220 225
 
221 226
   /* Padding */