eSales Media Git repositories
Browse code

Fix padding rules

Benjamin Roth authored on29/04/2025 10:28:20
Showing3 changed files
public/css/background-wrapper.css
History View file @45ed324
... ... 
@@ -158,10 +158,10 @@
158 158 
   inset: 0 0 0 auto;
159 159 
 }
160 160
161 
-.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid > .fragments {
161 
+.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg > .content-grid > .fragments {
162 162 
   padding-left: calc(50% + var(--vr-bw-content-gap));
163 163 
 }
164 
-.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid > .fragments {
164 
+.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg > .content-grid > .fragments {
165 165 
   padding-left: 0;
166 166 
   padding-right: calc(50% + var(--vr-bw-content-gap));
167 167 
 }
... ... 
@@ -183,7 +183,7 @@
183 183 
     width: 100%;
184 184 
     height: auto;
185 185 
   }
186 
-  .content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid > .fragments {
186 
+  .content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg > .content-grid > .fragments {
187 187 
     padding-left: 0;
188 188 
     padding-right: 0;
189 189 
   }
... ... 
@@ -300,72 +300,72 @@
300 300 
   padding-top: 100%;
301 301 
 }
302 302
303 
-.content-background-wrapper .content-background-wrapper-fg .content-grid {
303 
+.content-background-wrapper .content-background-wrapper-fg > .content-grid {
304 304 
   width: 100%;
305 305 
   display: grid;
306 306 
   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];
307 307 
 }
308 
-.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
308 
+.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
309 309 
   grid-column: content;
310 310 
   position: relative;
311 311 
 }
312 
-.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
312 
+.-width-small.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
313 313 
   grid-column: indent;
314 314 
 }
315 315
316 
-.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
316 
+.-width-extended.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
317 317 
   grid-column: breakout;
318 318 
 }
319 319
320 
-.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
320 
+.-width-default-left.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
321 321 
   grid-column: breakout/indent;
322 322 
 }
323 323
324 
-.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
324 
+.-width-default-right.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
325 325 
   grid-column: indent/breakout;
326 326 
 }
327 327
328 
-.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
328 
+.-width-extended-left.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
329 329 
   grid-column: breakout/content;
330 330 
 }
331 331
332 
-.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
332 
+.-width-extended-right.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
333 333 
   grid-column: content/breakout;
334 334 
 }
335 335
336 
-.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
336 
+.-width-full.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
337 337 
   grid-column: full-width;
338 338 
 }
339 339
340 340 
 @media screen and (max-width: 599px) {
341 
-  .-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
341 
+  .-width-extended.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
342 342 
     grid-column: full-width;
343 343 
   }
344 
-  .-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
344 
+  .-width-default-left.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
345 345 
     grid-column: full-width/content;
346 346 
   }
347 
-  .-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
347 
+  .-width-default-right.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
348 348 
     grid-column: content/full-width;
349 349 
   }
350 
-  .-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
350 
+  .-width-extended-left.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
351 351 
     grid-column: full-width/content;
352 352 
   }
353 
-  .-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
353 
+  .-width-extended-right.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
354 354 
     grid-column: content/full-width;
355 355 
   }
356 
-  .-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
356 
+  .-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
357 357 
     padding: 0 calc(var(--vr-bw-padding-inline) * 2);
358 358 
   }
359 
-  .-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
359 
+  .-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
360 360 
     padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2);
361 361 
   }
362 
-  .-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
362 
+  .-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
363 363 
     padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0;
364 364 
   }
365 
-  .-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
365 
+  .-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
366 366 
     padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2);
367 367 
   }
368 
-  .-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
368 
+  .-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
369 369 
     padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0;
370 370 
   }
371 371 
 }
... ... 
@@ -385,43 +385,43 @@
385 385 
   display: flex;
386 386 
   align-items: stretch;
387 387 
 }
388 
-.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid {
388 
+.-va-stretch.content-background-wrapper .content-background-wrapper-fg > .content-grid {
389 389 
   flex: 1;
390 390 
 }
391 391
392 
-.-padding.content-background-wrapper .content-background-wrapper-fg > .fragments {
392 
+.-padding.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
393 393 
   padding: var(--vr-bw-padding-small) 0;
394 394 
 }
395 395
396 
-.-padding-medium.content-background-wrapper .content-background-wrapper-fg > .fragments {
396 
+.-padding-medium.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
397 397 
   padding: var(--vr-bw-padding-medium) 0;
398 398 
 }
399 399
400 
-.-padding-large.content-background-wrapper .content-background-wrapper-fg > .fragments {
400 
+.-padding-large.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
401 401 
   padding: var(--vr-bw-padding-large) 0;
402 402 
 }
403 403
404 
-.-padding-top.content-background-wrapper .content-background-wrapper-fg > .fragments {
404 
+.-padding-top.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
405 405 
   padding: var(--vr-bw-padding-small) 0 0;
406 406 
 }
407 407
408 
-.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg > .fragments {
408 
+.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
409 409 
   padding: var(--vr-bw-padding-medium) 0 0;
410 410 
 }
411 411
412 
-.-padding-top-large.content-background-wrapper .content-background-wrapper-fg > .fragments {
412 
+.-padding-top-large.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
413 413 
   padding: var(--vr-bw-padding-large) 0 0;
414 414 
 }
415 415
416 
-.-padding-bottom.content-background-wrapper .content-background-wrapper-fg > .fragments {
416 
+.-padding-bottom.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
417 417 
   padding: 0 0 var(--vr-bw-padding-small);
418 418 
 }
419 419
420 
-.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg > .fragments {
420 
+.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
421 421 
   padding: 0 0 var(--vr-bw-padding-medium);
422 422 
 }
423 423
424 
-.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg > .fragments {
424 
+.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
425 425 
   padding: 0 0 var(--vr-bw-padding-large);
426 426 
 }
427 427
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
public/css/background-wrapper.scss
History View file @45ed324
... ... 
@@ -106,7 +106,7 @@
106 106 
     }
107 107
108 108 
     .content-background-wrapper-fg {
109 
-      .content-grid {
109 
+      > .content-grid {
110 110 
         > .fragments {
111 111 
           padding-left: calc(50% + var(--vr-bw-content-gap));
112 112
... ... 
@@ -138,7 +138,7 @@
138 138 
       }
139 139
140 140 
       .content-background-wrapper-fg.content-background-wrapper-fg {
141 
-        .content-grid {
141 
+        > .content-grid {
142 142 
           > .fragments {
143 143 
             padding-left: 0;
144 144 
             padding-right: 0;
... ... 
@@ -216,7 +216,7 @@
216 216
217 217 
   /* Content width */
218 218 
   .content-background-wrapper-fg {
219 
-    .content-grid {
219 
+    > .content-grid {
220 220 
       width: 100%;
221 221 
       display: grid;
222 222 
       grid-template-columns:
... ... 
@@ -273,22 +273,24 @@
273 273 
     @at-root .-va-stretch#{&} {
274 274 
       display:flex;
275 275 
       align-items: stretch;
276 
-      .content-grid { flex: 1; }
276 
+      > .content-grid { flex: 1; }
277 277 
     }
278 278 
   }
279 279
280 280 
   /* Padding */
281 281 
   .content-background-wrapper-fg {
282 
-    > .fragments {
283 
-      @at-root .-padding#{&} { padding: var(--vr-bw-padding-small) 0; }
284 
-      @at-root .-padding-medium#{&} { padding: var(--vr-bw-padding-medium) 0; }
285 
-      @at-root .-padding-large#{&} { padding: var(--vr-bw-padding-large) 0; }
286 
-      @at-root .-padding-top#{&} { padding: var(--vr-bw-padding-small) 0 0; }
287 
-      @at-root .-padding-top-medium#{&} { padding: var(--vr-bw-padding-medium) 0 0; }
288 
-      @at-root .-padding-top-large#{&} { padding: var(--vr-bw-padding-large) 0 0; }
289 
-      @at-root .-padding-bottom#{&} { padding: 0 0 var(--vr-bw-padding-small); }
290 
-      @at-root .-padding-bottom-medium#{&} {padding:  0 0 var(--vr-bw-padding-medium); }
291 
-      @at-root .-padding-bottom-large#{&} { padding: 0 0 var(--vr-bw-padding-large); }
282 
+    > .content-grid {
283 
+      > .fragments {
284 
+        @at-root .-padding#{&} { padding: var(--vr-bw-padding-small) 0; }
285 
+        @at-root .-padding-medium#{&} { padding: var(--vr-bw-padding-medium) 0; }
286 
+        @at-root .-padding-large#{&} { padding: var(--vr-bw-padding-large) 0; }
287 
+        @at-root .-padding-top#{&} { padding: var(--vr-bw-padding-small) 0 0; }
288 
+        @at-root .-padding-top-medium#{&} { padding: var(--vr-bw-padding-medium) 0 0; }
289 
+        @at-root .-padding-top-large#{&} { padding: var(--vr-bw-padding-large) 0 0; }
290 
+        @at-root .-padding-bottom#{&} { padding: 0 0 var(--vr-bw-padding-small); }
291 
+        @at-root .-padding-bottom-medium#{&} {padding:  0 0 var(--vr-bw-padding-medium); }
292 
+        @at-root .-padding-bottom-large#{&} { padding: 0 0 var(--vr-bw-padding-large); }
293 
+      }
292 294 
     }
293 295 
   }
294 296