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.scss
History View file @8944935
... ... 
@@ -281,15 +281,15 @@
281 281 
   .content-background-wrapper-fg {
282 282 
     > .content-grid {
283 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); }
284 
+        @at-root .-padding#{&} { padding-top: var(--vr-bw-padding-small); padding-bottom: var(--vr-bw-padding-small); }
285 
+        @at-root .-padding-medium#{&} { padding-top: var(--vr-bw-padding-medium); padding-bottom: var(--vr-bw-padding-medium); }
286 
+        @at-root .-padding-large#{&} { padding-top: var(--vr-bw-padding-large); padding-bottom: var(--vr-bw-padding-large); }
287 
+        @at-root .-padding-top#{&} { padding-top: var(--vr-bw-padding-small); }
288 
+        @at-root .-padding-top-medium#{&} { padding-top: var(--vr-bw-padding-medium); }
289 
+        @at-root .-padding-top-large#{&} { padding-top: var(--vr-bw-padding-large); }
290 
+        @at-root .-padding-bottom#{&} { padding-bottom: var(--vr-bw-padding-small); }
291 
+        @at-root .-padding-bottom-medium#{&} {padding-bottom: var(--vr-bw-padding-medium); }
292 
+        @at-root .-padding-bottom-large#{&} { padding-bottom: var(--vr-bw-padding-large); }
293 293 
       }
294 294 
     }
295 295 
   }
Browse code

Fix padding rules

Benjamin Roth authored on29/04/2025 10:28:20
Showing1 changed files
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
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.scss
History View file @eeb4b4a
... ... 
@@ -107,7 +107,7 @@
107 107
108 108 
     .content-background-wrapper-fg {
109 109 
       .content-grid {
110 
-        .fragments {
110 
+        > .fragments {
111 111 
           padding-left: calc(50% + var(--vr-bw-content-gap));
112 112
113 113 
           @at-root .-bg-horizontal-align-right#{&} {
... ... 
@@ -139,7 +139,7 @@
139 139
140 140 
       .content-background-wrapper-fg.content-background-wrapper-fg {
141 141 
         .content-grid {
142 
-          .fragments {
142 
+          > .fragments {
143 143 
             padding-left: 0;
144 144 
             padding-right: 0;
145 145 
           }
... ... 
@@ -279,7 +279,7 @@
279 279
280 280 
   /* Padding */
281 281 
   .content-background-wrapper-fg {
282 
-    .fragments {
282 
+    > .fragments {
283 283 
       @at-root .-padding#{&} { padding: var(--vr-bw-padding-small) 0; }
284 284 
       @at-root .-padding-medium#{&} { padding: var(--vr-bw-padding-medium) 0; }
285 285 
       @at-root .-padding-large#{&} { padding: var(--vr-bw-padding-large) 0; }
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.scss
History View file @03da31a
... ... 
@@ -96,8 +96,8 @@
96 96 
     @at-root .-bg-opacity-100#{&} { opacity: 1 }
97 97 
   }
98 98
99 
-  /* Bacgkround beside */
100 
-  &.-bg-beside-content {
99 
+  /* Background beside */
100 
+  &.-bg-aside-content {
101 101 
     .content-background-wrapper-bg {
102 102 
       inset: 0 auto 0 0;
103 103 
       width: 50%;
... ... 
@@ -117,6 +117,35 @@
117 117 
         }
118 118 
       }
119 119 
     }
120 
+
121 
+    @media (max-width: 599px) {
122 
+      display: flex;
123 
+      flex-direction: column-reverse;
124 
+
125 
+      @at-root .-bg-aside-content-reverse#{&} {
126 
+        flex-direction: column;
127 
+      }
128 
+
129 
+      .content-background-wrapper-bg {
130 
+        position:relative;
131 
+        width: 100%;
132 
+
133 
+        img {
134 
+          position: relative;
135 
+          width: 100%;
136 
+          height: auto;
137 
+        }
138 
+      }
139 
+
140 
+      .content-background-wrapper-fg.content-background-wrapper-fg {
141 
+        .content-grid {
142 
+          .fragments {
143 
+            padding-left: 0;
144 
+            padding-right: 0;
145 
+          }
146 
+        }
147 
+      }
148 
+    }
120 149 
   }
121 150
122 151 
   /* Background color */
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.scss
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,8 +34,6 @@
32 34 
 }
33 35
34 36 
 .content-background-wrapper {
35 
-  --content-gap: var(--vr-bw-padding-inline);
36 
-
37 37 
   position: relative;
38 38
39 39 
   /* Background base */
... ... 
@@ -108,11 +108,11 @@
108 108 
     .content-background-wrapper-fg {
109 109 
       .content-grid {
110 110 
         .fragments {
111 
-          padding-left: calc(50% + var(--content-gap));
111 
+          padding-left: calc(50% + var(--vr-bw-content-gap));
112 112
113 113 
           @at-root .-bg-horizontal-align-right#{&} {
114 114 
             padding-left: 0;
115 
-            padding-right: calc(50% + var(--content-gap));
115 
+            padding-right: calc(50% + var(--vr-bw-content-gap));
116 116 
           }
117 117 
         }
118 118 
       }
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.scss
History View file @b011db5
... ... 
@@ -32,6 +32,8 @@
32 32 
 }
33 33
34 34 
 .content-background-wrapper {
35 
+  --content-gap: var(--vr-bw-padding-inline);
36 
+
35 37 
   position: relative;
36 38
37 39 
   /* Background base */
... ... 
@@ -106,7 +108,6 @@
106 108 
     .content-background-wrapper-fg {
107 109 
       .content-grid {
108 110 
         .fragments {
109 
-          --content-gap: var(--vr-bw-padding-inline);
110 111 
           padding-left: calc(50% + var(--content-gap));
111 112
112 113 
           @at-root .-bg-horizontal-align-right#{&} {
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.scss
History View file @2b3eedb
... ... 
@@ -106,11 +106,12 @@
106 106 
     .content-background-wrapper-fg {
107 107 
       .content-grid {
108 108 
         .fragments {
109 
-          padding-left: calc(50% + var(--vr-bw-padding-inline));
109 
+          --content-gap: var(--vr-bw-padding-inline);
110 
+          padding-left: calc(50% + var(--content-gap));
110 111
111 112 
           @at-root .-bg-horizontal-align-right#{&} {
112 113 
             padding-left: 0;
113 
-            padding-right: calc(50% + var(--vr-bw-padding-inline));
114 
+            padding-right: calc(50% + var(--content-gap));
114 115 
           }
115 116 
         }
116 117 
       }
Browse code

Add basic background aside functionality

Benjamin Roth authored on28/04/2025 14:39:18
Showing1 changed files
public/css/background-wrapper.scss
History View file @7c56958
... ... 
@@ -106,11 +106,11 @@
106 106 
     .content-background-wrapper-fg {
107 107 
       .content-grid {
108 108 
         .fragments {
109 
-          padding-left: 50%;
109 
+          padding-left: calc(50% + var(--vr-bw-padding-inline));
110 110
111 111 
           @at-root .-bg-horizontal-align-right#{&} {
112 112 
             padding-left: 0;
113 
-            padding-right: 50%;
113 
+            padding-right: calc(50% + var(--vr-bw-padding-inline));
114 114 
           }
115 115 
         }
116 116 
       }
Browse code

WIP

Benjamin Roth authored on28/04/2025 12:38:01
Showing1 changed files
public/css/background-wrapper.scss
History View file @2ac4bd6
... ... 
@@ -94,6 +94,29 @@
94 94 
     @at-root .-bg-opacity-100#{&} { opacity: 1 }
95 95 
   }
96 96
97 
+  /* Bacgkround beside */
98 
+  &.-bg-beside-content {
99 
+    .content-background-wrapper-bg {
100 
+      inset: 0 auto 0 0;
101 
+      width: 50%;
102 
+
103 
+      @at-root .-bg-horizontal-align-right#{&} { inset: 0 0 0 auto; }
104 
+    }
105 
+
106 
+    .content-background-wrapper-fg {
107 
+      .content-grid {
108 
+        .fragments {
109 
+          padding-left: 50%;
110 
+
111 
+          @at-root .-bg-horizontal-align-right#{&} {
112 
+            padding-left: 0;
113 
+            padding-right: 50%;
114 
+          }
115 
+        }
116 
+      }
117 
+    }
118 
+  }
119 
+
97 120 
   /* Background color */
98 121 
   &.-alt-color-1 { background-color: var(--vr-bw-bgcolor-1); }
99 122 
   &.-alt-color-2 { background-color: var(--vr-bw-bgcolor-2); }
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.scss
History View file @d2dca1a
... ... 
@@ -137,7 +137,7 @@
137 137 
       @at-root .-mh-viewport-33#{&} { min-height: 33.333svh; }
138 138 
     }
139 139 
     @at-root .-mh-ratio#{&} {
140 
-      display: flow-root;
140 
+      /*display: flow-root;*/
141 141 
       &:before {
142 142 
         display: table;
143 143 
         content: "";
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.scss
History View file @23c574f
... ... 
@@ -180,7 +180,7 @@
180 180
181 181 
       > .fragments {
182 182 
         grid-column: content;
183 
-        //position: relative;
183 
+        position: relative;
184 184
185 185 
         @at-root .-width-small#{&} { grid-column: indent; }
186 186 
         @at-root .-width-extended#{&} { grid-column: breakout; }
... ... 
@@ -216,6 +216,11 @@
216 216
217 217 
     @at-root .-va-center#{&} { align-items: center; }
218 218 
     @at-root .-va-bottom#{&} { align-items: flex-end; }
219 
+    @at-root .-va-stretch#{&} {
220 
+      display:flex;
221 
+      align-items: stretch;
222 
+      .content-grid { flex: 1; }
223 
+    }
219 224 
   }
220 225
221 226 
   /* Padding */
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.scss
History View file @015ab87
... ... 
@@ -180,7 +180,7 @@
180 180
181 181 
       > .fragments {
182 182 
         grid-column: content;
183 
-        position: relative;
183 
+        //position: relative;
184 184
185 185 
         @at-root .-width-small#{&} { grid-column: indent; }
186 186 
         @at-root .-width-extended#{&} { grid-column: breakout; }
Browse code

Initial commit

Benjamin Roth authored on09/10/2024 01:09:48
Showing1 changed files
public/css/background-wrapper.scss
History View file @7214d4d
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,243 @@
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 
+    --vr-bw-padding-inline: .5rem;
30 
+  }
31 
+
32 
+}
33 
+
34 
+.content-background-wrapper {
35 
+  position: relative;
36 
+
37 
+  /* Background base */
38 
+  .content-background-wrapper-bg {
39 
+    position: absolute;
40 
+    inset: 0;
41 
+
42 
+    figure {
43 
+
44 
+    }
45 
+    img,
46 
+    video {
47 
+      position: absolute;
48 
+      inset: 0;
49 
+      object-fit: cover;
50 
+      object-position: 50% 50%;
51 
+      display: block;
52 
+      width: 100%;
53 
+      height: 100%;
54 
+    }
55 
+  }
56 
+
57 
+  /* Background scaling */
58 
+  .content-background-wrapper-bg {
59 
+    img,
60 
+    video {
61 
+      @at-root .-bg-size-contain#{&} { object-fit: contain; }
62 
+      @at-root .-bg-size-stretch#{&} { object-fit: fill; }
63 
+      @at-root .-bg-size-auto#{&} { object-fit: none; }
64 
+    }
65 
+  }
66 
+
67 
+  /* Background position */
68 
+  .content-background-wrapper-bg {
69 
+    img,
70 
+    video {
71 
+      @at-root .-bg-pos-0-0#{&} { object-position: 0 0; }
72 
+      @at-root .-bg-pos-50-0#{&} { object-position: 50% 0; }
73 
+      @at-root .-bg-pos-100-0#{&} { object-position: 100% 0; }
74 
+      @at-root .-bg-pos-0-50#{&} { object-position: 0 50%; }
75 
+      @at-root .-bg-pos-50-50#{&} { object-position: 50% 50%; }
76 
+      @at-root .-bg-pos-100-50#{&} { object-position: 100% 50%; }
77 
+      @at-root .-bg-pos-0-100#{&} { object-position: 0 100%; }
78 
+      @at-root .-bg-pos-50-100#{&} { object-position: 50% 100%; }
79 
+      @at-root .-bg-pos-100-100#{&} { object-position: 100% 100%; }
80 
+    }
81 
+  }
82 
+
83 
+  /* Background opacity */
84 
+  .content-background-wrapper-bg {
85 
+    @at-root .-bg-opacity-10#{&} { opacity: .1 }
86 
+    @at-root .-bg-opacity-20#{&} { opacity: .2 }
87 
+    @at-root .-bg-opacity-30#{&} { opacity: .3 }
88 
+    @at-root .-bg-opacity-40#{&} { opacity: .4 }
89 
+    @at-root .-bg-opacity-50#{&} { opacity: .5 }
90 
+    @at-root .-bg-opacity-60#{&} { opacity: .6 }
91 
+    @at-root .-bg-opacity-70#{&} { opacity: .7 }
92 
+    @at-root .-bg-opacity-80#{&} { opacity: .8 }
93 
+    @at-root .-bg-opacity-90#{&} { opacity: .9 }
94 
+    @at-root .-bg-opacity-100#{&} { opacity: 1 }
95 
+  }
96 
+
97 
+  /* Background color */
98 
+  &.-alt-color-1 { background-color: var(--vr-bw-bgcolor-1); }
99 
+  &.-alt-color-2 { background-color: var(--vr-bw-bgcolor-2); }
100 
+  &.-alt-color-3 { background-color: var(--vr-bw-bgcolor-3); }
101 
+  &.-alt-color-black {
102 
+    background-color: #000;
103 
+
104 
+    .content-background-wrapper-fg {
105 
+      &,
106 
+      h1,h2,h3,h4,h5,h6 {
107 
+        color: #FFFFFF;
108 
+      }
109 
+    }
110 
+  }
111 
+  &.-alt-color-white {
112 
+    background-color: white;
113 
+
114 
+    .content-background-wrapper-fg {
115 
+      &,
116 
+      h1,h2,h3,h4,h5,h6 {
117 
+        color: #000000;
118 
+      }
119 
+    }
120 
+  }
121 
+
122 
+  /* Foreground base */
123 
+  .content-background-wrapper-fg {
124 
+    position: relative;
125 
+    box-sizing: border-box;
126 
+  }
127 
+
128 
+  /* Height */
129 
+  .content-background-wrapper-fg {
130 
+    @at-root .-mh-small#{&} { min-height: var(--vr-bw-height-small); }
131 
+    @at-root .-mh-medium#{&} { min-height: var(--vr-bw-height-medium); }
132 
+    @at-root .-mh-large#{&} { min-height: var(--vr-bw-height-large); }
133 
+    @at-root .-mh-vh#{&} {
134 
+      @at-root .-mh-viewport-100#{&} { min-height: 100svh; }
135 
+      @at-root .-mh-viewport-66#{&} { min-height: 66.666svh; }
136 
+      @at-root .-mh-viewport-50#{&} { min-height: 50svh; }
137 
+      @at-root .-mh-viewport-33#{&} { min-height: 33.333svh; }
138 
+    }
139 
+    @at-root .-mh-ratio#{&} {
140 
+      display: flow-root;
141 
+      &:before {
142 
+        display: table;
143 
+        content: "";
144 
+        padding-top: 100%;
145 
+        float: left;
146 
+
147 
+        @at-root .-mh-ratio-21-9#{&} { padding-top: 42.857%; }
148 
+        @at-root .-mh-ratio-16-10#{&} { padding-top: 62.5%; }
149 
+        @at-root .-mh-ratio-16-9#{&} { padding-top: 56.25%; }
150 
+        @at-root .-mh-ratio-8-3#{&} { padding-top: 37.5%; }
151 
+        @at-root .-mh-ratio-5-4#{&} { padding-top: 80%; }
152 
+        @at-root .-mh-ratio-4-3#{&} { padding-top: 75%; }
153 
+        @at-root .-mh-ratio-3-2#{&} { padding-top: 66.666%; }
154 
+        @at-root .-mh-ratio-5-1#{&} { padding-top: 20%; }
155 
+        @at-root .-mh-ratio-4-1#{&} { padding-top: 25%; }
156 
+        @at-root .-mh-ratio-3-1#{&} { padding-top: 33.333%; }
157 
+        @at-root .-mh-ratio-2-1#{&} { padding-top: 50%; }
158 
+        @at-root .-mh-ratio-1-1#{&} { padding-top: 100%; }
159 
+      }
160 
+    }
161 
+  }
162 
+
163 
+  /* Content width */
164 
+  .content-background-wrapper-fg {
165 
+    .content-grid {
166 
+      width: 100%;
167 
+      display: grid;
168 
+      grid-template-columns:
169 
+      [full-width-start] minmax(var(--vr-bw-padding-inline), 1fr)
170 
+      [breakout-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size))
171 
+      [content-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size))
172 
+      [indent-start] min(
173 
+        100% - (var(--vr-bw-padding-inline) * 6),
174 
+        var(--vr-bw-indent-max-width)
175 
+      )
176 
+      [indent-end]
177 
+      minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [content-end]
178 
+      minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [breakout-end]
179 
+      minmax(var(--vr-bw-padding-inline), 1fr) [full-width-end];
180 
+
181 
+      > .fragments {
182 
+        grid-column: content;
183 
+        position: relative;
184 
+
185 
+        @at-root .-width-small#{&} { grid-column: indent; }
186 
+        @at-root .-width-extended#{&} { grid-column: breakout; }
187 
+        @at-root .-width-default-left#{&} { grid-column: breakout / indent; }
188 
+        @at-root .-width-default-right#{&} { grid-column: indent / breakout; }
189 
+        @at-root .-width-extended-left#{&} { grid-column: breakout / content; }
190 
+        @at-root .-width-extended-right#{&} { grid-column: content / breakout; }
191 
+        @at-root .-width-full#{&} { grid-column: full-width; }
192 
+
193 
+        @media screen and (max-width: 599px) {
194 
+          @at-root .-width-extended#{&} { grid-column: full-width; }
195 
+          @at-root .-width-default-left#{&} { grid-column: full-width / content; }
196 
+          @at-root .-width-default-right#{&} { grid-column: content / full-width; }
197 
+          @at-root .-width-extended-left#{&} { grid-column: full-width / content; }
198 
+          @at-root .-width-extended-right#{&} { grid-column: content / full-width; }
199 
+
200 
+          @at-root .-add-text-indent#{&} {
201 
+            @at-root .-width-extended#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2); }
202 
+            @at-root .-width-default-left#{&} { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); }
203 
+            @at-root .-width-default-right#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; }
204 
+            @at-root .-width-extended-left#{&} { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); }
205 
+            @at-root .-width-extended-right#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; }
206 
+          }
207 
+        }
208 
+      }
209 
+    }
210 
+  }
211 
+
212 
+  /* Vertical alignment */
213 
+  .content-background-wrapper-fg {
214 
+    display: flex;
215 
+    align-items: flex-start;
216 
+
217 
+    @at-root .-va-center#{&} { align-items: center; }
218 
+    @at-root .-va-bottom#{&} { align-items: flex-end; }
219 
+  }
220 
+
221 
+  /* Padding */
222 
+  .content-background-wrapper-fg {
223 
+    .fragments {
224 
+      @at-root .-padding#{&} { padding: var(--vr-bw-padding-small) 0; }
225 
+      @at-root .-padding-medium#{&} { padding: var(--vr-bw-padding-medium) 0; }
226 
+      @at-root .-padding-large#{&} { padding: var(--vr-bw-padding-large) 0; }
227 
+      @at-root .-padding-top#{&} { padding: var(--vr-bw-padding-small) 0 0; }
228 
+      @at-root .-padding-top-medium#{&} { padding: var(--vr-bw-padding-medium) 0 0; }
229 
+      @at-root .-padding-top-large#{&} { padding: var(--vr-bw-padding-large) 0 0; }
230 
+      @at-root .-padding-bottom#{&} { padding: 0 0 var(--vr-bw-padding-small); }
231 
+      @at-root .-padding-bottom-medium#{&} {padding:  0 0 var(--vr-bw-padding-medium); }
232 
+      @at-root .-padding-bottom-large#{&} { padding: 0 0 var(--vr-bw-padding-large); }
233 
+    }
234 
+  }
235 
+
236 
+  /* Color */
237 
+  .content-background-wrapper-fg {
238 
+    @at-root .-color-inverted#{&} {
239 
+      & { color: var(--vr-bw-color-inverted) }
240 
+      h1,h2,h3,h4,h5,h6 { color: var(--vr-bw-color-headline-inverted) }
241 
+    }
242 
+  }
243 
+}