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.css
History View file @8944935
... ... 
@@ -390,39 +390,42 @@
390 390 
 }
391 391
392 392 
 .-padding.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
393 
-  padding: var(--vr-bw-padding-small) 0;
393 
+  padding-top: var(--vr-bw-padding-small);
394 
+  padding-bottom: var(--vr-bw-padding-small);
394 395 
 }
395 396
396 397 
 .-padding-medium.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
397 
-  padding: var(--vr-bw-padding-medium) 0;
398 
+  padding-top: var(--vr-bw-padding-medium);
399 
+  padding-bottom: var(--vr-bw-padding-medium);
398 400 
 }
399 401
400 402 
 .-padding-large.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
401 
-  padding: var(--vr-bw-padding-large) 0;
403 
+  padding-top: var(--vr-bw-padding-large);
404 
+  padding-bottom: var(--vr-bw-padding-large);
402 405 
 }
403 406
404 407 
 .-padding-top.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
405 
-  padding: var(--vr-bw-padding-small) 0 0;
408 
+  padding-top: var(--vr-bw-padding-small);
406 409 
 }
407 410
408 411 
 .-padding-top-medium.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
409 
-  padding: var(--vr-bw-padding-medium) 0 0;
412 
+  padding-top: var(--vr-bw-padding-medium);
410 413 
 }
411 414
412 415 
 .-padding-top-large.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
413 
-  padding: var(--vr-bw-padding-large) 0 0;
416 
+  padding-top: var(--vr-bw-padding-large);
414 417 
 }
415 418
416 419 
 .-padding-bottom.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
417 
-  padding: 0 0 var(--vr-bw-padding-small);
420 
+  padding-bottom: var(--vr-bw-padding-small);
418 421 
 }
419 422
420 423 
 .-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
421 
-  padding: 0 0 var(--vr-bw-padding-medium);
424 
+  padding-bottom: var(--vr-bw-padding-medium);
422 425 
 }
423 426
424 427 
 .-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg > .content-grid > .fragments {
425 
-  padding: 0 0 var(--vr-bw-padding-large);
428 
+  padding-bottom: var(--vr-bw-padding-large);
426 429 
 }
427 430
428 431 
 .-color-inverted.content-background-wrapper .content-background-wrapper-fg {
Browse code

Fix padding rules

Benjamin Roth authored on29/04/2025 10:28:20
Showing1 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
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.css
History View file @eeb4b4a
... ... 
@@ -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 
   }
... ... 
@@ -389,39 +389,39 @@
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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .fragments {
425 425 
   padding: 0 0 var(--vr-bw-padding-large);
426 426 
 }
427 427
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.css
History View file @03da31a
... ... 
@@ -39,7 +39,7 @@
39 39 
   /* Background scaling */
40 40 
   /* Background position */
41 41 
   /* Background opacity */
42 
-  /* Bacgkround beside */
42 
+  /* Background beside */
43 43 
   /* Background color */
44 44 
   /* Foreground base */
45 45 
   /* Height */
... ... 
@@ -150,22 +150,44 @@
150 150 
   opacity: 1;
151 151 
 }
152 152
153 
-.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {
153 
+.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg {
154 154 
   inset: 0 auto 0 0;
155 155 
   width: 50%;
156 156 
 }
157 
-.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {
157 
+.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg {
158 158 
   inset: 0 0 0 auto;
159 159 
 }
160 160
161 
-.content-background-wrapper.-bg-beside-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-beside-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 
 }
168 168
169 
+@media (max-width: 599px) {
170 
+  .content-background-wrapper.-bg-aside-content {
171 
+    display: flex;
172 
+    flex-direction: column-reverse;
173 
+  }
174 
+  .-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content {
175 
+    flex-direction: column;
176 
+  }
177 
+  .content-background-wrapper.-bg-aside-content .content-background-wrapper-bg {
178 
+    position: relative;
179 
+    width: 100%;
180 
+  }
181 
+  .content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img {
182 
+    position: relative;
183 
+    width: 100%;
184 
+    height: auto;
185 
+  }
186 
+  .content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid .fragments {
187 
+    padding-left: 0;
188 
+    padding-right: 0;
189 
+  }
190 
+}
169 191 
 .content-background-wrapper.-alt-color-1 {
170 192 
   background-color: var(--vr-bw-bgcolor-1);
171 193 
 }
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.css
History View file @5e376eb
... ... 
@@ -13,6 +13,8 @@
13 13 
   --vr-bw-padding-small: 3rem;
14 14 
   --vr-bw-padding-medium: 5rem;
15 15 
   --vr-bw-padding-large: 8rem;
16 
+  /* Gap */
17 
+  --vr-bw-content-gap: 1rem;
16 18 
   /* Width */
17 19 
   --vr-bw-padding-inline: 1rem;
18 20 
   --vr-bw-indent-max-width: 760px;
... ... 
@@ -32,7 +34,6 @@
32 34 
 }
33 35
34 36 
 .content-background-wrapper {
35 
-  --content-gap: var(--vr-bw-padding-inline);
36 37 
   position: relative;
37 38 
   /* Background base */
38 39 
   /* Background scaling */
... ... 
@@ -158,11 +159,11 @@
158 159 
 }
159 160
160 161 
 .content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
161 
-  padding-left: calc(50% + var(--content-gap));
162 
+  padding-left: calc(50% + var(--vr-bw-content-gap));
162 163 
 }
163 164 
 .-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
164 165 
   padding-left: 0;
165 
-  padding-right: calc(50% + var(--content-gap));
166 
+  padding-right: calc(50% + var(--vr-bw-content-gap));
166 167 
 }
167 168
168 169 
 .content-background-wrapper.-alt-color-1 {
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.css
History View file @b011db5
... ... 
@@ -32,6 +32,7 @@
32 32 
 }
33 33
34 34 
 .content-background-wrapper {
35 
+  --content-gap: var(--vr-bw-padding-inline);
35 36 
   position: relative;
36 37 
   /* Background base */
37 38 
   /* Background scaling */
... ... 
@@ -157,7 +158,6 @@
157 158 
 }
158 159
159 160 
 .content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
160 
-  --content-gap: var(--vr-bw-padding-inline);
161 161 
   padding-left: calc(50% + var(--content-gap));
162 162 
 }
163 163 
 .-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
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.css
History View file @2b3eedb
... ... 
@@ -157,11 +157,12 @@
157 157 
 }
158 158
159 159 
 .content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
160 
-  padding-left: calc(50% + var(--vr-bw-padding-inline));
160 
+  --content-gap: var(--vr-bw-padding-inline);
161 
+  padding-left: calc(50% + var(--content-gap));
161 162 
 }
162 163 
 .-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
163 164 
   padding-left: 0;
164 
-  padding-right: calc(50% + var(--vr-bw-padding-inline));
165 
+  padding-right: calc(50% + var(--content-gap));
165 166 
 }
166 167
167 168 
 .content-background-wrapper.-alt-color-1 {
Browse code

Add basic background aside functionality

Benjamin Roth authored on28/04/2025 14:39:18
Showing1 changed files
public/css/background-wrapper.css
History View file @7c56958
... ... 
@@ -157,11 +157,11 @@
157 157 
 }
158 158
159 159 
 .content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
160 
-  padding-left: 50%;
160 
+  padding-left: calc(50% + var(--vr-bw-padding-inline));
161 161 
 }
162 162 
 .-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
163 163 
   padding-left: 0;
164 
-  padding-right: 50%;
164 
+  padding-right: calc(50% + var(--vr-bw-padding-inline));
165 165 
 }
166 166
167 167 
 .content-background-wrapper.-alt-color-1 {
Browse code

WIP

Benjamin Roth authored on28/04/2025 12:38:01
Showing1 changed files
public/css/background-wrapper.css
History View file @2ac4bd6
... ... 
@@ -37,6 +37,7 @@
37 37 
   /* Background scaling */
38 38 
   /* Background position */
39 39 
   /* Background opacity */
40 
+  /* Bacgkround beside */
40 41 
   /* Background color */
41 42 
   /* Foreground base */
42 43 
   /* Height */
... ... 
@@ -147,6 +148,22 @@
147 148 
   opacity: 1;
148 149 
 }
149 150
151 
+.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {
152 
+  inset: 0 auto 0 0;
153 
+  width: 50%;
154 
+}
155 
+.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {
156 
+  inset: 0 0 0 auto;
157 
+}
158 
+
159 
+.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
160 
+  padding-left: 50%;
161 
+}
162 
+.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {
163 
+  padding-left: 0;
164 
+  padding-right: 50%;
165 
+}
166 
+
150 167 
 .content-background-wrapper.-alt-color-1 {
151 168 
   background-color: var(--vr-bw-bgcolor-1);
152 169 
 }
Browse code

Merge branch 'master' into feature/grid-position-container

# Conflicts:
# public/css/background-wrapper.min.css

Benjamin Roth authored on03/03/2025 21:13:27
Showing0 changed files
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.css
History View file @d2dca1a
... ... 
@@ -203,7 +203,7 @@
203 203 
 }
204 204
205 205 
 .-mh-ratio.content-background-wrapper .content-background-wrapper-fg {
206 
-  display: flow-root;
206 
+  /*display: flow-root;*/
207 207 
 }
208 208 
 .-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
209 209 
   display: table;
... ... 
@@ -382,5 +382,3 @@
382 382 
 .-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 {
383 383 
   color: var(--vr-bw-color-headline-inverted);
384 384 
 }
385 
-
386 
-/*# sourceMappingURL=background-wrapper.css.map */
Browse code

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

Benjamin Roth authored on01/03/2025 23:34:53
Showing1 changed files
public/css/background-wrapper.css
History View file @23c574f
... ... 
@@ -266,6 +266,7 @@
266 266 
 }
267 267 
 .content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
268 268 
   grid-column: content;
269 
+  position: relative;
269 270 
 }
270 271 
 .-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
271 272 
   grid-column: indent;
... ... 
@@ -339,6 +340,14 @@
339 340 
   align-items: flex-end;
340 341 
 }
341 342
343 
+.-va-stretch.content-background-wrapper .content-background-wrapper-fg {
344 
+  display: flex;
345 
+  align-items: stretch;
346 
+}
347 
+.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid {
348 
+  flex: 1;
349 
+}
350 
+
342 351 
 .-padding.content-background-wrapper .content-background-wrapper-fg .fragments {
343 352 
   padding: var(--vr-bw-padding-small) 0;
344 353 
 }
Browse code

Remove position:relative from the background wrapper fragments container

Benjamin Roth authored on01/03/2025 21:23:50
Showing1 changed files
public/css/background-wrapper.css
History View file @015ab87
... ... 
@@ -266,7 +266,6 @@
266 266 
 }
267 267 
 .content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
268 268 
   grid-column: content;
269 
-  position: relative;
270 269 
 }
271 270 
 .-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
272 271 
   grid-column: indent;
... ... 
@@ -382,5 +381,3 @@
382 381 
 .-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 {
383 382 
   color: var(--vr-bw-color-headline-inverted);
384 383 
 }
385 
-
386 
-/*# sourceMappingURL=background-wrapper.css.map */
Browse code

Initial commit

Benjamin Roth authored on09/10/2024 01:09:48
Showing1 changed files
public/css/background-wrapper.css
History View file @7214d4d
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,386 @@
1 
+:root {
2 
+  /* Heights */
3 
+  --vr-bw-height-small: 240px;
4 
+  --vr-bw-height-medium: 480px;
5 
+  --vr-bw-height-large: 720px;
6 
+  /* Colors */
7 
+  --vr-bw-bgcolor-1: #f0f0f0;
8 
+  --vr-bw-bgcolor-2: #777777;
9 
+  --vr-bw-bgcolor-3: #323232;
10 
+  --vr-bw-color-inverted: #FFF;
11 
+  --vr-bw-color-headline-inverted: #FFF;
12 
+  /* Padding */
13 
+  --vr-bw-padding-small: 3rem;
14 
+  --vr-bw-padding-medium: 5rem;
15 
+  --vr-bw-padding-large: 8rem;
16 
+  /* Width */
17 
+  --vr-bw-padding-inline: 1rem;
18 
+  --vr-bw-indent-max-width: 760px;
19 
+  --vr-bw-content-max-width: 1120px;
20 
+  --vr-bw-breakout-max-width: 1480px;
21 
+  --vr-bw-content-size: calc(
22 
+    (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2
23 
+  );
24 
+  --vr-bw-breakout-size: calc(
25 
+    (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2
26 
+  );
27 
+}
28 
+@media screen and (max-width: 599px) {
29 
+  :root {
30 
+    --vr-bw-padding-inline: .5rem;
31 
+  }
32 
+}
33 
+
34 
+.content-background-wrapper {
35 
+  position: relative;
36 
+  /* Background base */
37 
+  /* Background scaling */
38 
+  /* Background position */
39 
+  /* Background opacity */
40 
+  /* Background color */
41 
+  /* Foreground base */
42 
+  /* Height */
43 
+  /* Content width */
44 
+  /* Vertical alignment */
45 
+  /* Padding */
46 
+  /* Color */
47 
+}
48 
+.content-background-wrapper .content-background-wrapper-bg {
49 
+  position: absolute;
50 
+  inset: 0;
51 
+}
52 
+.content-background-wrapper .content-background-wrapper-bg img,
53 
+.content-background-wrapper .content-background-wrapper-bg video {
54 
+  position: absolute;
55 
+  inset: 0;
56 
+  object-fit: cover;
57 
+  object-position: 50% 50%;
58 
+  display: block;
59 
+  width: 100%;
60 
+  height: 100%;
61 
+}
62 
+.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
63 
+  object-fit: contain;
64 
+}
65 
+
66 
+.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
67 
+  object-fit: fill;
68 
+}
69 
+
70 
+.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
71 
+  object-fit: none;
72 
+}
73 
+
74 
+.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
75 
+  object-position: 0 0;
76 
+}
77 
+
78 
+.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
79 
+  object-position: 50% 0;
80 
+}
81 
+
82 
+.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
83 
+  object-position: 100% 0;
84 
+}
85 
+
86 
+.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
87 
+  object-position: 0 50%;
88 
+}
89 
+
90 
+.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
91 
+  object-position: 50% 50%;
92 
+}
93 
+
94 
+.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
95 
+  object-position: 100% 50%;
96 
+}
97 
+
98 
+.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
99 
+  object-position: 0 100%;
100 
+}
101 
+
102 
+.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
103 
+  object-position: 50% 100%;
104 
+}
105 
+
106 
+.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
107 
+  object-position: 100% 100%;
108 
+}
109 
+
110 
+.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg {
111 
+  opacity: 0.1;
112 
+}
113 
+
114 
+.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg {
115 
+  opacity: 0.2;
116 
+}
117 
+
118 
+.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg {
119 
+  opacity: 0.3;
120 
+}
121 
+
122 
+.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg {
123 
+  opacity: 0.4;
124 
+}
125 
+
126 
+.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg {
127 
+  opacity: 0.5;
128 
+}
129 
+
130 
+.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg {
131 
+  opacity: 0.6;
132 
+}
133 
+
134 
+.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg {
135 
+  opacity: 0.7;
136 
+}
137 
+
138 
+.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg {
139 
+  opacity: 0.8;
140 
+}
141 
+
142 
+.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg {
143 
+  opacity: 0.9;
144 
+}
145 
+
146 
+.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg {
147 
+  opacity: 1;
148 
+}
149 
+
150 
+.content-background-wrapper.-alt-color-1 {
151 
+  background-color: var(--vr-bw-bgcolor-1);
152 
+}
153 
+.content-background-wrapper.-alt-color-2 {
154 
+  background-color: var(--vr-bw-bgcolor-2);
155 
+}
156 
+.content-background-wrapper.-alt-color-3 {
157 
+  background-color: var(--vr-bw-bgcolor-3);
158 
+}
159 
+.content-background-wrapper.-alt-color-black {
160 
+  background-color: #000;
161 
+}
162 
+.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,
163 
+.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 {
164 
+  color: #FFFFFF;
165 
+}
166 
+.content-background-wrapper.-alt-color-white {
167 
+  background-color: white;
168 
+}
169 
+.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,
170 
+.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 {
171 
+  color: #000000;
172 
+}
173 
+.content-background-wrapper .content-background-wrapper-fg {
174 
+  position: relative;
175 
+  box-sizing: border-box;
176 
+}
177 
+.-mh-small.content-background-wrapper .content-background-wrapper-fg {
178 
+  min-height: var(--vr-bw-height-small);
179 
+}
180 
+
181 
+.-mh-medium.content-background-wrapper .content-background-wrapper-fg {
182 
+  min-height: var(--vr-bw-height-medium);
183 
+}
184 
+
185 
+.-mh-large.content-background-wrapper .content-background-wrapper-fg {
186 
+  min-height: var(--vr-bw-height-large);
187 
+}
188 
+
189 
+.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
190 
+  min-height: 100svh;
191 
+}
192 
+
193 
+.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
194 
+  min-height: 66.666svh;
195 
+}
196 
+
197 
+.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
198 
+  min-height: 50svh;
199 
+}
200 
+
201 
+.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
202 
+  min-height: 33.333svh;
203 
+}
204 
+
205 
+.-mh-ratio.content-background-wrapper .content-background-wrapper-fg {
206 
+  display: flow-root;
207 
+}
208 
+.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
209 
+  display: table;
210 
+  content: "";
211 
+  padding-top: 100%;
212 
+  float: left;
213 
+}
214 
+.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
215 
+  padding-top: 42.857%;
216 
+}
217 
+
218 
+.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
219 
+  padding-top: 62.5%;
220 
+}
221 
+
222 
+.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
223 
+  padding-top: 56.25%;
224 
+}
225 
+
226 
+.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
227 
+  padding-top: 37.5%;
228 
+}
229 
+
230 
+.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
231 
+  padding-top: 80%;
232 
+}
233 
+
234 
+.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
235 
+  padding-top: 75%;
236 
+}
237 
+
238 
+.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
239 
+  padding-top: 66.666%;
240 
+}
241 
+
242 
+.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
243 
+  padding-top: 20%;
244 
+}
245 
+
246 
+.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
247 
+  padding-top: 25%;
248 
+}
249 
+
250 
+.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
251 
+  padding-top: 33.333%;
252 
+}
253 
+
254 
+.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
255 
+  padding-top: 50%;
256 
+}
257 
+
258 
+.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
259 
+  padding-top: 100%;
260 
+}
261 
+
262 
+.content-background-wrapper .content-background-wrapper-fg .content-grid {
263 
+  width: 100%;
264 
+  display: grid;
265 
+  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];
266 
+}
267 
+.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
268 
+  grid-column: content;
269 
+  position: relative;
270 
+}
271 
+.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
272 
+  grid-column: indent;
273 
+}
274 
+
275 
+.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
276 
+  grid-column: breakout;
277 
+}
278 
+
279 
+.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
280 
+  grid-column: breakout/indent;
281 
+}
282 
+
283 
+.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
284 
+  grid-column: indent/breakout;
285 
+}
286 
+
287 
+.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
288 
+  grid-column: breakout/content;
289 
+}
290 
+
291 
+.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
292 
+  grid-column: content/breakout;
293 
+}
294 
+
295 
+.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
296 
+  grid-column: full-width;
297 
+}
298 
+
299 
+@media screen and (max-width: 599px) {
300 
+  .-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
301 
+    grid-column: full-width;
302 
+  }
303 
+  .-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
304 
+    grid-column: full-width/content;
305 
+  }
306 
+  .-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
307 
+    grid-column: content/full-width;
308 
+  }
309 
+  .-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
310 
+    grid-column: full-width/content;
311 
+  }
312 
+  .-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
313 
+    grid-column: content/full-width;
314 
+  }
315 
+  .-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
316 
+    padding: 0 calc(var(--vr-bw-padding-inline) * 2);
317 
+  }
318 
+  .-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
319 
+    padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2);
320 
+  }
321 
+  .-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
322 
+    padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0;
323 
+  }
324 
+  .-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
325 
+    padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2);
326 
+  }
327 
+  .-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
328 
+    padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0;
329 
+  }
330 
+}
331 
+.content-background-wrapper .content-background-wrapper-fg {
332 
+  display: flex;
333 
+  align-items: flex-start;
334 
+}
335 
+.-va-center.content-background-wrapper .content-background-wrapper-fg {
336 
+  align-items: center;
337 
+}
338 
+
339 
+.-va-bottom.content-background-wrapper .content-background-wrapper-fg {
340 
+  align-items: flex-end;
341 
+}
342 
+
343 
+.-padding.content-background-wrapper .content-background-wrapper-fg .fragments {
344 
+  padding: var(--vr-bw-padding-small) 0;
345 
+}
346 
+
347 
+.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments {
348 
+  padding: var(--vr-bw-padding-medium) 0;
349 
+}
350 
+
351 
+.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments {
352 
+  padding: var(--vr-bw-padding-large) 0;
353 
+}
354 
+
355 
+.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments {
356 
+  padding: var(--vr-bw-padding-small) 0 0;
357 
+}
358 
+
359 
+.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments {
360 
+  padding: var(--vr-bw-padding-medium) 0 0;
361 
+}
362 
+
363 
+.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments {
364 
+  padding: var(--vr-bw-padding-large) 0 0;
365 
+}
366 
+
367 
+.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments {
368 
+  padding: 0 0 var(--vr-bw-padding-small);
369 
+}
370 
+
371 
+.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments {
372 
+  padding: 0 0 var(--vr-bw-padding-medium);
373 
+}
374 
+
375 
+.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments {
376 
+  padding: 0 0 var(--vr-bw-padding-large);
377 
+}
378 
+
379 
+.-color-inverted.content-background-wrapper .content-background-wrapper-fg {
380 
+  color: var(--vr-bw-color-inverted);
381 
+}
382 
+.-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 {
383 
+  color: var(--vr-bw-color-headline-inverted);
384 
+}
385 
+
386 
+/*# sourceMappingURL=background-wrapper.css.map */