eSales Media Git repositories
Browse code

Use specific padding declarations for background wrapper

Benjamin Roth authored on29/04/2025 14:43:49
Showing1 changed files
public/css/background-wrapper.min.css
History View file @8944935
... ... 
@@ -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.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg>.content-grid>.fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg>.content-grid>.fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg>.content-grid>.fragments{padding-left:0;padding-right:0}}.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: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>.content-grid>.fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.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.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg>.content-grid>.fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg>.content-grid>.fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg>.content-grid>.fragments{padding-left:0;padding-right:0}}.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: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>.content-grid>.fragments{padding-top:var(--vr-bw-padding-small);padding-bottom:var(--vr-bw-padding-small)}.-padding-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-top:var(--vr-bw-padding-medium);padding-bottom:var(--vr-bw-padding-medium)}.-padding-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-top:var(--vr-bw-padding-large);padding-bottom:var(--vr-bw-padding-large)}.-padding-top.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-top:var(--vr-bw-padding-small)}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-top:var(--vr-bw-padding-medium)}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-top:var(--vr-bw-padding-large)}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-bottom:var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-bottom:var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding-bottom: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
Browse code

Fix padding rules

Benjamin Roth authored on29/04/2025 10:28:20
Showing1 changed files
public/css/background-wrapper.min.css
History View file @45ed324
... ... 
@@ -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.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid>.fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid>.fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid>.fragments{padding-left:0;padding-right:0}}.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: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)}
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.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg>.content-grid>.fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg>.content-grid>.fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg>.content-grid>.fragments{padding-left:0;padding-right:0}}.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: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>.content-grid>.fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg>.content-grid>.fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg>.content-grid>.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
Browse code

Adjust css rules to not effect child elements inside the wrapper

Benjamin Roth authored on29/04/2025 10:23:03
Showing1 changed files
public/css/background-wrapper.min.css
History View file @eeb4b4a
... ... 
@@ -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.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:0}}.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: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)}
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.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid>.fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid>.fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid>.fragments{padding-left:0;padding-right:0}}.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: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
Browse code

Add responsive behaviour for image aside setting for background wrapper

Benjamin Roth authored on29/04/2025 09:59:54
Showing1 changed files
public/css/background-wrapper.min.css
History View file @03da31a
... ... 
@@ -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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}.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: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)}
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.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:0}}.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: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
Browse code

Introduce root content-gap variable for wrapper and replace standalone variable

Benjamin Roth authored on28/04/2025 16:29:53
Showing1 changed files
public/css/background-wrapper.min.css
History View file @5e376eb
... ... 
@@ -1,5 +1,5 @@
1 
-:root{--vr-bw-height-small:240px;--vr-bw-height-medium:480px;--vr-bw-height-large:720px;--vr-bw-bgcolor-1:#f0f0f0;--vr-bw-bgcolor-2:#777777;--vr-bw-bgcolor-3:#323232;--vr-bw-color-inverted:#FFF;--vr-bw-color-headline-inverted:#FFF;--vr-bw-padding-small:3rem;--vr-bw-padding-medium:5rem;--vr-bw-padding-large:8rem;--vr-bw-padding-inline:1rem;--vr-bw-indent-max-width:760px;--vr-bw-content-max-width:1120px;--vr-bw-breakout-max-width:1480px;--vr-bw-content-size:calc(
1 
+:root{--vr-bw-height-small:240px;--vr-bw-height-medium:480px;--vr-bw-height-large:720px;--vr-bw-bgcolor-1:#f0f0f0;--vr-bw-bgcolor-2:#777777;--vr-bw-bgcolor-3:#323232;--vr-bw-color-inverted:#FFF;--vr-bw-color-headline-inverted:#FFF;--vr-bw-padding-small:3rem;--vr-bw-padding-medium:5rem;--vr-bw-padding-large:8rem;--vr-bw-content-gap:1rem;--vr-bw-padding-inline:1rem;--vr-bw-indent-max-width:760px;--vr-bw-content-max-width:1120px;--vr-bw-breakout-max-width:1480px;--vr-bw-content-size:calc(
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{--content-gap:var(--vr-bw-padding-inline);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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--content-gap))}.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: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)}
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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}.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: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
Browse code

Move standalone gap variable up to make it easier to override

Benjamin Roth authored on28/04/2025 15:51:52
Showing1 changed files
public/css/background-wrapper.min.css
History View file @b011db5
... ... 
@@ -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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{--content-gap:var(--vr-bw-padding-inline);padding-left:calc(50% + var(--content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--content-gap))}.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: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)}
6 5 
\ No newline at end of file
6 
+  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{--content-gap:var(--vr-bw-padding-inline);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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--content-gap))}.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: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
Browse code

Use standalone gap variable for easier customisation of background aside content gap

Benjamin Roth authored on28/04/2025 14:41:53
Showing1 changed files
public/css/background-wrapper.min.css
History View file @2b3eedb
... ... 
@@ -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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-padding-inline))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-padding-inline))}.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: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)}
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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{--content-gap:var(--vr-bw-padding-inline);padding-left:calc(50% + var(--content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--content-gap))}.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: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
Browse code

Add basic background aside functionality

Benjamin Roth authored on28/04/2025 14:39:18
Showing1 changed files
public/css/background-wrapper.min.css
History View file @7c56958
... ... 
@@ -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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:50%}.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: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)}
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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-padding-inline))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-padding-inline))}.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: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
Browse code

WIP

Benjamin Roth authored on28/04/2025 12:38:01
Showing1 changed files
public/css/background-wrapper.min.css
History View file @2ac4bd6
... ... 
@@ -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: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)}
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.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:50%}.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: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
Browse code

Update background-wrapper.css

Benjamin Roth authored on25/04/2025 14:47:45
Showing1 changed files
public/css/background-wrapper.min.css
History View file @2efc1c6
... ... 
@@ -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: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}.-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: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
Browse code

Fix vertical alignment of content in background wrapper

Benjamin Roth authored on03/03/2025 21:11:33
Showing1 changed files
public/css/background-wrapper.min.css
History View file @d2dca1a
... ... 
@@ -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;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}.-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: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}.-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
Browse code

Initial commit

Benjamin Roth authored on09/10/2024 01:09:48
Showing1 changed files
public/css/background-wrapper.min.css
History View file @7214d4d
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,5 @@
1 
+:root{--vr-bw-height-small:240px;--vr-bw-height-medium:480px;--vr-bw-height-large:720px;--vr-bw-bgcolor-1:#f0f0f0;--vr-bw-bgcolor-2:#777777;--vr-bw-bgcolor-3:#323232;--vr-bw-color-inverted:#FFF;--vr-bw-color-headline-inverted:#FFF;--vr-bw-padding-small:3rem;--vr-bw-padding-medium:5rem;--vr-bw-padding-large:8rem;--vr-bw-padding-inline:1rem;--vr-bw-indent-max-width:760px;--vr-bw-content-max-width:1120px;--vr-bw-breakout-max-width:1480px;--vr-bw-content-size:calc(
2 
+    (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2
3 
+  );--vr-bw-breakout-size:calc(
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;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}.-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)}
0 6 
\ No newline at end of file