diff --git a/docs/documentation/scss-legacy/Breakpoints.html b/docs/documentation/scss-legacy/Breakpoints.html
index bcdf420..0e45346 100644
--- a/docs/documentation/scss-legacy/Breakpoints.html
+++ b/docs/documentation/scss-legacy/Breakpoints.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html b/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html
index 4633edf..0c62d8f 100644
--- a/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html
+++ b/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html
@@ -366,7 +366,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html b/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html
index dd8d406..aa06d69 100644
--- a/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html
+++ b/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html
@@ -339,7 +339,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html b/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html
index bc57c76..055744f 100644
--- a/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html
+++ b/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html
@@ -336,7 +336,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_breakpoint.html
index b584a02..1b5bc65 100644
--- a/docs/documentation/scss-legacy/Breakpoints_breakpoint.html
+++ b/docs/documentation/scss-legacy/Breakpoints_breakpoint.html
@@ -276,7 +276,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html
index 85fde6d..da2cf4c 100644
--- a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html
+++ b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html
@@ -341,7 +341,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html
index 4ec24b7..4bfbf56 100644
--- a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html
+++ b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html
index a7fba2e..b8e88dd 100644
--- a/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html
+++ b/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html
@@ -242,7 +242,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html
index a27ccf4..9007971 100644
--- a/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html
+++ b/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html
@@ -282,7 +282,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html
index 018733c..3d61cdf 100644
--- a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html
+++ b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html
@@ -358,7 +358,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html
index 5a21f83..a302dcd 100644
--- a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html
+++ b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html
@@ -330,7 +330,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html
index 23cab26..e195642 100644
--- a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html
+++ b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html
@@ -215,7 +215,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html
index fd42304..b47895b 100644
--- a/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html
+++ b/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html
@@ -219,7 +219,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html
index 2c9962f..a4c0354 100644
--- a/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html
+++ b/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html
@@ -284,7 +284,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Content.html b/docs/documentation/scss-legacy/Content.html
index 5511b01..34aceed 100644
--- a/docs/documentation/scss-legacy/Content.html
+++ b/docs/documentation/scss-legacy/Content.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Content_base-font-size-value.html b/docs/documentation/scss-legacy/Content_base-font-size-value.html
index 637b83a..ea3042d 100644
--- a/docs/documentation/scss-legacy/Content_base-font-size-value.html
+++ b/docs/documentation/scss-legacy/Content_base-font-size-value.html
@@ -233,7 +233,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Content_content-holder.html b/docs/documentation/scss-legacy/Content_content-holder.html
index fb14e53..834f2f7 100644
--- a/docs/documentation/scss-legacy/Content_content-holder.html
+++ b/docs/documentation/scss-legacy/Content_content-holder.html
@@ -325,7 +325,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Content_content-padding-value.html b/docs/documentation/scss-legacy/Content_content-padding-value.html
index 4666e2b..6118dd8 100644
--- a/docs/documentation/scss-legacy/Content_content-padding-value.html
+++ b/docs/documentation/scss-legacy/Content_content-padding-value.html
@@ -316,7 +316,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Content_content-width-value.html b/docs/documentation/scss-legacy/Content_content-width-value.html
index 900317a..7de39c8 100644
--- a/docs/documentation/scss-legacy/Content_content-width-value.html
+++ b/docs/documentation/scss-legacy/Content_content-width-value.html
@@ -346,7 +346,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Grid.html b/docs/documentation/scss-legacy/Grid.html
index c01b1c3..44a0917 100644
--- a/docs/documentation/scss-legacy/Grid.html
+++ b/docs/documentation/scss-legacy/Grid.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Grid_grid-container.html b/docs/documentation/scss-legacy/Grid_grid-container.html
index 827143e..3083770 100644
--- a/docs/documentation/scss-legacy/Grid_grid-container.html
+++ b/docs/documentation/scss-legacy/Grid_grid-container.html
@@ -219,7 +219,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Grid_grid-item-align.html b/docs/documentation/scss-legacy/Grid_grid-item-align.html
index aa31185..904b5a8 100644
--- a/docs/documentation/scss-legacy/Grid_grid-item-align.html
+++ b/docs/documentation/scss-legacy/Grid_grid-item-align.html
@@ -328,7 +328,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Grid_grid-item.html b/docs/documentation/scss-legacy/Grid_grid-item.html
index a513c5a..be89515 100644
--- a/docs/documentation/scss-legacy/Grid_grid-item.html
+++ b/docs/documentation/scss-legacy/Grid_grid-item.html
@@ -506,7 +506,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Grid_gutter-value.html b/docs/documentation/scss-legacy/Grid_gutter-value.html
index 5fcc019..5ed609b 100644
--- a/docs/documentation/scss-legacy/Grid_gutter-value.html
+++ b/docs/documentation/scss-legacy/Grid_gutter-value.html
@@ -106,7 +106,7 @@ <h3 class="subsection-title">Methods</h3>
 
     
 
-    <h4 class="name" id="gutter-value"><span class="type-signature"></span>gutter-value<span class="signature">($factor<span class="signature-attributes">opt</span>, $add<span class="signature-attributes">opt</span>, $direction<span class="signature-attributes">opt</span>, $breakpoint<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Number}</span></h4>
+    <h4 class="name" id="gutter-value"><span class="type-signature"></span>gutter-value<span class="signature">($direction<span class="signature-attributes">opt</span>, $breakpoint<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Number}</span></h4>
 
     
 
@@ -155,84 +155,6 @@ <h5>Parameters:</h5>
     <tbody>
     
 
-        <tr>
-            
-                <td class="name"><code>$factor</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Number</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
-
-            
-                <td class="default">
-                
-                    1.0
-                
-                </td>
-            
-
-            <td class="description last"><p>factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example</p></td>
-        </tr>
-
-    
-
-        <tr>
-            
-                <td class="name"><code>$add</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Number</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
-
-            
-                <td class="default">
-                
-                    0
-                
-                </td>
-            
-
-            <td class="description last"><p>value to add to the finally evaluated gutter value, may also be negative to subtract</p></td>
-        </tr>
-
-    
-
         <tr>
             
                 <td class="name"><code>$direction</code></td>
@@ -409,7 +331,7 @@ <h5>Returns:</h5>
     <h5>Example</h5>
     
     <pre class="prettyprint"><code>@include breakpoint(medium){
-  padding-left: gutter-value(0.5);
+  padding-left: gutter-value() * 0.5;
 }
 margin-top: gutter-value($direction:'vertical', $breakpoint:'small');</code></pre>
 
@@ -437,7 +359,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Spacing.html b/docs/documentation/scss-legacy/Spacing.html
index 3c8e1a5..d83091c 100644
--- a/docs/documentation/scss-legacy/Spacing.html
+++ b/docs/documentation/scss-legacy/Spacing.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html b/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html
index dc8abab..9fe7e1b 100644
--- a/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html
+++ b/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html
@@ -370,7 +370,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html b/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html
index 75f90c0..8d8c9b1 100644
--- a/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html
+++ b/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Spacing_spacing-value.html b/docs/documentation/scss-legacy/Spacing_spacing-value.html
index b58b1e3..6cf64c6 100644
--- a/docs/documentation/scss-legacy/Spacing_spacing-value.html
+++ b/docs/documentation/scss-legacy/Spacing_spacing-value.html
@@ -357,7 +357,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Util.html b/docs/documentation/scss-legacy/Util.html
index c3bcd4e..ae8a2c5 100644
--- a/docs/documentation/scss-legacy/Util.html
+++ b/docs/documentation/scss-legacy/Util.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Util_map-get-deep.html b/docs/documentation/scss-legacy/Util_map-get-deep.html
index 42cba16..b62e2d6 100644
--- a/docs/documentation/scss-legacy/Util_map-get-deep.html
+++ b/docs/documentation/scss-legacy/Util_map-get-deep.html
@@ -311,7 +311,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Util_map-next.html b/docs/documentation/scss-legacy/Util_map-next.html
index 0c0f644..3298e8b 100644
--- a/docs/documentation/scss-legacy/Util_map-next.html
+++ b/docs/documentation/scss-legacy/Util_map-next.html
@@ -310,7 +310,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Util_str-join.html b/docs/documentation/scss-legacy/Util_str-join.html
index c9f272d..1b37413 100644
--- a/docs/documentation/scss-legacy/Util_str-join.html
+++ b/docs/documentation/scss-legacy/Util_str-join.html
@@ -308,7 +308,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Util_strip-unit.html b/docs/documentation/scss-legacy/Util_strip-unit.html
index 5f15bcc..7b747a6 100644
--- a/docs/documentation/scss-legacy/Util_strip-unit.html
+++ b/docs/documentation/scss-legacy/Util_strip-unit.html
@@ -282,7 +282,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Util_to-em.html b/docs/documentation/scss-legacy/Util_to-em.html
index efa6166..0dc8797 100644
--- a/docs/documentation/scss-legacy/Util_to-em.html
+++ b/docs/documentation/scss-legacy/Util_to-em.html
@@ -314,7 +314,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/Util_to-rem.html b/docs/documentation/scss-legacy/Util_to-rem.html
index a2b727c..305d1a5 100644
--- a/docs/documentation/scss-legacy/Util_to-rem.html
+++ b/docs/documentation/scss-legacy/Util_to-rem.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/breakpoints.scss.html b/docs/documentation/scss-legacy/breakpoints.scss.html
index d775950..6a7bf7c 100644
--- a/docs/documentation/scss-legacy/breakpoints.scss.html
+++ b/docs/documentation/scss-legacy/breakpoints.scss.html
@@ -641,7 +641,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/content.scss.html b/docs/documentation/scss-legacy/content.scss.html
index 7233719..ac59381 100644
--- a/docs/documentation/scss-legacy/content.scss.html
+++ b/docs/documentation/scss-legacy/content.scss.html
@@ -209,7 +209,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/grid.scss.html b/docs/documentation/scss-legacy/grid.scss.html
index 23f2158..fe10aa9 100644
--- a/docs/documentation/scss-legacy/grid.scss.html
+++ b/docs/documentation/scss-legacy/grid.scss.html
@@ -215,8 +215,6 @@ <h1 class="page-title">Source: grid.scss</h1>
  * @name gutter-value
  * @alias gutter-value
  *
- * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example
- * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract
  * @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
  * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
  * @returns {Number} the determined gutter value with applied factor and/or addition
@@ -224,11 +222,11 @@ <h1 class="page-title">Source: grid.scss</h1>
  *
  * @example
  * \@include breakpoint(medium){
- *   padding-left: gutter-value(0.5);
+ *   padding-left: gutter-value() * 0.5;
  * }
  * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');
  */
-@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){
+@function gutter-value($direction:'horizontal', $breakpoint:'auto'){
 	$gutter: map-get-deep($jig---grid-config, 'gutters', $direction);
 	$res: null;
 
@@ -244,7 +242,7 @@ <h1 class="page-title">Source: grid.scss</h1>
 		@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';
 	}
 
-	@return ($res * $factor) + $add;
+	@return $res;
 }
 </code></pre>
         </article>
@@ -262,7 +260,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/index.html b/docs/documentation/scss-legacy/index.html
index dce0a58..6ed4da8 100644
--- a/docs/documentation/scss-legacy/index.html
+++ b/docs/documentation/scss-legacy/index.html
@@ -317,7 +317,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/spacing.scss.html b/docs/documentation/scss-legacy/spacing.scss.html
index bd97a83..3c4186b 100644
--- a/docs/documentation/scss-legacy/spacing.scss.html
+++ b/docs/documentation/scss-legacy/spacing.scss.html
@@ -169,7 +169,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss-legacy/util.scss.html b/docs/documentation/scss-legacy/util.scss.html
index 9ff9ca8..467af63 100644
--- a/docs/documentation/scss-legacy/util.scss.html
+++ b/docs/documentation/scss-legacy/util.scss.html
@@ -293,7 +293,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints.html b/docs/documentation/scss/Breakpoints.html
index 6f20901..4d25bdf 100644
--- a/docs/documentation/scss/Breakpoints.html
+++ b/docs/documentation/scss/Breakpoints.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html b/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html
index 8fc6d8f..b7d730c 100644
--- a/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html
+++ b/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html
@@ -366,7 +366,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html b/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html
index a38fb99..c2367ae 100644
--- a/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html
+++ b/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html
@@ -339,7 +339,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_breakpoint-value.html b/docs/documentation/scss/Breakpoints_breakpoint-value.html
index ffaceaf..104890e 100644
--- a/docs/documentation/scss/Breakpoints_breakpoint-value.html
+++ b/docs/documentation/scss/Breakpoints_breakpoint-value.html
@@ -336,7 +336,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_breakpoint.html b/docs/documentation/scss/Breakpoints_breakpoint.html
index fc0c293..fdcaf9a 100644
--- a/docs/documentation/scss/Breakpoints_breakpoint.html
+++ b/docs/documentation/scss/Breakpoints_breakpoint.html
@@ -276,7 +276,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_build-breakpoint-query.html b/docs/documentation/scss/Breakpoints_build-breakpoint-query.html
index 47e5c32..835352f 100644
--- a/docs/documentation/scss/Breakpoints_build-breakpoint-query.html
+++ b/docs/documentation/scss/Breakpoints_build-breakpoint-query.html
@@ -341,7 +341,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_build-breakpoint-range.html b/docs/documentation/scss/Breakpoints_build-breakpoint-range.html
index 9dad1cc..f21dd79 100644
--- a/docs/documentation/scss/Breakpoints_build-breakpoint-range.html
+++ b/docs/documentation/scss/Breakpoints_build-breakpoint-range.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html b/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html
index d90dab6..d00e8f6 100644
--- a/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html
+++ b/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html
@@ -242,7 +242,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_is-named-breakpoint.html b/docs/documentation/scss/Breakpoints_is-named-breakpoint.html
index d9fc0c8..b73c9ae 100644
--- a/docs/documentation/scss/Breakpoints_is-named-breakpoint.html
+++ b/docs/documentation/scss/Breakpoints_is-named-breakpoint.html
@@ -282,7 +282,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html
index 914b13d..7c67f29 100644
--- a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html
+++ b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html
@@ -358,7 +358,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html
index 9e35cae..41b6fd7 100644
--- a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html
+++ b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html
@@ -330,7 +330,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html b/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html
index 2a7db40..c4cfc17 100644
--- a/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html
+++ b/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html
@@ -215,7 +215,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html b/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html
index 42e28c0..4f09a98 100644
--- a/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html
+++ b/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html
@@ -219,7 +219,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html b/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html
index 6bc38af..3f08b72 100644
--- a/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html
+++ b/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html
@@ -284,7 +284,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Content.html b/docs/documentation/scss/Content.html
index 21f045b..d86ecb2 100644
--- a/docs/documentation/scss/Content.html
+++ b/docs/documentation/scss/Content.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Content_base-font-size-value.html b/docs/documentation/scss/Content_base-font-size-value.html
index 76ed5ec..8096d86 100644
--- a/docs/documentation/scss/Content_base-font-size-value.html
+++ b/docs/documentation/scss/Content_base-font-size-value.html
@@ -233,7 +233,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Content_content-holder.html b/docs/documentation/scss/Content_content-holder.html
index 53b8150..e17bc47 100644
--- a/docs/documentation/scss/Content_content-holder.html
+++ b/docs/documentation/scss/Content_content-holder.html
@@ -325,7 +325,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Content_content-padding-value.html b/docs/documentation/scss/Content_content-padding-value.html
index 85072b2..95e75d6 100644
--- a/docs/documentation/scss/Content_content-padding-value.html
+++ b/docs/documentation/scss/Content_content-padding-value.html
@@ -316,7 +316,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Content_content-width-value.html b/docs/documentation/scss/Content_content-width-value.html
index 5f7d65d..6f8fb3b 100644
--- a/docs/documentation/scss/Content_content-width-value.html
+++ b/docs/documentation/scss/Content_content-width-value.html
@@ -346,7 +346,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Grid.html b/docs/documentation/scss/Grid.html
index bb03ecf..30f2d44 100644
--- a/docs/documentation/scss/Grid.html
+++ b/docs/documentation/scss/Grid.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Grid_grid-container.html b/docs/documentation/scss/Grid_grid-container.html
index 1ecedcd..455b0f3 100644
--- a/docs/documentation/scss/Grid_grid-container.html
+++ b/docs/documentation/scss/Grid_grid-container.html
@@ -219,7 +219,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Grid_grid-item-align.html b/docs/documentation/scss/Grid_grid-item-align.html
index 1e653bd..584eb2d 100644
--- a/docs/documentation/scss/Grid_grid-item-align.html
+++ b/docs/documentation/scss/Grid_grid-item-align.html
@@ -328,7 +328,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Grid_grid-item.html b/docs/documentation/scss/Grid_grid-item.html
index a04cab6..26b60e9 100644
--- a/docs/documentation/scss/Grid_grid-item.html
+++ b/docs/documentation/scss/Grid_grid-item.html
@@ -506,7 +506,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Grid_gutter-value.html b/docs/documentation/scss/Grid_gutter-value.html
index 83e9a4e..fbaddcc 100644
--- a/docs/documentation/scss/Grid_gutter-value.html
+++ b/docs/documentation/scss/Grid_gutter-value.html
@@ -106,7 +106,7 @@ <h3 class="subsection-title">Methods</h3>
 
     
 
-    <h4 class="name" id="gutter-value"><span class="type-signature"></span>gutter-value<span class="signature">($factor<span class="signature-attributes">opt</span>, $add<span class="signature-attributes">opt</span>, $direction<span class="signature-attributes">opt</span>, $breakpoint<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Number}</span></h4>
+    <h4 class="name" id="gutter-value"><span class="type-signature"></span>gutter-value<span class="signature">($direction<span class="signature-attributes">opt</span>, $breakpoint<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Number}</span></h4>
 
     
 
@@ -155,84 +155,6 @@ <h5>Parameters:</h5>
     <tbody>
     
 
-        <tr>
-            
-                <td class="name"><code>$factor</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Number</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
-
-            
-                <td class="default">
-                
-                    1.0
-                
-                </td>
-            
-
-            <td class="description last"><p>factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example</p></td>
-        </tr>
-
-    
-
-        <tr>
-            
-                <td class="name"><code>$add</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Number</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
-
-            
-                <td class="default">
-                
-                    0
-                
-                </td>
-            
-
-            <td class="description last"><p>value to add to the finally evaluated gutter value, may also be negative to subtract</p></td>
-        </tr>
-
-    
-
         <tr>
             
                 <td class="name"><code>$direction</code></td>
@@ -409,7 +331,7 @@ <h5>Returns:</h5>
     <h5>Example</h5>
     
     <pre class="prettyprint"><code>@include breakpoint(medium){
-  padding-left: gutter-value(0.5);
+  padding-left: gutter-value() * 0.5;
 }
 margin-top: gutter-value($direction:'vertical', $breakpoint:'small');</code></pre>
 
@@ -437,7 +359,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Spacing.html b/docs/documentation/scss/Spacing.html
index 8799941..cb0d002 100644
--- a/docs/documentation/scss/Spacing.html
+++ b/docs/documentation/scss/Spacing.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Spacing_spacing-based-attribute.html b/docs/documentation/scss/Spacing_spacing-based-attribute.html
index 2f9b139..2545779 100644
--- a/docs/documentation/scss/Spacing_spacing-based-attribute.html
+++ b/docs/documentation/scss/Spacing_spacing-based-attribute.html
@@ -370,7 +370,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Spacing_spacing-based-attributes.html b/docs/documentation/scss/Spacing_spacing-based-attributes.html
index 1d24367..bf74b79 100644
--- a/docs/documentation/scss/Spacing_spacing-based-attributes.html
+++ b/docs/documentation/scss/Spacing_spacing-based-attributes.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Spacing_spacing-value.html b/docs/documentation/scss/Spacing_spacing-value.html
index f36e401..162b21c 100644
--- a/docs/documentation/scss/Spacing_spacing-value.html
+++ b/docs/documentation/scss/Spacing_spacing-value.html
@@ -357,7 +357,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Util.html b/docs/documentation/scss/Util.html
index e2c2f42..5c3fc3e 100644
--- a/docs/documentation/scss/Util.html
+++ b/docs/documentation/scss/Util.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Util_map-next.html b/docs/documentation/scss/Util_map-next.html
index 65ffdfb..f4775b9 100644
--- a/docs/documentation/scss/Util_map-next.html
+++ b/docs/documentation/scss/Util_map-next.html
@@ -310,7 +310,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Util_str-join.html b/docs/documentation/scss/Util_str-join.html
index 76db8ab..65f4715 100644
--- a/docs/documentation/scss/Util_str-join.html
+++ b/docs/documentation/scss/Util_str-join.html
@@ -308,7 +308,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Util_strip-unit.html b/docs/documentation/scss/Util_strip-unit.html
index 857d47c..c3614bc 100644
--- a/docs/documentation/scss/Util_strip-unit.html
+++ b/docs/documentation/scss/Util_strip-unit.html
@@ -282,7 +282,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Util_to-em.html b/docs/documentation/scss/Util_to-em.html
index 6898211..3b8ca4b 100644
--- a/docs/documentation/scss/Util_to-em.html
+++ b/docs/documentation/scss/Util_to-em.html
@@ -314,7 +314,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/Util_to-rem.html b/docs/documentation/scss/Util_to-rem.html
index fc70b04..e60d9d7 100644
--- a/docs/documentation/scss/Util_to-rem.html
+++ b/docs/documentation/scss/Util_to-rem.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/breakpoints.scss.html b/docs/documentation/scss/breakpoints.scss.html
index 35f3292..980f59b 100644
--- a/docs/documentation/scss/breakpoints.scss.html
+++ b/docs/documentation/scss/breakpoints.scss.html
@@ -650,7 +650,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/content.scss.html b/docs/documentation/scss/content.scss.html
index 354d962..a7b1caf 100644
--- a/docs/documentation/scss/content.scss.html
+++ b/docs/documentation/scss/content.scss.html
@@ -218,7 +218,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/grid.scss.html b/docs/documentation/scss/grid.scss.html
index 3b7c3f4..8fef699 100644
--- a/docs/documentation/scss/grid.scss.html
+++ b/docs/documentation/scss/grid.scss.html
@@ -224,8 +224,6 @@ <h1 class="page-title">Source: grid.scss</h1>
  * @name gutter-value
  * @alias gutter-value
  *
- * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example
- * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract
  * @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
  * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
  * @returns {Number} the determined gutter value with applied factor and/or addition
@@ -233,11 +231,11 @@ <h1 class="page-title">Source: grid.scss</h1>
  *
  * @example
  * \@include breakpoint(medium){
- *   padding-left: gutter-value(0.5);
+ *   padding-left: gutter-value() * 0.5;
  * }
  * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');
  */
-@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){
+@function gutter-value($direction:'horizontal', $breakpoint:'auto'){
 	$gutter: map.get($jig---grid-config, 'gutters', $direction);
 	$res: null;
 
@@ -253,7 +251,7 @@ <h1 class="page-title">Source: grid.scss</h1>
 		@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';
 	}
 
-	@return ($res * $factor) + $add;
+	@return $res;
 }
 </code></pre>
         </article>
@@ -271,7 +269,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/index.html b/docs/documentation/scss/index.html
index e95081d..95cd05d 100644
--- a/docs/documentation/scss/index.html
+++ b/docs/documentation/scss/index.html
@@ -317,7 +317,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/spacing.scss.html b/docs/documentation/scss/spacing.scss.html
index fce21f8..e4b65b1 100644
--- a/docs/documentation/scss/spacing.scss.html
+++ b/docs/documentation/scss/spacing.scss.html
@@ -177,7 +177,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/scss/util.scss.html b/docs/documentation/scss/util.scss.html
index 5c722cd..6393304 100644
--- a/docs/documentation/scss/util.scss.html
+++ b/docs/documentation/scss/util.scss.html
@@ -269,7 +269,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints.html b/docs/documentation/stylus/Breakpoints.html
index c05557e..9058fa2 100644
--- a/docs/documentation/stylus/Breakpoints.html
+++ b/docs/documentation/stylus/Breakpoints.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html b/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html
index 94a7296..51ba5d1 100644
--- a/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html
+++ b/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html
@@ -366,7 +366,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html b/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html
index bdf8ec7..bf2acf6 100644
--- a/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html
+++ b/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html
@@ -339,7 +339,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_breakpoint-value.html b/docs/documentation/stylus/Breakpoints_breakpoint-value.html
index 582538c..8216862 100644
--- a/docs/documentation/stylus/Breakpoints_breakpoint-value.html
+++ b/docs/documentation/stylus/Breakpoints_breakpoint-value.html
@@ -336,7 +336,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_breakpoint.html b/docs/documentation/stylus/Breakpoints_breakpoint.html
index c94a738..199fb87 100644
--- a/docs/documentation/stylus/Breakpoints_breakpoint.html
+++ b/docs/documentation/stylus/Breakpoints_breakpoint.html
@@ -281,7 +281,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html b/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html
index cf199e0..8a5d600 100644
--- a/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html
+++ b/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html
@@ -341,7 +341,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html b/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html
index db9a0b0..ac9088a 100644
--- a/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html
+++ b/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html b/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html
index b7b490e..9ac4ead 100644
--- a/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html
+++ b/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html
@@ -242,7 +242,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html b/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html
index 949ef74..d1aeedb 100644
--- a/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html
+++ b/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html
@@ -282,7 +282,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html
index cbda71a..319df4f 100644
--- a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html
+++ b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html
@@ -358,7 +358,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html
index ae22b63..c6a986f 100644
--- a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html
+++ b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html
@@ -330,7 +330,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html
index fda156b..544f555 100644
--- a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html
+++ b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html
@@ -214,7 +214,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html b/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html
index 888d37d..7106a53 100644
--- a/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html
+++ b/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html
@@ -220,7 +220,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html b/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html
index 8497a4d..29911cb 100644
--- a/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html
+++ b/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html
@@ -283,7 +283,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Content.html b/docs/documentation/stylus/Content.html
index 2633305..bc02238 100644
--- a/docs/documentation/stylus/Content.html
+++ b/docs/documentation/stylus/Content.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Content_base-font-size-value.html b/docs/documentation/stylus/Content_base-font-size-value.html
index 655e5c2..50596f0 100644
--- a/docs/documentation/stylus/Content_base-font-size-value.html
+++ b/docs/documentation/stylus/Content_base-font-size-value.html
@@ -233,7 +233,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Content_content-holder.html b/docs/documentation/stylus/Content_content-holder.html
index 13dc8df..7aec126 100644
--- a/docs/documentation/stylus/Content_content-holder.html
+++ b/docs/documentation/stylus/Content_content-holder.html
@@ -325,7 +325,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Content_content-padding-value.html b/docs/documentation/stylus/Content_content-padding-value.html
index 41c13dc..04bec00 100644
--- a/docs/documentation/stylus/Content_content-padding-value.html
+++ b/docs/documentation/stylus/Content_content-padding-value.html
@@ -315,7 +315,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Content_content-width-value.html b/docs/documentation/stylus/Content_content-width-value.html
index d7cb291..fd55188 100644
--- a/docs/documentation/stylus/Content_content-width-value.html
+++ b/docs/documentation/stylus/Content_content-width-value.html
@@ -346,7 +346,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Grid.html b/docs/documentation/stylus/Grid.html
index 3ca9343..d49a099 100644
--- a/docs/documentation/stylus/Grid.html
+++ b/docs/documentation/stylus/Grid.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Grid_grid-container.html b/docs/documentation/stylus/Grid_grid-container.html
index 7cae5ca..c459a0c 100644
--- a/docs/documentation/stylus/Grid_grid-container.html
+++ b/docs/documentation/stylus/Grid_grid-container.html
@@ -219,7 +219,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Grid_grid-item-align.html b/docs/documentation/stylus/Grid_grid-item-align.html
index 1f25889..cb04614 100644
--- a/docs/documentation/stylus/Grid_grid-item-align.html
+++ b/docs/documentation/stylus/Grid_grid-item-align.html
@@ -328,7 +328,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Grid_grid-item.html b/docs/documentation/stylus/Grid_grid-item.html
index 8962e11..44a7879 100644
--- a/docs/documentation/stylus/Grid_grid-item.html
+++ b/docs/documentation/stylus/Grid_grid-item.html
@@ -506,7 +506,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Grid_gutter-value.html b/docs/documentation/stylus/Grid_gutter-value.html
index d9adae3..534fcd3 100644
--- a/docs/documentation/stylus/Grid_gutter-value.html
+++ b/docs/documentation/stylus/Grid_gutter-value.html
@@ -106,7 +106,7 @@ <h3 class="subsection-title">Methods</h3>
 
     
 
-    <h4 class="name" id="gutter-value"><span class="type-signature"></span>gutter-value<span class="signature">($factor<span class="signature-attributes">opt</span>, $add<span class="signature-attributes">opt</span>, $direction<span class="signature-attributes">opt</span>, $breakpoint<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Number}</span></h4>
+    <h4 class="name" id="gutter-value"><span class="type-signature"></span>gutter-value<span class="signature">($direction<span class="signature-attributes">opt</span>, $breakpoint<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Number}</span></h4>
 
     
 
@@ -155,84 +155,6 @@ <h5>Parameters:</h5>
     <tbody>
     
 
-        <tr>
-            
-                <td class="name"><code>$factor</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Number</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
-
-            
-                <td class="default">
-                
-                    1.0
-                
-                </td>
-            
-
-            <td class="description last"><p>factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example</p></td>
-        </tr>
-
-    
-
-        <tr>
-            
-                <td class="name"><code>$add</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Number</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
-
-            
-                <td class="default">
-                
-                    0
-                
-                </td>
-            
-
-            <td class="description last"><p>value to add to the finally evaluated gutter value, may also be negative to subtract</p></td>
-        </tr>
-
-    
-
         <tr>
             
                 <td class="name"><code>$direction</code></td>
@@ -409,7 +331,7 @@ <h5>Returns:</h5>
     <h5>Example</h5>
     
     <pre class="prettyprint"><code>+breakpoint(medium)
-  padding-left gutter-value(0.5)
+  padding-left gutter-value() * 0.5
 margin-top gutter-value($direction:'vertical', $breakpoint:'small')</code></pre>
 
 
@@ -436,7 +358,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Spacing.html b/docs/documentation/stylus/Spacing.html
index c788b0e..43f15b4 100644
--- a/docs/documentation/stylus/Spacing.html
+++ b/docs/documentation/stylus/Spacing.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Spacing_spacing-based-attribute.html b/docs/documentation/stylus/Spacing_spacing-based-attribute.html
index 1edf6cf..1aeda62 100644
--- a/docs/documentation/stylus/Spacing_spacing-based-attribute.html
+++ b/docs/documentation/stylus/Spacing_spacing-based-attribute.html
@@ -370,7 +370,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Spacing_spacing-based-attributes.html b/docs/documentation/stylus/Spacing_spacing-based-attributes.html
index 6bb7e6c..2ebce8e 100644
--- a/docs/documentation/stylus/Spacing_spacing-based-attributes.html
+++ b/docs/documentation/stylus/Spacing_spacing-based-attributes.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Spacing_spacing-value.html b/docs/documentation/stylus/Spacing_spacing-value.html
index c966d2b..da0ce42 100644
--- a/docs/documentation/stylus/Spacing_spacing-value.html
+++ b/docs/documentation/stylus/Spacing_spacing-value.html
@@ -357,7 +357,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util.html b/docs/documentation/stylus/Util.html
index feaf390..9ad4853 100644
--- a/docs/documentation/stylus/Util.html
+++ b/docs/documentation/stylus/Util.html
@@ -119,7 +119,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util_hash-get-deep.html b/docs/documentation/stylus/Util_hash-get-deep.html
index 6b271f7..5e127bf 100644
--- a/docs/documentation/stylus/Util_hash-get-deep.html
+++ b/docs/documentation/stylus/Util_hash-get-deep.html
@@ -311,7 +311,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util_hash-next.html b/docs/documentation/stylus/Util_hash-next.html
index 533f511..7efc0a4 100644
--- a/docs/documentation/stylus/Util_hash-next.html
+++ b/docs/documentation/stylus/Util_hash-next.html
@@ -310,7 +310,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util_str-join.html b/docs/documentation/stylus/Util_str-join.html
index cf849c2..6821de3 100644
--- a/docs/documentation/stylus/Util_str-join.html
+++ b/docs/documentation/stylus/Util_str-join.html
@@ -308,7 +308,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util_strip-unit.html b/docs/documentation/stylus/Util_strip-unit.html
index a9b5e18..ef8264c 100644
--- a/docs/documentation/stylus/Util_strip-unit.html
+++ b/docs/documentation/stylus/Util_strip-unit.html
@@ -282,7 +282,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util_to-em.html b/docs/documentation/stylus/Util_to-em.html
index 48bfa0f..82cb063 100644
--- a/docs/documentation/stylus/Util_to-em.html
+++ b/docs/documentation/stylus/Util_to-em.html
@@ -314,7 +314,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util_to-rem.html b/docs/documentation/stylus/Util_to-rem.html
index d4ddd8d..9ef5ffc 100644
--- a/docs/documentation/stylus/Util_to-rem.html
+++ b/docs/documentation/stylus/Util_to-rem.html
@@ -348,7 +348,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/Util_to-str.html b/docs/documentation/stylus/Util_to-str.html
index a68e4e6..a009c24 100644
--- a/docs/documentation/stylus/Util_to-str.html
+++ b/docs/documentation/stylus/Util_to-str.html
@@ -305,7 +305,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/breakpoints.styl.html b/docs/documentation/stylus/breakpoints.styl.html
index f45f825..fffab4a 100644
--- a/docs/documentation/stylus/breakpoints.styl.html
+++ b/docs/documentation/stylus/breakpoints.styl.html
@@ -581,7 +581,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/content.styl.html b/docs/documentation/stylus/content.styl.html
index 703229c..8011f47 100644
--- a/docs/documentation/stylus/content.styl.html
+++ b/docs/documentation/stylus/content.styl.html
@@ -195,7 +195,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/grid.styl.html b/docs/documentation/stylus/grid.styl.html
index 96e4d36..d5bd7ce 100644
--- a/docs/documentation/stylus/grid.styl.html
+++ b/docs/documentation/stylus/grid.styl.html
@@ -200,8 +200,6 @@ <h1 class="page-title">Source: grid.styl</h1>
  * @name gutter-value
  * @alias gutter-value
  *
- * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example
- * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract
  * @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
  * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
  * @returns {Number} the determined gutter value with applied factor and/or addition
@@ -209,15 +207,10 @@ <h1 class="page-title">Source: grid.styl</h1>
  *
  * @example
  * +breakpoint(medium)
- *   padding-left gutter-value(0.5)
+ *   padding-left gutter-value() * 0.5
  * margin-top gutter-value($direction:'vertical', $breakpoint:'small')
  */
-gutter-value(
-	$factor=1.0,
-	$add=0,
-	$direction='horizontal',
-	$breakpoint='auto'
-)
+gutter-value($direction='horizontal', $breakpoint='auto')
 	$direction = to-str($direction)
 	$breakpoint = to-str($breakpoint)
 	$gutter = hash-get-deep($jig---grid-config, 'gutters', $direction)
@@ -232,7 +225,7 @@ <h1 class="page-title">Source: grid.styl</h1>
 	if $res == null
 		error('jig:gutter-value | could not resolve gutter, check direction and/or breakpoint')
 
-	return ($res * $factor) + $add
+	return $res
 </code></pre>
         </article>
     </section>
@@ -249,7 +242,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/index.html b/docs/documentation/stylus/index.html
index c6e0674..aca5ef2 100644
--- a/docs/documentation/stylus/index.html
+++ b/docs/documentation/stylus/index.html
@@ -317,7 +317,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/spacing.styl.html b/docs/documentation/stylus/spacing.styl.html
index f8dab51..041eb07 100644
--- a/docs/documentation/stylus/spacing.styl.html
+++ b/docs/documentation/stylus/spacing.styl.html
@@ -162,7 +162,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/documentation/stylus/util.styl.html b/docs/documentation/stylus/util.styl.html
index a222c1a..f84d323 100644
--- a/docs/documentation/stylus/util.styl.html
+++ b/docs/documentation/stylus/util.styl.html
@@ -290,7 +290,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li class="namespac
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Wed Jul 24 2024 15:14:45 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Fri Jul 26 2024 16:09:58 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/examples/css/scss-legacy.css.map b/docs/examples/css/scss-legacy.css.map
index f92e957..0eb9977 100644
--- a/docs/examples/css/scss-legacy.css.map
+++ b/docs/examples/css/scss-legacy.css.map
@@ -1 +1 @@
-{"version":3,"file":"scss-legacy.css","sources":["main.scss","../../../source/lib/normalize/index.css","defines.scss","../../../source/scss-legacy/jig/_index.scss","../../../source/scss-legacy/jig/globals.scss","../../../source/scss-legacy/jig/util.scss","../../../source/scss-legacy/jig/breakpoints.scss","../../../source/scss-legacy/jig/grid.scss","../../../source/scss-legacy/jig/content.scss","../../../source/scss-legacy/jig/spacing.scss","examples.scss"],"sourcesContent":["@import 'normalize/index';\n@import 'defines';\n@import 'jig/_index';\n@import 'examples';\n","/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$JIG_CONFIG: (\n\t'breakpoints' : (\n\t\t'xsmall' : 0,\n\t\t'medium' : 768px,\n\t\t'large' : 1280px,\n\t\t'xlarge' : 1600px\n\t),\n\t'print-breakpoint' : 'large',\n\t'grid' : (\n\t\t'columns' : 12,\n\t\t'gutters' : (\n\t\t\t'horizontal' : (\n\t\t\t\t'xsmall' : 10px,\n\t\t\t\t'medium' : 20px,\n\t\t\t\t'large' : 40px\n\t\t\t),\n\t\t\t'vertical' : 20px\n\t\t)\n\t),\n\t'spacing' : (\n\t\t'xxs' : (\n\t\t\t'xsmall' : 10px\n\t\t),\n\t\t'xs' : (\n\t\t\t'xsmall' : 10px,\n\t\t\t'small' : 20px\n\t\t),\n\t\t'sm' : (\n\t\t\t'xsmall' : 20px,\n\t\t\t'large' : 30px\n\t\t),\n\t\t'md' : (\n\t\t\t'xsmall' : 30px,\n\t\t\t'xlarge' : 40px\n\t\t),\n\t\t'l' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 60px\n\t\t),\n\t\t'xl' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 50px,\n\t\t\t'large' : 80px\n\t\t),\n\t\t'xxl' : (\n\t\t\t'xsmall': 40px,\n\t\t\t'medium': 80px,\n\t\t\t'large' : 120px\n\t\t)\n\t),\n\t'content' : (\n\t\t'padding' : (\n\t\t\t'xsmall' : 15px,\n\t\t\t'small' : 35px,\n\t\t\t'medium' : 50px,\n\t\t\t'xlarge' : 60px\n\t\t),\n\t\t'min-width' : 360px - (2 * 15px),\n\t\t'max-width' : 1200px - (2 * 60px),\n\t\t'base-font-size' : 12px\n\t)\n);\n\n$GRID_CONTAINER_BACKGROUNDCOLOR: (\n\t'xsmall' : #aaa,\n\t'medium' : #ccc,\n\t'large' : #eee\n);\n\n$GRID_CONTAINER_BACKGROUNDIMAGE: (\n\t'xsmall' : url('../files/img/background-small.jpg'),\n\t'medium' : url('../files/img/background-medium.jpg'),\n\t'large' : url('../files/img/background-large.jpg')\n);\n","@import 'globals';\n@import 'util';\n@import 'breakpoints';\n@import 'grid';\n@import 'content';\n@import 'spacing';\n","$JIG_CONFIG: null !default;\n$jig---config: null !default;\n@if (type-of($jig---config) != 'map') and (type-of($JIG_CONFIG) == 'map') {\n\t$jig---config: $JIG_CONFIG;\n}\n\n@if type-of($jig---config) != 'map' {\n\t@error 'jig:globals | jig config is undefined or not a map'\n}\n\n\n\n$jig---breakpoint-config: map-get($jig---config, 'breakpoints') !default;\n$jig---breakpoint-config: (\n\t'small' : 0,\n\t'medium' : 768px,\n\t'large' : 1280px\n) !default;\n\n\n\n$jig---grid-config: map-get($jig---config, 'grid') !default;\n$jig---grid-config: (\n\t'columns' : 12,\n\t'gutters' : (\n\t\t'horizontal' : (\n\t\t\t'small' : 20px,\n\t\t\t'medium' : 30px,\n\t\t\t'large' : 40px\n\t\t),\n\t\t'vertical' : 20px\n\t)\n) !default;\n\n\n\n$jig---spacing-config: map-get($jig---config, 'spacing') !default;\n$jig---spacing-config: (\n\t'sm' : (\n\t\t'small' : 1rem,\n\t\t'medium' : 2rem,\n\t\t'large' : 3rem\n\t),\n\t'md' : (\n\t\t'small' : 2rem,\n\t\t'medium' : 3rem,\n\t\t'large' : 5rem\n\t),\n\t'l' : (\n\t\t'small' : 3rem,\n\t\t'medium' : 5rem,\n\t\t'large' : 8rem\n\t)\n) !default;\n\n\n\n$jig---content-config: map-get($jig---config, 'content') !default;\n$jig---content-config: (\n\t'padding' : (\n\t\t'small' : 20px,\n\t\t'medium' : 40px,\n\t\t'large' : 80px\n\t),\n\t'max-width' : 1600px,\n\t'base-font-size' : 16px\n) !default;\n\n\n\n$jig---base-font-size: map-get($jig---content-config, 'base-font-size') !default;\n$jig---base-font-size: 16px !default;\n\n\n\n$jig---print-breakpoint: map-get($jig---config, 'print-breakpoint') !default;\n$jig---print-breakpoint: 'large' !default;\n","/**\n * @namespace Util\n */\n\n\n\n/**\n * @namespace Util:map-get-deep\n */\n\n/**\n * Retrieve a value deeply nested in a map, defined by a path of keys.\n *\n * @memberof Util:map-get-deep\n * @function\n * @name map-get-deep\n * @alias map-get-deep\n *\n * @param {Map} $map - the map to search in\n * @param {String|List<String>} $keys - the keys to traverse down in the map\n * @returns {*|null} the value at the defined key path or null if not defined\n *\n * @example\n * map-get-deep($foo-map, 'level1', 'level2')\n *   => value of $foo-map.level1.level2\n */\n@function map-get-deep($map, $keys...){\n\t@each $key in $keys {\n\t\t@if map-has-key($map, $key) {\n\t\t\t$map: map-get($map, $key);\n\t\t} @else {\n\t\t\t@return null;\n\t\t}\n\t}\n\n\t@return $map;\n}\n\n\n\n/**\n * @namespace Util:map-next\n */\n\n/**\n * Retrieves the value of the adjacent, next key in a map, if one exists.\n * The idea is, to retrieve the next key, based on a current one, to go one step further,\n * which is helpful for things like escalating to the next breakpoint for example.\n *\n * @memberof Util:map-next\n * @function\n * @name map-next\n * @alias map-next\n *\n * @param {Map} $map - the map to use\n * @param {String} $key - the current key, from which we want to go to the next\n * @returns {*|null} the value of the next key or null if there is none\n *\n * @example\n * map-next($foo-map, 'small')\n *   => value of $foo-map.medium\n */\n@function map-next($map, $key){\n\t$keys: map-keys($map);\n\n\t$next-index: 0;\n\t@if map-has-key($map, $key) {\n\t\t$next-index: index($keys, $key) + 1;\n\t}\n\n\t@if ($next-index == 0) or ($next-index > length($map)) {\n\t\t@return null;\n\t} @else {\n\t\t@return map-get($map, nth($keys, $next-index));\n\t}\n}\n\n\n\n/**\n * @namespace Util:strip-unit\n */\n\n/**\n * Removes the unit from a value, turning it into a unit-less value.\n *\n * @memberof Util:strip-unit\n * @function\n * @name strip-unit\n * @alias strip-unit\n *\n * @param {Number} $number - the number to strip the unit from\n * @returns {Number} the unit-less number\n *\n * @example\n * strip-unit(16px)\n *   => 16\n */\n@function strip-unit($number){\n\t@return $number / ($number * 0 + 1);\n}\n\n\n\n/**\n * @namespace Util:to-rem\n */\n\n/**\n * Convert one or more px values to (a) rem value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-rem\n * @function\n * @name to-rem\n * @alias to-rem\n *\n * @param {Number|List<Number>} $values - the value(s) to convert, usually px values, if a value is em, it will be treated as rem\n * @param {?Number} [$base=$jig---base-font-size-px] - the base size to convert against\n * @returns {Number|List<Number>} the converted value(s)\n *\n * @example\n * to-rem(32px)\n *   => 2rem\n * to-rem((10px, 20px, 40px), 20px)\n *   => [0.5rem, 1rem, 2rem]\n */\n@function to-rem($values, $base:$jig---base-font-size){\n\t@if unit($base) == '%' {\n\t\t$base: (strip-unit($base) / 100) * $jig---base-font-size;\n\t}\n\n\t@if unit($base) == 'rem' {\n\t\t$base: strip-unit($base) * $jig---base-font-size;\n\t}\n\n\t@if type-of($values) != 'list' {\n\t\t$values: [$values];\n\t}\n\n\t$rem-values: [];\n\t@each $value in $values {\n\t\t$rem-value: 0;\n\n\t\t@if unit($value) == 'em' {\n\t\t\t$rem-value: strip-unit($value);\n\t\t} @else {\n\t\t\t$rem-value: strip-unit($value) / strip-unit($base);\n\t\t}\n\n\t\t@if $rem-value != 0 {\n\t\t\t$rem-value: $rem-value * 1rem;\n\t\t}\n\n\t\t$rem-values: append($rem-values, $rem-value);\n\t}\n\n\t@if length($rem-values) == 1 {\n\t\t@return nth($rem-values, 1);\n\t} @else {\n\t\t@return $rem-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:to-em\n */\n\n/**\n * Convert one or more px values to (a) em value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-em\n * @function\n * @name to-em\n * @alias to-em\n *\n * @param {Number|List<Number>} $values - the value(s) to convert, usually px values, if a value is em, it will not be changed\n * @param {Number} $base - the base size to convert against\n * @returns {Number|List<Number>} the converted value(s)\n *\n * @example\n * to-em(32px, 16px)\n *   => 2em\n * to-em((10px, 20px, 40px), 20px)\n *   => [0.5em, 1em, 2em]\n */\n@function to-em($values, $base){\n\t$rem-values: to-rem($values, $base);\n\t@if type-of($rem-values) != 'list' {\n\t\t$rem-values: [$rem-values];\n\t}\n\n\t$em-values: [];\n\t@each $rem-value in $rem-values {\n\t\t$em-value: 0;\n\n\t\t@if $rem-value != 0 {\n\t\t\t$em-value: strip-unit($rem-value) * 1em;\n\t\t}\n\n\t\t$em-values: append($em-values, $em-value);\n\t}\n\n\t@if length($em-values) == 1 {\n\t\t@return nth($em-values, 1);\n\t} @else {\n\t\t@return $em-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:str-join\n */\n\n/**\n * Join/concatenate two or more strings with an optional glue string.\n *\n * @memberof Util:str-join\n * @function\n * @name str-join\n * @alias str-join\n *\n * @param {String|List<String>} strings - the strings to join\n * @param {String} glue - the string to put between joined strings\n * @returns {String} the joined string\n *\n * @example\n * str-join(['fo', 'ar'], 'ob')\n *   => 'foobar'\n */\n@function str-join($strings, $glue:''){\n\t$strings: join([], $strings);\n\n\t$res: '';\n\t@each $string in $strings {\n\t\t@if $string {\n\t\t\t$res: $res+$string+$glue;\n\t\t}\n\t}\n\n\t@if ($res != '') and ($glue != '') {\n\t\t@return str-slice($res, 1, str-length($glue) * -1);\n\t} @else {\n\t\t@return $res;\n\t}\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n *   => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n *   ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n *   => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map-has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n *   => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n *   => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List<String>} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n *   => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n *   => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n *   => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n *   => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n *   => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (length($breakpoint-definition) > 0), nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (length($breakpoint-definition) > 1), nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on <html>\n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map-get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List<String>|List<Literal>|List<List<String>>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n *   ...\n * }\n * \\@include breakpoint(small down, large up){\n *   ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(length($breakpoint-definition) > 0, nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(length($breakpoint-definition) > 1, nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map-keys($jig---breakpoint-config), nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: index(map-keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n *   (\n *     'small' : 10px,\n *     'medium' : 20px\n *   ),\n *   large\n * )\n *   => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map-get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map-get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : (\n *       'small' : 1,\n *       'large' : 1.25\n *     ),\n *     'margin-top' : (\n *       'small' : 10px,\n *       'medium' : 20px\n *     )\n *   ),\n *   2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map-get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map-merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map-merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (length(map-keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n *   'line-height',\n *   (\n *     'small' : 1,\n *     'large' : 1.25\n *   ),\n *   1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : 1.25\n *     'margin-top' : 20px\n *   ),\n *   2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n *   font-size: 12xp;\n *   margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map-get($jig---grid-config, 'columns'), 1fr);\n\t@include attributes-for-breakpoints((\n\t\t'grid-column-gap' : map-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map-get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: gutter-value(0.5);\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map-get-deep($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if type-of($gutter) == 'map' {\n\t\t\t$res: breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return ($res * $factor) + $add;\n}\n","/**\n * @namespace Content\n */\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * \\@include content-holder();\n */\n@mixin content-holder($padded:true, $centered:false){\n\t$breakpoint-names: map-keys($jig---breakpoint-config);\n\t$smallest-breakpoint: nth($breakpoint-names, 1);\n\t$largest-breakpoint: nth($breakpoint-names, -1);\n\n\t$min-width: content-width-value('min');\n\t$max-width: content-width-value('max');\n\n\t@if $min-width != null {\n\t\tmin-width: $min-width + (2 * content-padding-value($smallest-breakpoint));\n\t}\n\t@if $max-width != null {\n\t\tmax-width: $max-width + (2 * content-padding-value($largest-breakpoint));\n\t}\n\n\t@if $centered {\n\t\tmargin-right: auto;\n\t\tmargin-left: auto;\n\t}\n\n\t@if $padded {\n\t\t$content-padding: map-get($jig---content-config, 'padding');\n\n\t\t@if $content-padding != null {\n\t\t\t@include attributes-for-breakpoints((\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t));\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: content-padding-value();\n * }\n * margin-right: content-padding-value($breakpoint:'small');\n */\n@function content-padding-value($breakpoint:'auto'){\n\t$padding: map-get($jig---content-config, 'padding');\n\t$res: null;\n\n\t@if $padding != null {\n\t\t@if type-of($padding) == 'map' {\n\t\t\t$res: breakpoint-value($padding, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $padding;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';\n\t}\n\n\t@return $res;\n}\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width: content-width-value();\n * min-width: content-width-value('min', 0);\n */\n@function content-width-value($min-max:'max', $default:null){\n\t$width: map-get($jig---content-config, 'max-width');\n\t@if $min-max == 'min' {\n\t\t$width: map-get($jig---content-config, 'min-width');\n\t}\n\n\t@if $width == null {\n\t\t$width: $default;\n\t}\n\n\t@return $width;\n}\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size: base-font-size-value();\n */\n@function base-font-size-value(){\n\t@return $jig---base-font-size;\n}\n","/**\n * @namespace Spacing\n */\n\n\n\n/**\n * @namespace Spacing:spacing-value\n */\n\n/**\n * Return a spacing value defined in the jig config, based on a breakpoint.\n *\n * @memberof Spacing:spacing-value\n * @function\n * @name spacing-value\n * @alias spacing-value\n *\n * @param {String} $size - on of the named sized defined in jig's spacing config (e.g. sm, l, xxl, ...)\n * @param {Literal|String} [$breakpoint='auto'] - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {Number|null} the spacing value or null if nothing was found\n * @throws error if size is unknown\n *\n * @example\n * spacing-value(sm)\n *   => 12px\n * spacing-value(md, large)\n *   => 5rem\n */\n@function spacing-value($size, $breakpoint:'auto'){\n\t$spacing: map-get($jig---spacing-config, $size);\n\n\t@if $spacing == null {\n\t\t@error 'jig:spacing-value | unknown size \"#{$size}\"';\n\t}\n\n\t@if type-of($spacing) == 'map' {\n\t\t@return breakpoint-value($spacing, $breakpoint);\n\t} @else {\n\t\t@return $spacing;\n\t}\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attributes\n */\n\n/**\n * Define (an) attribute(s) based on breakpoint-dependent spacing values.\n * This will render the given attributes with the corresponding spacing values for each defined breakpoint\n * in compiled media queries. Since this will result in many media queries being rendered, make sure before,\n * that there aren't many other media queries also needed to complete your definition. In that case, it might be\n * better and more performant to rather write the queries manually and get the spacing values via `[]` or\n * `spacing-value`.\n *\n * @memberof Spacing:spacing-based-attributes\n * @function\n * @name spacing-based-attributes\n * @alias spacing-based-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are spacing sizes\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attribute\n *\n * @example\n * \\@include spacing-based-attributes(\n *   (\n *     'padding-top' : 'sm',\n *     'padding-right' : 'md',\n *     'padding-bottom' : 'sm'\n *     'padding-left' : 'md'\n *     'margin-top' : 'l',\n *     'margin-bottom' : 'xl'\n *   ),\n *   2.0\n * );\n */\n@mixin spacing-based-attributes($attributes, $factor:null){\n\t$spacing-attributes: ();\n\t@each $attribute-name, $attribute-size in $attributes {\n\t\t$size-definition: map-get($jig---spacing-config, $attribute-size);\n\n\t\t@if $size-definition == null {\n\t\t\t@error 'jig:spacing-based-attributes | unknown size \"#{$size-definition}\"';\n\t\t}\n\n\t\t$spacing-attributes: map-merge($spacing-attributes, ($attribute-name : $size-definition));\n\t}\n\n\t@include attributes-for-breakpoints($spacing-attributes, $factor);\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attribute\n */\n\n/**\n * Define an attribute based on breakpoint-dependent spacing values.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Spacing:spacing-based-attribute\n * @function\n * @name spacing-based-attribute\n * @alias spacing-based-attribute\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {String} $size - on of the named sized defined in jig's spacing config (sm, l, xxl, ...)\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attributes\n *\n * @example\n * \\@include spacing-based-attribute(margin-top, 'xl', 1.0);\n */\n@mixin spacing-based-attribute($attribute, $size, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $size));\n\t@include spacing-based-attributes($attributes, $factor);\n}\n","%example-grid {\n\t@include grid-container();\n\n\tposition: relative;\n\n\tpadding: gutter-value();\n\tborder: 3px solid red;\n\n\t&:before {\n\t\tcontent: '';\n\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\t@include attributes-for-breakpoints((\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t));\n\n\t\tfilter: saturate(150%) brightness(38%);\n\t}\n\n\t@include breakpoint(medium){\n\t\tpadding: gutter-value();\n\t}\n\n\t@include breakpoint(large){\n\t\tpadding: gutter-value($breakpoint:large);\n\t}\n\n\n\n\t> div,\n\t> div > div {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\tposition: relative;\n\n\t\tborder: 3px solid dodgerblue;\n\n\t\tcolor: white;\n\t\tfont-size: base-font-size-value() * 1.5;\n\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\tbackground-color: dodgerblue;\n\n\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t&:nth-of-type(1){\n\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t}\n\n\t\t&:nth-of-type(2){\n\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t}\n\n\t\t&:nth-of-type(3){\n\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t}\n\n\t\t&:nth-of-type(4){\n\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t}\n\n\t\t&:nth-of-type(5){\n\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t}\n\t}\n\n\n\n\t&:hover {\n\t\t&:before,\n\t\t> div,\n\t\t> div > div {\n\t\t\tborder-color: lightskyblue;\n\n\t\t\tbackground-image: none !important;\n\n\t\t\tfilter: none !important;\n\t\t}\n\n\t\t> div > div {\n\t\t\tfilter: invert(100%) !important;\n\t\t}\n\t}\n}\n\n\n\n#basic-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 100px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium up){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium down){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\t\theight: 25vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 12.5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#advanced-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\t\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\t\theight: gutter-value(2.5, $direction:'vertical');\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\n\t\t\t\t&:first-of-type {\n\t\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\t\theight: auto;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(xsmall only){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: gutter-value(3.0);\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\t\twidth: 200%;\n\t\t\t\t\t\theight: 55px;\n\n\t\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\t\tbackground-color: red;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#real-world-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 1;\n\n\t\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\t\torder: 3;\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(3);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item();\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include grid-container();\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\tmargin-top: gutter-value(-1, $direction:vertical);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\t\torder: 4;\n\n\t\t\t\t\tmargin-top: gutter-value(-0.5, $direction:'vertical');\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 5;\n\n\t\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t));\n\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\tmargin-top: gutter-value(1, $direction:vertical);\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(2, $direction:vertical);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(2.5, $direction:vertical);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"scss-legacy.css","sources":["main.scss","../../../source/lib/normalize/index.css","defines.scss","../../../source/scss-legacy/jig/_index.scss","../../../source/scss-legacy/jig/globals.scss","../../../source/scss-legacy/jig/util.scss","../../../source/scss-legacy/jig/breakpoints.scss","../../../source/scss-legacy/jig/grid.scss","../../../source/scss-legacy/jig/content.scss","../../../source/scss-legacy/jig/spacing.scss","examples.scss"],"sourcesContent":["@import 'normalize/index';\n@import 'defines';\n@import 'jig/_index';\n@import 'examples';\n","/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$JIG_CONFIG: (\n\t'breakpoints' : (\n\t\t'xsmall' : 0,\n\t\t'medium' : 768px,\n\t\t'large' : 1280px,\n\t\t'xlarge' : 1600px\n\t),\n\t'print-breakpoint' : 'large',\n\t'grid' : (\n\t\t'columns' : 12,\n\t\t'gutters' : (\n\t\t\t'horizontal' : (\n\t\t\t\t'xsmall' : 10px,\n\t\t\t\t'medium' : 20px,\n\t\t\t\t'large' : 40px\n\t\t\t),\n\t\t\t'vertical' : 20px\n\t\t)\n\t),\n\t'spacing' : (\n\t\t'xxs' : (\n\t\t\t'xsmall' : 10px\n\t\t),\n\t\t'xs' : (\n\t\t\t'xsmall' : 10px,\n\t\t\t'small' : 20px\n\t\t),\n\t\t'sm' : (\n\t\t\t'xsmall' : 20px,\n\t\t\t'large' : 30px\n\t\t),\n\t\t'md' : (\n\t\t\t'xsmall' : 30px,\n\t\t\t'xlarge' : 40px\n\t\t),\n\t\t'l' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 60px\n\t\t),\n\t\t'xl' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 50px,\n\t\t\t'large' : 80px\n\t\t),\n\t\t'xxl' : (\n\t\t\t'xsmall': 40px,\n\t\t\t'medium': 80px,\n\t\t\t'large' : 120px\n\t\t)\n\t),\n\t'content' : (\n\t\t'padding' : (\n\t\t\t'xsmall' : 15px,\n\t\t\t'small' : 35px,\n\t\t\t'medium' : 50px,\n\t\t\t'xlarge' : 60px\n\t\t),\n\t\t'min-width' : 360px - (2 * 15px),\n\t\t'max-width' : 1200px - (2 * 60px),\n\t\t'base-font-size' : 12px\n\t)\n);\n\n$GRID_CONTAINER_BACKGROUNDCOLOR: (\n\t'xsmall' : #aaa,\n\t'medium' : #ccc,\n\t'large' : #eee\n);\n\n$GRID_CONTAINER_BACKGROUNDIMAGE: (\n\t'xsmall' : url('../files/img/background-small.jpg'),\n\t'medium' : url('../files/img/background-medium.jpg'),\n\t'large' : url('../files/img/background-large.jpg')\n);\n","@import 'globals';\n@import 'util';\n@import 'breakpoints';\n@import 'grid';\n@import 'content';\n@import 'spacing';\n","$JIG_CONFIG: null !default;\n$jig---config: null !default;\n@if (type-of($jig---config) != 'map') and (type-of($JIG_CONFIG) == 'map') {\n\t$jig---config: $JIG_CONFIG;\n}\n\n@if type-of($jig---config) != 'map' {\n\t@error 'jig:globals | jig config is undefined or not a map'\n}\n\n\n\n$jig---breakpoint-config: map-get($jig---config, 'breakpoints') !default;\n$jig---breakpoint-config: (\n\t'small' : 0,\n\t'medium' : 768px,\n\t'large' : 1280px\n) !default;\n\n\n\n$jig---grid-config: map-get($jig---config, 'grid') !default;\n$jig---grid-config: (\n\t'columns' : 12,\n\t'gutters' : (\n\t\t'horizontal' : (\n\t\t\t'small' : 20px,\n\t\t\t'medium' : 30px,\n\t\t\t'large' : 40px\n\t\t),\n\t\t'vertical' : 20px\n\t)\n) !default;\n\n\n\n$jig---spacing-config: map-get($jig---config, 'spacing') !default;\n$jig---spacing-config: (\n\t'sm' : (\n\t\t'small' : 1rem,\n\t\t'medium' : 2rem,\n\t\t'large' : 3rem\n\t),\n\t'md' : (\n\t\t'small' : 2rem,\n\t\t'medium' : 3rem,\n\t\t'large' : 5rem\n\t),\n\t'l' : (\n\t\t'small' : 3rem,\n\t\t'medium' : 5rem,\n\t\t'large' : 8rem\n\t)\n) !default;\n\n\n\n$jig---content-config: map-get($jig---config, 'content') !default;\n$jig---content-config: (\n\t'padding' : (\n\t\t'small' : 20px,\n\t\t'medium' : 40px,\n\t\t'large' : 80px\n\t),\n\t'max-width' : 1600px,\n\t'base-font-size' : 16px\n) !default;\n\n\n\n$jig---base-font-size: map-get($jig---content-config, 'base-font-size') !default;\n$jig---base-font-size: 16px !default;\n\n\n\n$jig---print-breakpoint: map-get($jig---config, 'print-breakpoint') !default;\n$jig---print-breakpoint: 'large' !default;\n","/**\n * @namespace Util\n */\n\n\n\n/**\n * @namespace Util:map-get-deep\n */\n\n/**\n * Retrieve a value deeply nested in a map, defined by a path of keys.\n *\n * @memberof Util:map-get-deep\n * @function\n * @name map-get-deep\n * @alias map-get-deep\n *\n * @param {Map} $map - the map to search in\n * @param {String|List<String>} $keys - the keys to traverse down in the map\n * @returns {*|null} the value at the defined key path or null if not defined\n *\n * @example\n * map-get-deep($foo-map, 'level1', 'level2')\n *   => value of $foo-map.level1.level2\n */\n@function map-get-deep($map, $keys...){\n\t@each $key in $keys {\n\t\t@if map-has-key($map, $key) {\n\t\t\t$map: map-get($map, $key);\n\t\t} @else {\n\t\t\t@return null;\n\t\t}\n\t}\n\n\t@return $map;\n}\n\n\n\n/**\n * @namespace Util:map-next\n */\n\n/**\n * Retrieves the value of the adjacent, next key in a map, if one exists.\n * The idea is, to retrieve the next key, based on a current one, to go one step further,\n * which is helpful for things like escalating to the next breakpoint for example.\n *\n * @memberof Util:map-next\n * @function\n * @name map-next\n * @alias map-next\n *\n * @param {Map} $map - the map to use\n * @param {String} $key - the current key, from which we want to go to the next\n * @returns {*|null} the value of the next key or null if there is none\n *\n * @example\n * map-next($foo-map, 'small')\n *   => value of $foo-map.medium\n */\n@function map-next($map, $key){\n\t$keys: map-keys($map);\n\n\t$next-index: 0;\n\t@if map-has-key($map, $key) {\n\t\t$next-index: index($keys, $key) + 1;\n\t}\n\n\t@if ($next-index == 0) or ($next-index > length($map)) {\n\t\t@return null;\n\t} @else {\n\t\t@return map-get($map, nth($keys, $next-index));\n\t}\n}\n\n\n\n/**\n * @namespace Util:strip-unit\n */\n\n/**\n * Removes the unit from a value, turning it into a unit-less value.\n *\n * @memberof Util:strip-unit\n * @function\n * @name strip-unit\n * @alias strip-unit\n *\n * @param {Number} $number - the number to strip the unit from\n * @returns {Number} the unit-less number\n *\n * @example\n * strip-unit(16px)\n *   => 16\n */\n@function strip-unit($number){\n\t@return $number / ($number * 0 + 1);\n}\n\n\n\n/**\n * @namespace Util:to-rem\n */\n\n/**\n * Convert one or more px values to (a) rem value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-rem\n * @function\n * @name to-rem\n * @alias to-rem\n *\n * @param {Number|List<Number>} $values - the value(s) to convert, usually px values, if a value is em, it will be treated as rem\n * @param {?Number} [$base=$jig---base-font-size-px] - the base size to convert against\n * @returns {Number|List<Number>} the converted value(s)\n *\n * @example\n * to-rem(32px)\n *   => 2rem\n * to-rem((10px, 20px, 40px), 20px)\n *   => [0.5rem, 1rem, 2rem]\n */\n@function to-rem($values, $base:$jig---base-font-size){\n\t@if unit($base) == '%' {\n\t\t$base: (strip-unit($base) / 100) * $jig---base-font-size;\n\t}\n\n\t@if unit($base) == 'rem' {\n\t\t$base: strip-unit($base) * $jig---base-font-size;\n\t}\n\n\t@if type-of($values) != 'list' {\n\t\t$values: [$values];\n\t}\n\n\t$rem-values: [];\n\t@each $value in $values {\n\t\t$rem-value: 0;\n\n\t\t@if unit($value) == 'em' {\n\t\t\t$rem-value: strip-unit($value);\n\t\t} @else {\n\t\t\t$rem-value: strip-unit($value) / strip-unit($base);\n\t\t}\n\n\t\t@if $rem-value != 0 {\n\t\t\t$rem-value: $rem-value * 1rem;\n\t\t}\n\n\t\t$rem-values: append($rem-values, $rem-value);\n\t}\n\n\t@if length($rem-values) == 1 {\n\t\t@return nth($rem-values, 1);\n\t} @else {\n\t\t@return $rem-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:to-em\n */\n\n/**\n * Convert one or more px values to (a) em value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-em\n * @function\n * @name to-em\n * @alias to-em\n *\n * @param {Number|List<Number>} $values - the value(s) to convert, usually px values, if a value is em, it will not be changed\n * @param {Number} $base - the base size to convert against\n * @returns {Number|List<Number>} the converted value(s)\n *\n * @example\n * to-em(32px, 16px)\n *   => 2em\n * to-em((10px, 20px, 40px), 20px)\n *   => [0.5em, 1em, 2em]\n */\n@function to-em($values, $base){\n\t$rem-values: to-rem($values, $base);\n\t@if type-of($rem-values) != 'list' {\n\t\t$rem-values: [$rem-values];\n\t}\n\n\t$em-values: [];\n\t@each $rem-value in $rem-values {\n\t\t$em-value: 0;\n\n\t\t@if $rem-value != 0 {\n\t\t\t$em-value: strip-unit($rem-value) * 1em;\n\t\t}\n\n\t\t$em-values: append($em-values, $em-value);\n\t}\n\n\t@if length($em-values) == 1 {\n\t\t@return nth($em-values, 1);\n\t} @else {\n\t\t@return $em-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:str-join\n */\n\n/**\n * Join/concatenate two or more strings with an optional glue string.\n *\n * @memberof Util:str-join\n * @function\n * @name str-join\n * @alias str-join\n *\n * @param {String|List<String>} strings - the strings to join\n * @param {String} glue - the string to put between joined strings\n * @returns {String} the joined string\n *\n * @example\n * str-join(['fo', 'ar'], 'ob')\n *   => 'foobar'\n */\n@function str-join($strings, $glue:''){\n\t$strings: join([], $strings);\n\n\t$res: '';\n\t@each $string in $strings {\n\t\t@if $string {\n\t\t\t$res: $res+$string+$glue;\n\t\t}\n\t}\n\n\t@if ($res != '') and ($glue != '') {\n\t\t@return str-slice($res, 1, str-length($glue) * -1);\n\t} @else {\n\t\t@return $res;\n\t}\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n *   => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n *   ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n *   => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map-has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n *   => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n *   => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List<String>} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n *   => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n *   => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n *   => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n *   => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n *   => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (length($breakpoint-definition) > 0), nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (length($breakpoint-definition) > 1), nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on <html>\n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map-get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List<String>|List<Literal>|List<List<String>>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n *   ...\n * }\n * \\@include breakpoint(small down, large up){\n *   ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(length($breakpoint-definition) > 0, nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(length($breakpoint-definition) > 1, nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map-keys($jig---breakpoint-config), nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: index(map-keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n *   (\n *     'small' : 10px,\n *     'medium' : 20px\n *   ),\n *   large\n * )\n *   => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map-get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map-get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : (\n *       'small' : 1,\n *       'large' : 1.25\n *     ),\n *     'margin-top' : (\n *       'small' : 10px,\n *       'medium' : 20px\n *     )\n *   ),\n *   2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map-get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map-merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map-merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (length(map-keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n *   'line-height',\n *   (\n *     'small' : 1,\n *     'large' : 1.25\n *   ),\n *   1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : 1.25\n *     'margin-top' : 20px\n *   ),\n *   2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n *   font-size: 12xp;\n *   margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map-get($jig---grid-config, 'columns'), 1fr);\n\t@include attributes-for-breakpoints((\n\t\t'grid-column-gap' : map-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map-get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: gutter-value() * 0.5;\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map-get-deep($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if type-of($gutter) == 'map' {\n\t\t\t$res: breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return $res;\n}\n","/**\n * @namespace Content\n */\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * \\@include content-holder();\n */\n@mixin content-holder($padded:true, $centered:false){\n\t$breakpoint-names: map-keys($jig---breakpoint-config);\n\t$smallest-breakpoint: nth($breakpoint-names, 1);\n\t$largest-breakpoint: nth($breakpoint-names, -1);\n\n\t$min-width: content-width-value('min');\n\t$max-width: content-width-value('max');\n\n\t@if $min-width != null {\n\t\tmin-width: $min-width + (2 * content-padding-value($smallest-breakpoint));\n\t}\n\t@if $max-width != null {\n\t\tmax-width: $max-width + (2 * content-padding-value($largest-breakpoint));\n\t}\n\n\t@if $centered {\n\t\tmargin-right: auto;\n\t\tmargin-left: auto;\n\t}\n\n\t@if $padded {\n\t\t$content-padding: map-get($jig---content-config, 'padding');\n\n\t\t@if $content-padding != null {\n\t\t\t@include attributes-for-breakpoints((\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t));\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: content-padding-value();\n * }\n * margin-right: content-padding-value($breakpoint:'small');\n */\n@function content-padding-value($breakpoint:'auto'){\n\t$padding: map-get($jig---content-config, 'padding');\n\t$res: null;\n\n\t@if $padding != null {\n\t\t@if type-of($padding) == 'map' {\n\t\t\t$res: breakpoint-value($padding, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $padding;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';\n\t}\n\n\t@return $res;\n}\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width: content-width-value();\n * min-width: content-width-value('min', 0);\n */\n@function content-width-value($min-max:'max', $default:null){\n\t$width: map-get($jig---content-config, 'max-width');\n\t@if $min-max == 'min' {\n\t\t$width: map-get($jig---content-config, 'min-width');\n\t}\n\n\t@if $width == null {\n\t\t$width: $default;\n\t}\n\n\t@return $width;\n}\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size: base-font-size-value();\n */\n@function base-font-size-value(){\n\t@return $jig---base-font-size;\n}\n","/**\n * @namespace Spacing\n */\n\n\n\n/**\n * @namespace Spacing:spacing-value\n */\n\n/**\n * Return a spacing value defined in the jig config, based on a breakpoint.\n *\n * @memberof Spacing:spacing-value\n * @function\n * @name spacing-value\n * @alias spacing-value\n *\n * @param {String} $size - on of the named sized defined in jig's spacing config (e.g. sm, l, xxl, ...)\n * @param {Literal|String} [$breakpoint='auto'] - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {Number|null} the spacing value or null if nothing was found\n * @throws error if size is unknown\n *\n * @example\n * spacing-value(sm)\n *   => 12px\n * spacing-value(md, large)\n *   => 5rem\n */\n@function spacing-value($size, $breakpoint:'auto'){\n\t$spacing: map-get($jig---spacing-config, $size);\n\n\t@if $spacing == null {\n\t\t@error 'jig:spacing-value | unknown size \"#{$size}\"';\n\t}\n\n\t@if type-of($spacing) == 'map' {\n\t\t@return breakpoint-value($spacing, $breakpoint);\n\t} @else {\n\t\t@return $spacing;\n\t}\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attributes\n */\n\n/**\n * Define (an) attribute(s) based on breakpoint-dependent spacing values.\n * This will render the given attributes with the corresponding spacing values for each defined breakpoint\n * in compiled media queries. Since this will result in many media queries being rendered, make sure before,\n * that there aren't many other media queries also needed to complete your definition. In that case, it might be\n * better and more performant to rather write the queries manually and get the spacing values via `[]` or\n * `spacing-value`.\n *\n * @memberof Spacing:spacing-based-attributes\n * @function\n * @name spacing-based-attributes\n * @alias spacing-based-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are spacing sizes\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attribute\n *\n * @example\n * \\@include spacing-based-attributes(\n *   (\n *     'padding-top' : 'sm',\n *     'padding-right' : 'md',\n *     'padding-bottom' : 'sm'\n *     'padding-left' : 'md'\n *     'margin-top' : 'l',\n *     'margin-bottom' : 'xl'\n *   ),\n *   2.0\n * );\n */\n@mixin spacing-based-attributes($attributes, $factor:null){\n\t$spacing-attributes: ();\n\t@each $attribute-name, $attribute-size in $attributes {\n\t\t$size-definition: map-get($jig---spacing-config, $attribute-size);\n\n\t\t@if $size-definition == null {\n\t\t\t@error 'jig:spacing-based-attributes | unknown size \"#{$size-definition}\"';\n\t\t}\n\n\t\t$spacing-attributes: map-merge($spacing-attributes, ($attribute-name : $size-definition));\n\t}\n\n\t@include attributes-for-breakpoints($spacing-attributes, $factor);\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attribute\n */\n\n/**\n * Define an attribute based on breakpoint-dependent spacing values.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Spacing:spacing-based-attribute\n * @function\n * @name spacing-based-attribute\n * @alias spacing-based-attribute\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {String} $size - on of the named sized defined in jig's spacing config (sm, l, xxl, ...)\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attributes\n *\n * @example\n * \\@include spacing-based-attribute(margin-top, 'xl', 1.0);\n */\n@mixin spacing-based-attribute($attribute, $size, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $size));\n\t@include spacing-based-attributes($attributes, $factor);\n}\n","%example-grid {\n\t@include grid-container();\n\n\tposition: relative;\n\n\tpadding: gutter-value();\n\tborder: 3px solid red;\n\n\t&:before {\n\t\tcontent: '';\n\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\t@include attributes-for-breakpoints((\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t));\n\n\t\tfilter: saturate(150%) brightness(38%);\n\t}\n\n\t@include breakpoint(medium){\n\t\tpadding: gutter-value();\n\t}\n\n\t@include breakpoint(large){\n\t\tpadding: gutter-value($breakpoint:large);\n\t}\n\n\n\n\t> div,\n\t> div > div {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\tposition: relative;\n\n\t\tborder: 3px solid dodgerblue;\n\n\t\tcolor: white;\n\t\tfont-size: base-font-size-value() * 1.5;\n\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\tbackground-color: dodgerblue;\n\n\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t&:nth-of-type(1){\n\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t}\n\n\t\t&:nth-of-type(2){\n\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t}\n\n\t\t&:nth-of-type(3){\n\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t}\n\n\t\t&:nth-of-type(4){\n\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t}\n\n\t\t&:nth-of-type(5){\n\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t}\n\t}\n\n\n\n\t&:hover {\n\t\t&:before,\n\t\t> div,\n\t\t> div > div {\n\t\t\tborder-color: lightskyblue;\n\n\t\t\tbackground-image: none !important;\n\n\t\t\tfilter: none !important;\n\t\t}\n\n\t\t> div > div {\n\t\t\tfilter: invert(100%) !important;\n\t\t}\n\t}\n}\n\n\n\n#basic-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 100px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium up){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium down){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\t\theight: 25vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 12.5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#advanced-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\t\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\t\theight: gutter-value($direction:'vertical') * 2.5;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\n\t\t\t\t&:first-of-type {\n\t\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\t\theight: auto;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(xsmall only){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: gutter-value() * 3;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\t\twidth: 200%;\n\t\t\t\t\t\theight: 55px;\n\n\t\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\t\tbackground-color: red;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#real-world-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 1;\n\n\t\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\tmargin-bottom: gutter-value($direction:vertical) * -3;\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\tmargin-bottom: gutter-value($direction:vertical) * -3;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\t\torder: 3;\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(3);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item();\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include grid-container();\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\tmargin-top: gutter-value($direction:vertical) * -1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\t\torder: 4;\n\n\t\t\t\t\tmargin-top: gutter-value($direction:'vertical') * -0.5;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 5;\n\n\t\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t));\n\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\tmargin-top: gutter-value($direction:vertical);\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\tmargin-top: gutter-value($direction:vertical) * 2;\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\tmargin-top: gutter-value($direction:vertical) * 2.5;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/docs/examples/css/scss.css.map b/docs/examples/css/scss.css.map
index dae4c74..6b6d50b 100644
--- a/docs/examples/css/scss.css.map
+++ b/docs/examples/css/scss.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.scss","../../../source/scss/jig/grid.scss","../../../source/scss/jig/breakpoints.scss","../../../source/scss/jig/content.scss"],"names":[],"mappings":"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","file":"scss.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","@use 'defines' as *;\n@use 'jig' as * with ($JIG_CONFIG : $JIG_CONFIG);\n\n\n\n@mixin render(){\n\t%example-grid {\n\t\t@include grid-container();\n\n\t\tposition: relative;\n\n\t\tpadding: gutter-value();\n\t\tborder: 3px solid red;\n\n\t\t&:before {\n\t\t\tcontent: '';\n\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\t@include attributes-for-breakpoints((\n\t\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t\t));\n\n\t\t\tfilter: saturate(150%) brightness(38%);\n\t\t}\n\n\t\t@include breakpoint(medium){\n\t\t\tpadding: gutter-value();\n\t\t}\n\n\t\t@include breakpoint(large){\n\t\t\tpadding: gutter-value($breakpoint:large);\n\t\t}\n\n\n\n\t\t> div,\n\t\t> div > div {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\tposition: relative;\n\n\t\t\tborder: 3px solid dodgerblue;\n\n\t\t\tcolor: white;\n\t\t\tfont-size: base-font-size-value() * 1.5;\n\t\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\tbackground-color: dodgerblue;\n\n\t\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t\t&:nth-of-type(1){\n\t\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(2){\n\t\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(3){\n\t\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(4){\n\t\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(5){\n\t\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t\t}\n\t\t}\n\n\n\n\t\t&:hover {\n\t\t\t&:before,\n\t\t\t> div,\n\t\t\t> div > div {\n\t\t\t\tborder-color: lightskyblue;\n\n\t\t\t\tbackground-image: none !important;\n\n\t\t\t\tfilter: none !important;\n\t\t\t}\n\n\t\t\t> div > div {\n\t\t\t\tfilter: invert(100%) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#basic-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium up){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium down){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\t\t\theight: 25vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\t\theight: 12.5vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\t\theight: 5vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#advanced-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\t\t\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\t\t\theight: gutter-value(2.5, $direction:'vertical');\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:first-of-type {\n\t\t\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(xsmall only){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\t\theight: gutter-value(3.0);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\t\t\twidth: 200%;\n\t\t\t\t\t\t\theight: 55px;\n\n\t\t\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\t\t\tbackground-color: red;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#real-world-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\t\t\torder: 3;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item(3);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item();\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t@include grid-container();\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\tmargin-top: gutter-value(-1, $direction:vertical);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\tmargin-top: gutter-value(-0.5, $direction:'vertical');\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t\t));\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(1, $direction:vertical);\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\t\tmargin-top: gutter-value(2, $direction:vertical);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\t\tmargin-top: gutter-value(2.5, $direction:vertical);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:string';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'breakpoints';\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map.get($jig---grid-config, 'columns'), 1fr);\n\t@include breakpoints.attributes-for-breakpoints((\n\t\t'grid-column-gap' : map.get($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map.get($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map.get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: string.unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: string.unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: gutter-value(0.5);\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map.get($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if meta.type-of($gutter) == 'map' {\n\t\t\t$res: breakpoints.breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return ($res * $factor) + $add;\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:list';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'util';\n\n\n\n$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n *   => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n *   ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n *   => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map.has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n *   => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n *   => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return util.str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List<String>} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n *   => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n *   => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n *   => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n *   => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n *   => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (list.length($breakpoint-definition) > 0), list.nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (list.length($breakpoint-definition) > 1), list.nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on <html>\n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if meta.type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map.get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: util.map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: util.to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: util.to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: util.to-em($next-breakpoint, $query-em-conversion-base) - util.to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List<String>|List<Literal>|List<List<String>>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n *   ...\n * }\n * \\@include breakpoint(small down, large up){\n *   ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(list.length($breakpoint-definition) > 0, list.nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(list.length($breakpoint-definition) > 1, list.nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map.keys($jig---breakpoint-config), list.nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: list.index(map.keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n *   (\n *     'small' : 10px,\n *     'medium' : 20px\n *   ),\n *   large\n * )\n *   => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if meta.type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map.get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map.get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : (\n *       'small' : 1,\n *       'large' : 1.25\n *     ),\n *     'margin-top' : (\n *       'small' : 10px,\n *       'medium' : 20px\n *     )\n *   ),\n *   2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if meta.type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map.get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map.merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map.merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (list.length(map.keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n *   'line-height',\n *   (\n *     'small' : 1,\n *     'large' : 1.25\n *   ),\n *   1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : 1.25\n *     'margin-top' : 20px\n *   ),\n *   2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n *   font-size: 12xp;\n *   margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n","/**\n * @namespace Content\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:map';\n@use 'sass:list';\n\n@use 'globals' as *;\n@use 'breakpoints';\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * \\@include content-holder();\n */\n@mixin content-holder($padded:true, $centered:false){\n\t$breakpoint-names: map.keys($jig---breakpoint-config);\n\t$smallest-breakpoint: list.nth($breakpoint-names, 1);\n\t$largest-breakpoint: list.nth($breakpoint-names, -1);\n\n\t$min-width: content-width-value('min');\n\t$max-width: content-width-value('max');\n\n\t@if $min-width != null {\n\t\tmin-width: $min-width + (2 * content-padding-value($smallest-breakpoint));\n\t}\n\t@if $max-width != null {\n\t\tmax-width: $max-width + (2 * content-padding-value($largest-breakpoint));\n\t}\n\n\t@if $centered {\n\t\tmargin-right: auto;\n\t\tmargin-left: auto;\n\t}\n\n\t@if $padded {\n\t\t$content-padding: map.get($jig---content-config, 'padding');\n\n\t\t@if $content-padding != null {\n\t\t\t@include breakpoints.attributes-for-breakpoints((\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t));\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: content-padding-value();\n * }\n * margin-right: content-padding-value($breakpoint:'small');\n */\n@function content-padding-value($breakpoint:'auto'){\n\t$padding: map.get($jig---content-config, 'padding');\n\t$res: null;\n\n\t@if $padding != null {\n\t\t@if meta.type-of($padding) == 'map' {\n\t\t\t$res: breakpoints.breakpoint-value($padding, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $padding;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';\n\t}\n\n\t@return $res;\n}\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width: content-width-value();\n * min-width: content-width-value('min', 0);\n */\n@function content-width-value($min-max:'max', $default:null){\n\t$width: map.get($jig---content-config, 'max-width');\n\t@if $min-max == 'min' {\n\t\t$width: map.get($jig---content-config, 'min-width');\n\t}\n\n\t@if $width == null {\n\t\t$width: $default;\n\t}\n\n\t@return $width;\n}\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size: base-font-size-value();\n */\n@function base-font-size-value(){\n\t@return $jig---base-font-size;\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.scss","../../../source/scss/jig/grid.scss","../../../source/scss/jig/breakpoints.scss","../../../source/scss/jig/content.scss"],"names":[],"mappings":"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","file":"scss.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","@use 'defines' as *;\n@use 'jig' as * with ($JIG_CONFIG : $JIG_CONFIG);\n\n\n\n@mixin render(){\n\t%example-grid {\n\t\t@include grid-container();\n\n\t\tposition: relative;\n\n\t\tpadding: gutter-value();\n\t\tborder: 3px solid red;\n\n\t\t&:before {\n\t\t\tcontent: '';\n\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\t@include attributes-for-breakpoints((\n\t\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t\t));\n\n\t\t\tfilter: saturate(150%) brightness(38%);\n\t\t}\n\n\t\t@include breakpoint(medium){\n\t\t\tpadding: gutter-value();\n\t\t}\n\n\t\t@include breakpoint(large){\n\t\t\tpadding: gutter-value($breakpoint:large);\n\t\t}\n\n\n\n\t\t> div,\n\t\t> div > div {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\tposition: relative;\n\n\t\t\tborder: 3px solid dodgerblue;\n\n\t\t\tcolor: white;\n\t\t\tfont-size: base-font-size-value() * 1.5;\n\t\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\tbackground-color: dodgerblue;\n\n\t\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t\t&:nth-of-type(1){\n\t\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(2){\n\t\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(3){\n\t\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(4){\n\t\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(5){\n\t\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t\t}\n\t\t}\n\n\n\n\t\t&:hover {\n\t\t\t&:before,\n\t\t\t> div,\n\t\t\t> div > div {\n\t\t\t\tborder-color: lightskyblue;\n\n\t\t\t\tbackground-image: none !important;\n\n\t\t\t\tfilter: none !important;\n\t\t\t}\n\n\t\t\t> div > div {\n\t\t\t\tfilter: invert(100%) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#basic-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium up){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium down){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\t\t\theight: 25vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\t\theight: 12.5vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\t\theight: 5vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#advanced-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\t\t\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\t\t\theight: gutter-value($direction:'vertical') * 2.5;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:first-of-type {\n\t\t\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(xsmall only){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\t\theight: gutter-value() * 3;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\t\t\twidth: 200%;\n\t\t\t\t\t\t\theight: 55px;\n\n\t\t\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\t\t\tbackground-color: red;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#real-world-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\t\tmargin-bottom: gutter-value($direction:vertical) * -3;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\t\tmargin-bottom: gutter-value($direction:vertical) * -3;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\t\t\torder: 3;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item(3);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item();\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t@include grid-container();\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\tmargin-top: gutter-value($direction:vertical) * -1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\tmargin-top: gutter-value($direction:'vertical') * -0.5;\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t\t));\n\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\tmargin-top: gutter-value($direction:vertical);\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\t\tmargin-top: gutter-value($direction:vertical) * 2;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\tmargin: gutter-value() * -1;\n\t\t\t\t\t\t\tmargin-top: gutter-value($direction:vertical) * 2.5;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:string';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'breakpoints';\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map.get($jig---grid-config, 'columns'), 1fr);\n\t@include breakpoints.attributes-for-breakpoints((\n\t\t'grid-column-gap' : map.get($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map.get($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map.get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: string.unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: string.unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: gutter-value() * 0.5;\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map.get($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if meta.type-of($gutter) == 'map' {\n\t\t\t$res: breakpoints.breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return $res;\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:list';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'util';\n\n\n\n$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n *   => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n *   ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n *   => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map.has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n *   => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n *   => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return util.str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List<String>} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n *   => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n *   => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n *   => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n *   => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n *   => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (list.length($breakpoint-definition) > 0), list.nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (list.length($breakpoint-definition) > 1), list.nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on <html>\n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if meta.type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map.get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: util.map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: util.to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: util.to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: util.to-em($next-breakpoint, $query-em-conversion-base) - util.to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List<String>|List<Literal>|List<List<String>>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n *   ...\n * }\n * \\@include breakpoint(small down, large up){\n *   ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(list.length($breakpoint-definition) > 0, list.nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(list.length($breakpoint-definition) > 1, list.nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map.keys($jig---breakpoint-config), list.nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: list.index(map.keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n *   (\n *     'small' : 10px,\n *     'medium' : 20px\n *   ),\n *   large\n * )\n *   => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if meta.type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map.get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map.get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : (\n *       'small' : 1,\n *       'large' : 1.25\n *     ),\n *     'margin-top' : (\n *       'small' : 10px,\n *       'medium' : 20px\n *     )\n *   ),\n *   2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if meta.type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map.get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map.merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map.merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (list.length(map.keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n *   'line-height',\n *   (\n *     'small' : 1,\n *     'large' : 1.25\n *   ),\n *   1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n *   (\n *     'font-size' : 12px,\n *     'line-height' : 1.25\n *     'margin-top' : 20px\n *   ),\n *   2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n *   font-size: 12xp;\n *   margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n","/**\n * @namespace Content\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:map';\n@use 'sass:list';\n\n@use 'globals' as *;\n@use 'breakpoints';\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * \\@include content-holder();\n */\n@mixin content-holder($padded:true, $centered:false){\n\t$breakpoint-names: map.keys($jig---breakpoint-config);\n\t$smallest-breakpoint: list.nth($breakpoint-names, 1);\n\t$largest-breakpoint: list.nth($breakpoint-names, -1);\n\n\t$min-width: content-width-value('min');\n\t$max-width: content-width-value('max');\n\n\t@if $min-width != null {\n\t\tmin-width: $min-width + (2 * content-padding-value($smallest-breakpoint));\n\t}\n\t@if $max-width != null {\n\t\tmax-width: $max-width + (2 * content-padding-value($largest-breakpoint));\n\t}\n\n\t@if $centered {\n\t\tmargin-right: auto;\n\t\tmargin-left: auto;\n\t}\n\n\t@if $padded {\n\t\t$content-padding: map.get($jig---content-config, 'padding');\n\n\t\t@if $content-padding != null {\n\t\t\t@include breakpoints.attributes-for-breakpoints((\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t));\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * \\@include breakpoint(medium){\n *   padding-left: content-padding-value();\n * }\n * margin-right: content-padding-value($breakpoint:'small');\n */\n@function content-padding-value($breakpoint:'auto'){\n\t$padding: map.get($jig---content-config, 'padding');\n\t$res: null;\n\n\t@if $padding != null {\n\t\t@if meta.type-of($padding) == 'map' {\n\t\t\t$res: breakpoints.breakpoint-value($padding, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $padding;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';\n\t}\n\n\t@return $res;\n}\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width: content-width-value();\n * min-width: content-width-value('min', 0);\n */\n@function content-width-value($min-max:'max', $default:null){\n\t$width: map.get($jig---content-config, 'max-width');\n\t@if $min-max == 'min' {\n\t\t$width: map.get($jig---content-config, 'min-width');\n\t}\n\n\t@if $width == null {\n\t\t$width: $default;\n\t}\n\n\t@return $width;\n}\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size: base-font-size-value();\n */\n@function base-font-size-value(){\n\t@return $jig---base-font-size;\n}\n"]}
\ No newline at end of file
diff --git a/docs/examples/css/stylus.css b/docs/examples/css/stylus.css
index f3c9b20..b8d4705 100644
--- a/docs/examples/css/stylus.css
+++ b/docs/examples/css/stylus.css
@@ -2,5 +2,5 @@
 
 
 
-#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid #f00}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{grid-column-gap:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{grid-column-gap:40px}}#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{padding:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{padding:40px}}#basic-grid-example .examples > .stylus > .grid > div,#advanced-grid-example .examples > .stylus > .grid > div,#real-world-grid-example .examples > .stylus > .grid > div,#basic-grid-example .examples > .stylus > .grid > div > div,#advanced-grid-example .examples > .stylus > .grid > div > div,#real-world-grid-example .examples > .stylus > .grid > div > div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid #1e90ff;color:#fff;font-size:18px;text-shadow:1px -1px 3px #000,1px 1px 3px #000,-1px 1px 3px #000,-1px -1px 3px #000;background-size:cover;background-position:center center;background-color:#1e90ff;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#basic-grid-example .examples > .stylus > .grid:hover:before,#advanced-grid-example .examples > .stylus > .grid:hover:before,#real-world-grid-example .examples > .stylus > .grid:hover:before,#basic-grid-example .examples > .stylus > .grid:hover > div,#advanced-grid-example .examples > .stylus > .grid:hover > div,#real-world-grid-example .examples > .stylus > .grid:hover > div,#basic-grid-example .examples > .stylus > .grid:hover > div > div,#advanced-grid-example .examples > .stylus > .grid:hover > div > div,#real-world-grid-example .examples > .stylus > .grid:hover > div > div{border-color:#87cefa;background-image:none !important;filter:none !important}#basic-grid-example .examples > .stylus > .grid:hover > div > div,#advanced-grid-example .examples > .stylus > .grid:hover > div > div,#real-world-grid-example .examples > .stylus > .grid:hover > div > div{filter:invert(100%) !important}#basic-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus{padding-left:35px;padding-right:35px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#basic-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print,screen and (max-width:79.9375em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus{padding-left:35px;padding-right:35px}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#advanced-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#advanced-grid-example .examples > .stylus > .grid{padding-top:40px}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus > .grid{padding-top:80px}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus > .grid{padding-top:120px}}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples > .stylus > .grid > div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print,screen and (min-width:0) and (max-width:47.9375em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:#f00;background-color:#f00;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:#1e90ff;background-color:#1e90ff;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus{padding-left:35px;padding-right:35px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#real-world-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1):before{content:'Stage'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){height:240px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){height:360px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2):before{content:'Navbar'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-gap:20px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1):before{content:'Text'}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2):before,#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3):before,#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4):before{content:'Teaser'}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){margin-top:-20px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){height:210px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){margin-top:0}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){height:150px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){height:auto}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4):before{content:'Hint'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5):before{content:'Footer'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-bottom:50px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width:100em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-top:40px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){margin:-40px;margin-top:50px}}
+#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid #f00}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{grid-column-gap:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{grid-column-gap:40px}}#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{padding:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{padding:40px}}#basic-grid-example .examples > .stylus > .grid > div,#advanced-grid-example .examples > .stylus > .grid > div,#real-world-grid-example .examples > .stylus > .grid > div,#basic-grid-example .examples > .stylus > .grid > div > div,#advanced-grid-example .examples > .stylus > .grid > div > div,#real-world-grid-example .examples > .stylus > .grid > div > div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid #1e90ff;color:#fff;font-size:18px;text-shadow:1px -1px 3px #000,1px 1px 3px #000,-1px 1px 3px #000,-1px -1px 3px #000;background-size:cover;background-position:center center;background-color:#1e90ff;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#basic-grid-example .examples > .stylus > .grid:hover:before,#advanced-grid-example .examples > .stylus > .grid:hover:before,#real-world-grid-example .examples > .stylus > .grid:hover:before,#basic-grid-example .examples > .stylus > .grid:hover > div,#advanced-grid-example .examples > .stylus > .grid:hover > div,#real-world-grid-example .examples > .stylus > .grid:hover > div,#basic-grid-example .examples > .stylus > .grid:hover > div > div,#advanced-grid-example .examples > .stylus > .grid:hover > div > div,#real-world-grid-example .examples > .stylus > .grid:hover > div > div{border-color:#87cefa;background-image:none !important;filter:none !important}#basic-grid-example .examples > .stylus > .grid:hover > div > div,#advanced-grid-example .examples > .stylus > .grid:hover > div > div,#real-world-grid-example .examples > .stylus > .grid:hover > div > div{filter:invert(100%) !important}#basic-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#basic-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print,screen and (max-width:79.9375em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#advanced-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#advanced-grid-example .examples > .stylus > .grid{padding-top:40px}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus > .grid{padding-top:80px}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus > .grid{padding-top:120px}}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples > .stylus > .grid > div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print,screen and (min-width:0) and (max-width:47.9375em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:#f00;background-color:#f00;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:#1e90ff;background-color:#1e90ff;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#real-world-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1):before{content:'Stage'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){height:240px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){height:360px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2):before{content:'Navbar'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-gap:20px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1):before{content:'Text'}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2):before,#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3):before,#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4):before{content:'Teaser'}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){margin-top:-20px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){height:210px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){margin-top:0}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){height:150px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){height:auto}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4):before{content:'Hint'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5):before{content:'Footer'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-bottom:50px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width:100em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-top:40px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){margin:-40px;margin-top:50px}}
 /*# sourceMappingURL=stylus.css.map */
diff --git a/docs/examples/css/stylus.css.map b/docs/examples/css/stylus.css.map
index d0dd603..29de90d 100644
--- a/docs/examples/css/stylus.css.map
+++ b/docs/examples/css/stylus.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.styl","../../../source/stylus/jig/grid.styl","../../../source/stylus/jig/breakpoints.styl","../../../source/stylus/jig/content.styl"],"names":[],"mappings":"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","file":"stylus.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$example-grid\n\tgrid-container()\n\n\tposition relative\n\n\tpadding gutter-value()\n\tborder 3px solid red\n\n\t&:before\n\t\tcontent ''\n\n\t\tposition absolute\n\t\ttop 0\n\t\tright 0\n\t\tbottom 0\n\t\tleft 0\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tattributes-for-breakpoints({\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t})\n\n\t\tfilter saturate(150%) brightness(38%)\n\n\tset-auto-breakpoint(medium)\n\t+breakpoint(medium)\n\t\tpadding gutter-value()\n\n\t+breakpoint(large)\n\t\tpadding gutter-value($breakpoint:large)\n\n\n\n\t> div\n\t> div > div\n\t\tdisplay flex\n\t\tjustify-content center\n\t\talign-items center\n\n\t\tposition relative\n\n\t\tborder 3px solid dodgerblue\n\n\t\tcolor white\n\t\tfont-size base-font-size-value() * 1.5\n\t\ttext-shadow 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tbackground-color dodgerblue\n\n\t\tfilter grayscale(50%) hue-rotate(-10deg) saturate(200%)\n\n\t\t&:nth-of-type(1)\n\t\t\tbackground-image url('../files/img/block-1.jpg')\n\n\t\t&:nth-of-type(2)\n\t\t\tbackground-image url('../files/img/block-2.jpg')\n\n\t\t&:nth-of-type(3)\n\t\t\tbackground-image url('../files/img/block-3.jpg')\n\n\t\t&:nth-of-type(4)\n\t\t\tbackground-image url('../files/img/block-4.jpg')\n\n\t\t&:nth-of-type(5)\n\t\t\tbackground-image url('../files/img/block-5.jpg')\n\n\n\n\t&:hover\n\t\t&:before\n\t\t> div\n\t\t> div > div\n\t\t\tborder-color lightskyblue\n\n\t\t\tbackground-image none !important\n\n\t\t\tfilter none !important\n\n\t\t> div > div\n\t\t\tfilter invert(100%) !important\n\n\n\n#basic-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(odd)\n\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\theight 100px\n\n\t\t\t\t&:nth-of-type(even)\n\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\theight 75px\n\n\n\n\t\t\t+breakpoint(medium up)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 100px\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 80px\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 60px\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 40px\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 20px\n\n\n\n\t\t\t+breakpoint(medium down)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\t\tbackground-color aqua\n\t\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\t\t+breakpoint(large)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item()\n\n\t\t\t\t\t\theight 25vh\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\t\theight 12.5vh\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item(6)\n\t\t\t\t\t\tgrid-item-align($vertical:bottom)\n\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\tgrid-item-align(center, center)\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\twidth 100px\n\t\t\t\t\t\theight 5vh\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\torder 1\n\n\t\t\t\t\t\theight 10vh\n\n\n\n#advanced-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\t\t\tspacing-based-attribute(padding-top, 'xxl')\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(odd)\n\t\t\t\t\tgrid-item(4)\n\t\t\t\t\tgrid-item-align(null, end)\n\n\t\t\t\t\theight gutter-value(2.5, $direction:'vertical')\n\n\t\t\t\t&:nth-of-type(even)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 75px\n\n\t\t\t\t&:first-of-type\n\t\t\t\t\tgrid-item($span:4, $row-span:2)\n\t\t\t\t\tgrid-item-align($vertical:full)\n\n\t\t\t\t\theight auto\n\n\n\n\t\t\t+breakpoint(xsmall only)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\t\tbackground-color aqua\n\t\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\t\tset-auto-breakpoint(medium)\n\t\t\t+breakpoint(medium)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\torder 5\n\n\t\t\t\t\t\twidth 50%\n\t\t\t\t\t\theight gutter-value(3.0)\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item($start:8, $end:12)\n\t\t\t\t\t\torder 4\n\n\t\t\t\t\t\theight 80px\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item($start:6, $span:2)\n\t\t\t\t\t\tgrid-item-align(full, center)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t\theight 60px\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(8, $row-start:1, $row-end:3)\n\t\t\t\t\t\tgrid-item-align('right', $vertical:'full')\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\twidth 50%\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\tgrid-item-align(left, top)\n\t\t\t\t\t\torder 1\n\t\t\t\t\t\tz-index 1\n\n\t\t\t\t\t\twidth 200%\n\t\t\t\t\t\theight 55px\n\n\t\t\t\t\t\tborder-color red\n\n\t\t\t\t\t\tbackground-color red\n\t\t\t\t\t\tbackground-image url('../files/img/block-7.jpg')\n\n\t\t\t\t\t\ttransform rotate(10deg)\n\n\n\n\t\t\t+breakpoint(large)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:0, $row-span:1)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 1\n\n\t\t\t\t\t\twidth auto\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item($start:4, $end:8, $row-start:0, $row-span:2)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item($start:8, $span:4, $row-start:0, $row-span:3)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:1, $row-end:2)\n\t\t\t\t\t\tgrid-item-align(right, center)\n\t\t\t\t\t\torder 4\n\n\t\t\t\t\t\twidth 100px\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(6)\n\t\t\t\t\t\tgrid-item-align(stretch)\n\t\t\t\t\t\torder 5\n\n\t\t\t\t\t\twidth auto\n\t\t\t\t\t\theight 20vh\n\n\t\t\t\t\t\tborder-color dodgerblue\n\n\t\t\t\t\t\tbackground-color dodgerblue\n\t\t\t\t\t\tbackground-image url('../files/img/block-8.jpg')\n\n\t\t\t\t\t\ttransform rotate(0deg)\n\n\n\n#real-world-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Stage'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 1\n\n\t\t\t\t\tspacing-based-attribute('height', 'xxl', 3.0)\n\n\t\t\t\t\tmargin gutter-value(-1.0)\n\t\t\t\t\tmargin-bottom 0\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tmargin gutter-value(-1.0, $breakpoint:medium)\n\t\t\t\t\t\tmargin-bottom gutter-value(-3, $breakpoint:medium, $direction:vertical)\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tmargin gutter-value(-1.0)\n\t\t\t\t\t\tmargin-bottom gutter-value(-3, $direction:vertical)\n\n\n\n\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Navbar'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 2\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item(4, $row-span:2)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item(3)\n\n\n\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tgrid-item()\n\t\t\t\t\torder 2\n\n\t\t\t\t\tgrid-container()\n\n\t\t\t\t\t> div\n\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\t\tcontent 'Text'\n\n\t\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\t\theight spacing-value('md') * 10\n\n\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\t\tcontent 'Teaser'\n\n\t\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\t\theight 100px\n\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\tmargin-top gutter-value(-1, $direction:vertical)\n\n\n\n\t\t\t\t\tset-auto-breakpoint(medium)\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item($start:0, $span:8)\n\n\t\t\t\t\t\t> div\n\t\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t\theight spacing-value('md') * 7\n\n\t\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\t\t\theight 75px\n\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\tmargin-top 0\n\n\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item(9)\n\n\t\t\t\t\t\t> div\n\t\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t\theight spacing-value('md') * 5\n\n\t\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\theight auto\n\n\n\n\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Hint'\n\n\t\t\t\t\tgrid-item($start:1, $end:11)\n\t\t\t\t\torder 4\n\n\t\t\t\t\tmargin-top gutter-value(-0.5, $direction:'vertical')\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item(8, $start:0)\n\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item($start:3, $span:6)\n\n\n\n\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Footer'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 5\n\n\t\t\t\t\tspacing-based-attributes({\n\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t})\n\t\t\t\t\tmargin gutter-value(-1)\n\t\t\t\t\tmargin-top gutter-value(1, $direction:vertical)\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tmargin gutter-value(-1, $breakpoint:medium)\n\t\t\t\t\t\tmargin-top gutter-value(2, $breakpoint:medium, $direction:vertical)\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tmargin gutter-value(-1)\n\t\t\t\t\t\tmargin-top gutter-value(2.5, $direction:vertical)\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * grid-container()\n */\ngrid-container()\n\tdisplay grid\n\tgrid-auto-flow row\n\tgrid-template-columns repeat($jig---grid-config.columns, 1fr)\n\tattributes-for-breakpoints({\n\t\t'grid-column-gap' : hash-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : hash-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t})\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * grid-item(12)\n * grid-item(6, 6)\n * grid-item(null, 2, 2)\n * grid-item(6, null, null, 2)\n * grid-item(6, null, null, null, 0, 5)\n */\ngrid-item(\n\t$span=null,\n\t$start=null,\n\t$end=null,\n\t$row-span=null,\n\t$row-start=null,\n\t$row-end=null\n)\n\tif ($span == null) and ($start == null)\n\t\tgrid-column-end span $jig---grid-config.columns\n\telse\n\t\tif $span != null\n\t\t\tgrid-column-end span $span\n\n\t\tif $start != null\n\t\t\tgrid-column-start ($start + 1)\n\n\t\tif ($end != null) and ($span == null)\n\t\t\tgrid-column-end ($end + 1)\n\n\tif ($row-span != null) or ($row-start != null)\n\t\tif $row-span != null\n\t\t\tgrid-row-end span $row-span\n\n\t\tif $row-start != null\n\t\t\tgrid-row-start ($row-start + 1)\n\n\t\tif ($row-end != null) and ($row-span == null)\n\t\t\tgrid-row-end ($row-end + 1)\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * grid-item-align('left')\n * grid-item-align(center, center)\n * grid-item-align(null, 'full')\n */\ngrid-item-align($horizontal=null, $vertical=null)\n\tif $horizontal == 'left'\n\t\t$horizontal = 'start'\n\telse if $horizontal == 'right'\n\t\t$horizontal = 'end'\n\telse if $horizontal == 'middle'\n\t\t$horizontal = 'center'\n\telse if $horizontal == 'full'\n\t\t$horizontal = 'stretch'\n\n\tif $vertical == 'top'\n\t\t$vertical = 'start'\n\telse if $vertical == 'bottom'\n\t\t$vertical = 'end'\n\telse if $vertical == 'middle'\n\t\t$vertical = 'center'\n\telse if $vertical == 'full'\n\t\t$vertical = 'stretch'\n\n\tif $horizontal != null\n\t\tjustify-self unquote($horizontal)\n\n\tif $vertical != null\n\t\talign-self unquote($vertical)\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * +breakpoint(medium)\n *   padding-left gutter-value(0.5)\n * margin-top gutter-value($direction:'vertical', $breakpoint:'small')\n */\ngutter-value(\n\t$factor=1.0,\n\t$add=0,\n\t$direction='horizontal',\n\t$breakpoint='auto'\n)\n\t$direction = to-str($direction)\n\t$breakpoint = to-str($breakpoint)\n\t$gutter = hash-get-deep($jig---grid-config, 'gutters', $direction)\n\t$res = null\n\n\tif $gutter != null\n\t\tif type($gutter) == 'object'\n\t\t\t$res = breakpoint-value($gutter, $breakpoint)\n\t\telse\n\t\t\t$res = $gutter\n\n\tif $res == null\n\t\terror('jig:gutter-value | could not resolve gutter, check direction and/or breakpoint')\n\n\treturn ($res * $factor) + $add\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint = keys($jig---breakpoint-config)[0]\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n *   => 'medium'\n */\nget-auto-breakpoint()\n\treturn $jig---auto-breakpoint\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Stylus we have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _before_ the block mixin around the block, which results\n * in the block only knowing the breakpoint before the mixin.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * set-auto-breakpoint(medium)\n * +breakpoint(medium)\n *   ...\n */\nset-auto-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\tif $breakpoint in $jig---breakpoint-config\n\t\tdefine('$jig---auto-breakpoint', $breakpoint, true)\n\telse\n\t\terror('jig:set-current-breakpoint | unknown named breakpoint \"'+$breakpoint+'\"')\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: although you may do this manually in Stylus, this is automatically called at the end of the\n * breakpoint mixin, so usually you should be fine with set-auto-breakpoint, without resetting, if you\n * use a breakpoint directly after the call.\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * reset-auto-breakpoint()\n */\nreset-auto-breakpoint()\n\tdefine('$jig---auto-breakpoint', keys($jig---breakpoint-config)[0], true)\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n *   => true\n */\nis-named-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\treturn $breakpoint in $jig---breakpoint-config\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n *   => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n *   => '(max-width: 100rem)'\n */\nbuild-breakpoint-range($min=null, $max=null)\n\t$min-query = ($min != null) ? '(min-width: '+$min+')' : null\n\t$max-query = ($max != null) ? '(max-width: '+$max+')' : null\n\n\treturn str-join(($min-query $max-query), ' and ')\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List<String>} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n *   => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n *   => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n *   => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n *   => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n *   => '(orientation: landscape)'\n */\nbuild-breakpoint-query($breakpoint-definition=0)\n\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t$breakpoint-name = null\n\t$next-breakpoint = null\n\t$min = null\n\t$max = null\n\t$query-em-conversion-base = 16px // this is always 16px, no matter what is defined on <html>\n\n\tif $breakpoint == 'overwrite'\n\t\treturn '(min-width: 0)'\n\telse if ($breakpoint == 'landscape') or ($breakpoint == 'portrait')\n\t\treturn '(orientation: '+$breakpoint+')'\n\telse if type($breakpoint) == 'string'\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\t$breakpoint-name = $breakpoint\n\t\t\t$breakpoint = $jig---breakpoint-config[$breakpoint-name]\n\t\t\t$next-breakpoint = hash-next($jig---breakpoint-config, $breakpoint-name)\n\t\telse\n\t\t\terror('jig:build-breakpoint-query | \"'+$breakpoint-definition+'\" is not a defined breakpoint')\n\n\tif ($breakpoint-name == null) and ($direction == 'only')\n\t\terror('jig:build-breakpoint-query | only named media queries can have an \"only\" range')\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\tif ($direction == 'only') or ($direction == 'up')\n\t\t$min = to-em($breakpoint, $query-em-conversion-base)\n\n\tif ($direction == 'only') or ($direction == 'down')\n\t\tif $breakpoint-name == null\n\t\t\t$max = to-em($breakpoint, $query-em-conversion-base)\n\t\telse if $next-breakpoint-name != null\n\t\t\t$max = to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base)\n\n\tif ($min == 0) and ($max == null)\n\t\t$min = null\n\n\treturn build-breakpoint-range($min, $max)\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List<String>|List<Literal>|List<List<String>>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @see set-auto-breakpoint\n *\n * @example\n * +breakpoint(small)\n *   ...\n * +breakpoint(small down, large up)\n *   ...\n */\nbreakpoint($breakpoint-definitions...)\n\tfor $breakpoint-definition in $breakpoint-definitions\n\t\t$query = build-breakpoint-query($breakpoint-definition)\n\t\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t\t$breakpoint-index = index(keys($jig---breakpoint-config), $breakpoint)\n\t\t$print-breakpoint-index = index(keys($jig---breakpoint-config), $jig---print-breakpoint)\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\tset-auto-breakpoint($breakpoint)\n\n\t\tif $query == ''\n\t\t\t{block}\n\t\telse\n\t\t\tif\t($breakpoint-index != null) and (($breakpoint-index <= $print-breakpoint-index) or ($direction == 'down'))\n\t\t\t\t$media-query = s('print, screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\t\t\telse\n\t\t\t\t$media-query = s('screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\n\t\t// restore initial value after mixin has been rendered\n\t\treset-auto-breakpoint()\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given hash of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Hash} $value - a hash of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n *   {\n *     'small' : 10px,\n *     'medium' : 20px\n *   },\n *   large\n * )\n *   => 20px\n */\nbreakpoint-value($value, $breakpoint='auto')\n\t$breakpoint = to-str($breakpoint)\n\n\tif ($breakpoint != 'auto') and !($breakpoint in $jig---breakpoint-config)\n\t\terror('jig:breakpoint-value | given breakpoint \"'+$breakpoint+'\" not defined')\n\n\tif type($value) == 'object'\n\t\t$res = null\n\n\t\tif $breakpoint == 'auto'\n\t\t\t$breakpoint = get-auto-breakpoint()\n\n\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t$breakpoint-value = $value[$breakpoint-name]\n\n\t\t\tif $breakpoint-value != null\n\t\t\t\t$res = $breakpoint-value\n\n\t\t\tif $breakpoint-name == $breakpoint\n\t\t\t\treturn $res\n\n\t\treturn null\n\telse\n\t\treturn $value\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `[]` or\n * `breakpoint-value` to automatically pull values from breakpoint value hashes.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * attributes-for-breakpoints(\n *   {\n *     'font-size' : 12px,\n *     'line-height' : {\n *       'small' : 1,\n *       'large' : 1.25\n *     },\n *     'margin-top' : {\n *       'small' : 10px,\n *       'medium' : 20px\n *     }\n *   },\n *   2.0\n * )\n */\nattributes-for-breakpoints($attributes, $factor=null)\n\t$attributes-for-breakpoints = {}\n\tfor $attribute-name, $attribute-value in $attributes\n\t\tif type($attribute-value) != 'object'\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\t\telse\n\t\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t\t$breakpoint-value = $attribute-value[$breakpoint-name]\n\t\t\t\tif ($breakpoint-value != null) or (type($breakpoint-value) == 'call')\n\t\t\t\t\tif !($breakpoint-name in $attributes-for-breakpoints)\n\t\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name] = {}\n\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name][$attribute-name] = $breakpoint-value;\n\n\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t$breakpoint-attributes = $attributes-for-breakpoints[$breakpoint-name]\n\t\tif ($breakpoint-attributes != null) and (length($breakpoint-attributes) > 0)\n\t\t\t+breakpoint($breakpoint-name)\n\t\t\t\tfor $attribute-name, $attribute-value in $breakpoint-attributes\n\t\t\t\t\tif $factor == null\n\t\t\t\t\t\t{$attribute-name} $attribute-value\n\t\t\t\t\telse\n\t\t\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * attribute-for-breakpoints(\n *   'line-height',\n *   {\n *     'small' : 1,\n *     'large' : 1.25\n *   },\n *   1.0\n * )\n */\nattribute-for-breakpoints($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\tattributes-for-breakpoints($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * overwrite-breakpoint-for-attributes(\n *   {\n *     'font-size' : 12px,\n *     'line-height' : 1.25\n *     'margin-top' : 20px\n *   },\n *   2.0\n * )\n */\noverwrite-breakpoint-for-attributes($attributes, $factor=null)\n\t+breakpoint('overwrite')\n\t\tfor $attribute-name, $attribute-value in $attributes\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * overwrite-breakpoint-for-attribute(font-size, 12px, 2.0)\n */\noverwrite-breakpoint-for-attribute($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\toverwrite-breakpoint-for-attributes($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * +overwrite-breakpoint()\n *   font-size 12xp\n *   margin-top 20px\n */\noverwrite-breakpoint()\n\t+breakpoint('overwrite')\n\t\t{block}\n","/**\n * @namespace Content\n */\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * content-holder()\n */\ncontent-holder($padded=true, $centered=false)\n\t$breakpoint-names = keys($jig---breakpoint-config)\n\t$smallest-breakpoint = $breakpoint-names[0]\n\t$largest-breakpoint = last($breakpoint-names)\n\n\t$min-width = content-width-value('min')\n\t$max-width = content-width-value('max')\n\n\tif $min-width != null\n\t\tmin-width ($min-width + (2 * content-padding-value($smallest-breakpoint)))\n\n\tif $max-width != null\n\t\tmax-width ($max-width + (2 * content-padding-value($largest-breakpoint)))\n\n\tif $centered\n\t\tmargin-right auto\n\t\tmargin-left auto\n\n\tif $padded\n\t\t$content-padding = $jig---content-config.padding\n\n\t\tif $content-padding != null\n\t\t\tattributes-for-breakpoints({\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t})\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * breakpoint(medium)\n *   padding-left content-padding-value()\n * margin-right content-padding-value($breakpoint:'small')\n */\ncontent-padding-value($breakpoint='auto')\n\t$padding = $jig---content-config.padding\n\t$res = null\n\n\tif $padding != null\n\t\tif type($padding) == 'object'\n\t\t\t$res = breakpoint-value($padding, $breakpoint)\n\t\telse\n\t\t\t$res = $padding\n\n\tif $res == null\n\t\terror('jig:content-padding-value | could not resolve content padding, check breakpoint')\n\n\treturn $res\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width content-width-value()\n * min-width content-width-value('min', 0)\n */\ncontent-width-value($min-max='max', $default=null)\n\t$width = $jig---content-config.max-width\n\tif $min-max == 'min'\n\t\t$width = $jig---content-config.min-width\n\n\tif $width == null\n\t\t$width = $default\n\n\treturn $width\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size base-font-size-value()\n */\nbase-font-size-value()\n\treturn $jig---base-font-size\n"]}
\ No newline at end of file
+{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.styl","../../../source/stylus/jig/grid.styl","../../../source/stylus/jig/breakpoints.styl","../../../source/stylus/jig/content.styl"],"names":[],"mappings":"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","file":"stylus.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$example-grid\n\tgrid-container()\n\n\tposition relative\n\n\tpadding gutter-value()\n\tborder 3px solid red\n\n\t&:before\n\t\tcontent ''\n\n\t\tposition absolute\n\t\ttop 0\n\t\tright 0\n\t\tbottom 0\n\t\tleft 0\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tattributes-for-breakpoints({\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t})\n\n\t\tfilter saturate(150%) brightness(38%)\n\n\tset-auto-breakpoint(medium)\n\t+breakpoint(medium)\n\t\tpadding gutter-value()\n\n\t+breakpoint(large)\n\t\tpadding gutter-value($breakpoint:large)\n\n\n\n\t> div\n\t> div > div\n\t\tdisplay flex\n\t\tjustify-content center\n\t\talign-items center\n\n\t\tposition relative\n\n\t\tborder 3px solid dodgerblue\n\n\t\tcolor white\n\t\tfont-size base-font-size-value() * 1.5\n\t\ttext-shadow 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tbackground-color dodgerblue\n\n\t\tfilter grayscale(50%) hue-rotate(-10deg) saturate(200%)\n\n\t\t&:nth-of-type(1)\n\t\t\tbackground-image url('../files/img/block-1.jpg')\n\n\t\t&:nth-of-type(2)\n\t\t\tbackground-image url('../files/img/block-2.jpg')\n\n\t\t&:nth-of-type(3)\n\t\t\tbackground-image url('../files/img/block-3.jpg')\n\n\t\t&:nth-of-type(4)\n\t\t\tbackground-image url('../files/img/block-4.jpg')\n\n\t\t&:nth-of-type(5)\n\t\t\tbackground-image url('../files/img/block-5.jpg')\n\n\n\n\t&:hover\n\t\t&:before\n\t\t> div\n\t\t> div > div\n\t\t\tborder-color lightskyblue\n\n\t\t\tbackground-image none !important\n\n\t\t\tfilter none !important\n\n\t\t> div > div\n\t\t\tfilter invert(100%) !important\n\n\n\n#basic-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(odd)\n\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\theight 100px\n\n\t\t\t\t&:nth-of-type(even)\n\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\theight 75px\n\n\n\n\t\t\t+breakpoint(medium up)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 100px\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 80px\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 60px\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 40px\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 20px\n\n\n\n\t\t\t+breakpoint(medium down)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\t\tbackground-color aqua\n\t\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\t\t+breakpoint(large)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item()\n\n\t\t\t\t\t\theight 25vh\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\t\theight 12.5vh\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item(6)\n\t\t\t\t\t\tgrid-item-align($vertical:bottom)\n\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\tgrid-item-align(center, center)\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\twidth 100px\n\t\t\t\t\t\theight 5vh\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\torder 1\n\n\t\t\t\t\t\theight 10vh\n\n\n\n#advanced-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\t\t\tspacing-based-attribute(padding-top, 'xxl')\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(odd)\n\t\t\t\t\tgrid-item(4)\n\t\t\t\t\tgrid-item-align(null, end)\n\n\t\t\t\t\theight gutter-value($direction:'vertical') * 2.5\n\n\t\t\t\t&:nth-of-type(even)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 75px\n\n\t\t\t\t&:first-of-type\n\t\t\t\t\tgrid-item($span:4, $row-span:2)\n\t\t\t\t\tgrid-item-align($vertical:full)\n\n\t\t\t\t\theight auto\n\n\n\n\t\t\t+breakpoint(xsmall only)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\t\tbackground-color aqua\n\t\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\t\tset-auto-breakpoint(medium)\n\t\t\t+breakpoint(medium)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\torder 5\n\n\t\t\t\t\t\twidth 50%\n\t\t\t\t\t\theight gutter-value() * 3.0\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item($start:8, $end:12)\n\t\t\t\t\t\torder 4\n\n\t\t\t\t\t\theight 80px\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item($start:6, $span:2)\n\t\t\t\t\t\tgrid-item-align(full, center)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t\theight 60px\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(8, $row-start:1, $row-end:3)\n\t\t\t\t\t\tgrid-item-align('right', $vertical:'full')\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\twidth 50%\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\tgrid-item-align(left, top)\n\t\t\t\t\t\torder 1\n\t\t\t\t\t\tz-index 1\n\n\t\t\t\t\t\twidth 200%\n\t\t\t\t\t\theight 55px\n\n\t\t\t\t\t\tborder-color red\n\n\t\t\t\t\t\tbackground-color red\n\t\t\t\t\t\tbackground-image url('../files/img/block-7.jpg')\n\n\t\t\t\t\t\ttransform rotate(10deg)\n\n\n\n\t\t\t+breakpoint(large)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:0, $row-span:1)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 1\n\n\t\t\t\t\t\twidth auto\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item($start:4, $end:8, $row-start:0, $row-span:2)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item($start:8, $span:4, $row-start:0, $row-span:3)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:1, $row-end:2)\n\t\t\t\t\t\tgrid-item-align(right, center)\n\t\t\t\t\t\torder 4\n\n\t\t\t\t\t\twidth 100px\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(6)\n\t\t\t\t\t\tgrid-item-align(stretch)\n\t\t\t\t\t\torder 5\n\n\t\t\t\t\t\twidth auto\n\t\t\t\t\t\theight 20vh\n\n\t\t\t\t\t\tborder-color dodgerblue\n\n\t\t\t\t\t\tbackground-color dodgerblue\n\t\t\t\t\t\tbackground-image url('../files/img/block-8.jpg')\n\n\t\t\t\t\t\ttransform rotate(0deg)\n\n\n\n#real-world-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Stage'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 1\n\n\t\t\t\t\tspacing-based-attribute('height', 'xxl', 3.0)\n\n\t\t\t\t\tmargin gutter-value() * -1\n\t\t\t\t\tmargin-bottom 0\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tmargin gutter-value($breakpoint:medium) * -1\n\t\t\t\t\t\tmargin-bottom gutter-value($breakpoint:medium, $direction:vertical) * -3\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tmargin gutter-value() * -1\n\t\t\t\t\t\tmargin-bottom gutter-value($direction:vertical) * -3\n\n\n\n\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Navbar'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 2\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item(4, $row-span:2)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item(3)\n\n\n\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tgrid-item()\n\t\t\t\t\torder 2\n\n\t\t\t\t\tgrid-container()\n\n\t\t\t\t\t> div\n\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\t\tcontent 'Text'\n\n\t\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\t\theight spacing-value('md') * 10\n\n\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\t\tcontent 'Teaser'\n\n\t\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\t\theight 100px\n\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\tmargin-top gutter-value($direction:vertical) * -1\n\n\n\n\t\t\t\t\tset-auto-breakpoint(medium)\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item($start:0, $span:8)\n\n\t\t\t\t\t\t> div\n\t\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t\theight spacing-value('md') * 7\n\n\t\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\t\t\theight 75px\n\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\tmargin-top 0\n\n\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item(9)\n\n\t\t\t\t\t\t> div\n\t\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t\theight spacing-value('md') * 5\n\n\t\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\theight auto\n\n\n\n\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Hint'\n\n\t\t\t\t\tgrid-item($start:1, $end:11)\n\t\t\t\t\torder 4\n\n\t\t\t\t\tmargin-top gutter-value($direction:'vertical') * -0.5\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item(8, $start:0)\n\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item($start:3, $span:6)\n\n\n\n\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Footer'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 5\n\n\t\t\t\t\tspacing-based-attributes({\n\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t})\n\t\t\t\t\tmargin gutter-value() * -1\n\t\t\t\t\tmargin-top gutter-value($direction:vertical)\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tmargin gutter-value($breakpoint:medium) * -1\n\t\t\t\t\t\tmargin-top gutter-value($breakpoint:medium, $direction:vertical) * 2\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tmargin gutter-value() * -1\n\t\t\t\t\t\tmargin-top gutter-value($direction:vertical) * 2.5\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * grid-container()\n */\ngrid-container()\n\tdisplay grid\n\tgrid-auto-flow row\n\tgrid-template-columns repeat($jig---grid-config.columns, 1fr)\n\tattributes-for-breakpoints({\n\t\t'grid-column-gap' : hash-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : hash-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t})\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * grid-item(12)\n * grid-item(6, 6)\n * grid-item(null, 2, 2)\n * grid-item(6, null, null, 2)\n * grid-item(6, null, null, null, 0, 5)\n */\ngrid-item(\n\t$span=null,\n\t$start=null,\n\t$end=null,\n\t$row-span=null,\n\t$row-start=null,\n\t$row-end=null\n)\n\tif ($span == null) and ($start == null)\n\t\tgrid-column-end span $jig---grid-config.columns\n\telse\n\t\tif $span != null\n\t\t\tgrid-column-end span $span\n\n\t\tif $start != null\n\t\t\tgrid-column-start ($start + 1)\n\n\t\tif ($end != null) and ($span == null)\n\t\t\tgrid-column-end ($end + 1)\n\n\tif ($row-span != null) or ($row-start != null)\n\t\tif $row-span != null\n\t\t\tgrid-row-end span $row-span\n\n\t\tif $row-start != null\n\t\t\tgrid-row-start ($row-start + 1)\n\n\t\tif ($row-end != null) and ($row-span == null)\n\t\t\tgrid-row-end ($row-end + 1)\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * grid-item-align('left')\n * grid-item-align(center, center)\n * grid-item-align(null, 'full')\n */\ngrid-item-align($horizontal=null, $vertical=null)\n\tif $horizontal == 'left'\n\t\t$horizontal = 'start'\n\telse if $horizontal == 'right'\n\t\t$horizontal = 'end'\n\telse if $horizontal == 'middle'\n\t\t$horizontal = 'center'\n\telse if $horizontal == 'full'\n\t\t$horizontal = 'stretch'\n\n\tif $vertical == 'top'\n\t\t$vertical = 'start'\n\telse if $vertical == 'bottom'\n\t\t$vertical = 'end'\n\telse if $vertical == 'middle'\n\t\t$vertical = 'center'\n\telse if $vertical == 'full'\n\t\t$vertical = 'stretch'\n\n\tif $horizontal != null\n\t\tjustify-self unquote($horizontal)\n\n\tif $vertical != null\n\t\talign-self unquote($vertical)\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * +breakpoint(medium)\n *   padding-left gutter-value() * 0.5\n * margin-top gutter-value($direction:'vertical', $breakpoint:'small')\n */\ngutter-value($direction='horizontal', $breakpoint='auto')\n\t$direction = to-str($direction)\n\t$breakpoint = to-str($breakpoint)\n\t$gutter = hash-get-deep($jig---grid-config, 'gutters', $direction)\n\t$res = null\n\n\tif $gutter != null\n\t\tif type($gutter) == 'object'\n\t\t\t$res = breakpoint-value($gutter, $breakpoint)\n\t\telse\n\t\t\t$res = $gutter\n\n\tif $res == null\n\t\terror('jig:gutter-value | could not resolve gutter, check direction and/or breakpoint')\n\n\treturn $res\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint = keys($jig---breakpoint-config)[0]\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n *   => 'medium'\n */\nget-auto-breakpoint()\n\treturn $jig---auto-breakpoint\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Stylus we have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _before_ the block mixin around the block, which results\n * in the block only knowing the breakpoint before the mixin.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * set-auto-breakpoint(medium)\n * +breakpoint(medium)\n *   ...\n */\nset-auto-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\tif $breakpoint in $jig---breakpoint-config\n\t\tdefine('$jig---auto-breakpoint', $breakpoint, true)\n\telse\n\t\terror('jig:set-current-breakpoint | unknown named breakpoint \"'+$breakpoint+'\"')\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: although you may do this manually in Stylus, this is automatically called at the end of the\n * breakpoint mixin, so usually you should be fine with set-auto-breakpoint, without resetting, if you\n * use a breakpoint directly after the call.\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * reset-auto-breakpoint()\n */\nreset-auto-breakpoint()\n\tdefine('$jig---auto-breakpoint', keys($jig---breakpoint-config)[0], true)\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n *   => true\n */\nis-named-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\treturn $breakpoint in $jig---breakpoint-config\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n *   => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n *   => '(max-width: 100rem)'\n */\nbuild-breakpoint-range($min=null, $max=null)\n\t$min-query = ($min != null) ? '(min-width: '+$min+')' : null\n\t$max-query = ($max != null) ? '(max-width: '+$max+')' : null\n\n\treturn str-join(($min-query $max-query), ' and ')\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List<String>} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n *   => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n *   => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n *   => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n *   => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n *   => '(orientation: landscape)'\n */\nbuild-breakpoint-query($breakpoint-definition=0)\n\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t$breakpoint-name = null\n\t$next-breakpoint = null\n\t$min = null\n\t$max = null\n\t$query-em-conversion-base = 16px // this is always 16px, no matter what is defined on <html>\n\n\tif $breakpoint == 'overwrite'\n\t\treturn '(min-width: 0)'\n\telse if ($breakpoint == 'landscape') or ($breakpoint == 'portrait')\n\t\treturn '(orientation: '+$breakpoint+')'\n\telse if type($breakpoint) == 'string'\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\t$breakpoint-name = $breakpoint\n\t\t\t$breakpoint = $jig---breakpoint-config[$breakpoint-name]\n\t\t\t$next-breakpoint = hash-next($jig---breakpoint-config, $breakpoint-name)\n\t\telse\n\t\t\terror('jig:build-breakpoint-query | \"'+$breakpoint-definition+'\" is not a defined breakpoint')\n\n\tif ($breakpoint-name == null) and ($direction == 'only')\n\t\terror('jig:build-breakpoint-query | only named media queries can have an \"only\" range')\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\tif ($direction == 'only') or ($direction == 'up')\n\t\t$min = to-em($breakpoint, $query-em-conversion-base)\n\n\tif ($direction == 'only') or ($direction == 'down')\n\t\tif $breakpoint-name == null\n\t\t\t$max = to-em($breakpoint, $query-em-conversion-base)\n\t\telse if $next-breakpoint-name != null\n\t\t\t$max = to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base)\n\n\tif ($min == 0) and ($max == null)\n\t\t$min = null\n\n\treturn build-breakpoint-range($min, $max)\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List<String>|List<Literal>|List<List<String>>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @see set-auto-breakpoint\n *\n * @example\n * +breakpoint(small)\n *   ...\n * +breakpoint(small down, large up)\n *   ...\n */\nbreakpoint($breakpoint-definitions...)\n\tfor $breakpoint-definition in $breakpoint-definitions\n\t\t$query = build-breakpoint-query($breakpoint-definition)\n\t\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t\t$breakpoint-index = index(keys($jig---breakpoint-config), $breakpoint)\n\t\t$print-breakpoint-index = index(keys($jig---breakpoint-config), $jig---print-breakpoint)\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\tset-auto-breakpoint($breakpoint)\n\n\t\tif $query == ''\n\t\t\t{block}\n\t\telse\n\t\t\tif\t($breakpoint-index != null) and (($breakpoint-index <= $print-breakpoint-index) or ($direction == 'down'))\n\t\t\t\t$media-query = s('print, screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\t\t\telse\n\t\t\t\t$media-query = s('screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\n\t\t// restore initial value after mixin has been rendered\n\t\treset-auto-breakpoint()\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given hash of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Hash} $value - a hash of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n *   {\n *     'small' : 10px,\n *     'medium' : 20px\n *   },\n *   large\n * )\n *   => 20px\n */\nbreakpoint-value($value, $breakpoint='auto')\n\t$breakpoint = to-str($breakpoint)\n\n\tif ($breakpoint != 'auto') and !($breakpoint in $jig---breakpoint-config)\n\t\terror('jig:breakpoint-value | given breakpoint \"'+$breakpoint+'\" not defined')\n\n\tif type($value) == 'object'\n\t\t$res = null\n\n\t\tif $breakpoint == 'auto'\n\t\t\t$breakpoint = get-auto-breakpoint()\n\n\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t$breakpoint-value = $value[$breakpoint-name]\n\n\t\t\tif $breakpoint-value != null\n\t\t\t\t$res = $breakpoint-value\n\n\t\t\tif $breakpoint-name == $breakpoint\n\t\t\t\treturn $res\n\n\t\treturn null\n\telse\n\t\treturn $value\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `[]` or\n * `breakpoint-value` to automatically pull values from breakpoint value hashes.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * attributes-for-breakpoints(\n *   {\n *     'font-size' : 12px,\n *     'line-height' : {\n *       'small' : 1,\n *       'large' : 1.25\n *     },\n *     'margin-top' : {\n *       'small' : 10px,\n *       'medium' : 20px\n *     }\n *   },\n *   2.0\n * )\n */\nattributes-for-breakpoints($attributes, $factor=null)\n\t$attributes-for-breakpoints = {}\n\tfor $attribute-name, $attribute-value in $attributes\n\t\tif type($attribute-value) != 'object'\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\t\telse\n\t\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t\t$breakpoint-value = $attribute-value[$breakpoint-name]\n\t\t\t\tif ($breakpoint-value != null) or (type($breakpoint-value) == 'call')\n\t\t\t\t\tif !($breakpoint-name in $attributes-for-breakpoints)\n\t\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name] = {}\n\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name][$attribute-name] = $breakpoint-value;\n\n\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t$breakpoint-attributes = $attributes-for-breakpoints[$breakpoint-name]\n\t\tif ($breakpoint-attributes != null) and (length($breakpoint-attributes) > 0)\n\t\t\t+breakpoint($breakpoint-name)\n\t\t\t\tfor $attribute-name, $attribute-value in $breakpoint-attributes\n\t\t\t\t\tif $factor == null\n\t\t\t\t\t\t{$attribute-name} $attribute-value\n\t\t\t\t\telse\n\t\t\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * attribute-for-breakpoints(\n *   'line-height',\n *   {\n *     'small' : 1,\n *     'large' : 1.25\n *   },\n *   1.0\n * )\n */\nattribute-for-breakpoints($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\tattributes-for-breakpoints($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * overwrite-breakpoint-for-attributes(\n *   {\n *     'font-size' : 12px,\n *     'line-height' : 1.25\n *     'margin-top' : 20px\n *   },\n *   2.0\n * )\n */\noverwrite-breakpoint-for-attributes($attributes, $factor=null)\n\t+breakpoint('overwrite')\n\t\tfor $attribute-name, $attribute-value in $attributes\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * overwrite-breakpoint-for-attribute(font-size, 12px, 2.0)\n */\noverwrite-breakpoint-for-attribute($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\toverwrite-breakpoint-for-attributes($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * +overwrite-breakpoint()\n *   font-size 12xp\n *   margin-top 20px\n */\noverwrite-breakpoint()\n\t+breakpoint('overwrite')\n\t\t{block}\n","/**\n * @namespace Content\n */\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * content-holder()\n */\ncontent-holder($padded=true, $centered=false)\n\t$breakpoint-names = keys($jig---breakpoint-config)\n\t$smallest-breakpoint = $breakpoint-names[0]\n\t$largest-breakpoint = last($breakpoint-names)\n\n\t$min-width = content-width-value('min')\n\t$max-width = content-width-value('max')\n\n\tif $min-width != null\n\t\tmin-width ($min-width + (2 * content-padding-value($smallest-breakpoint)))\n\n\tif $max-width != null\n\t\tmax-width ($max-width + (2 * content-padding-value($largest-breakpoint)))\n\n\tif $centered\n\t\tmargin-right auto\n\t\tmargin-left auto\n\n\tif $padded\n\t\t$content-padding = $jig---content-config.padding\n\n\t\tif $content-padding != null\n\t\t\tattributes-for-breakpoints({\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t})\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * breakpoint(medium)\n *   padding-left content-padding-value()\n * margin-right content-padding-value($breakpoint:'small')\n */\ncontent-padding-value($breakpoint='auto')\n\t$padding = $jig---content-config.padding\n\t$res = null\n\n\tif $padding != null\n\t\tif type($padding) == 'object'\n\t\t\t$res = breakpoint-value($padding, $breakpoint)\n\t\telse\n\t\t\t$res = $padding\n\n\tif $res == null\n\t\terror('jig:content-padding-value | could not resolve content padding, check breakpoint')\n\n\treturn $res\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width content-width-value()\n * min-width content-width-value('min', 0)\n */\ncontent-width-value($min-max='max', $default=null)\n\t$width = $jig---content-config.max-width\n\tif $min-max == 'min'\n\t\t$width = $jig---content-config.min-width\n\n\tif $width == null\n\t\t$width = $default\n\n\treturn $width\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size base-font-size-value()\n */\nbase-font-size-value()\n\treturn $jig---base-font-size\n"]}
\ No newline at end of file
diff --git a/docs/examples/scss-legacy/examples.scss b/docs/examples/scss-legacy/examples.scss
index 151087e..768bfc1 100644
--- a/docs/examples/scss-legacy/examples.scss
+++ b/docs/examples/scss-legacy/examples.scss
@@ -235,7 +235,7 @@
 					@include grid-item(4);
 					@include grid-item-align(null, end);
 
-					height: gutter-value(2.5, $direction:'vertical');
+					height: gutter-value($direction:'vertical') * 2.5;
 				}
 
 				&:nth-of-type(even){
@@ -274,7 +274,7 @@
 						order: 5;
 
 						width: 50%;
-						height: gutter-value(3.0);
+						height: gutter-value() * 3;
 					}
 
 					&:nth-of-type(2){
@@ -403,17 +403,17 @@
 
 					@include spacing-based-attribute('height', 'xxl', 3.0);
 
-					margin: gutter-value(-1.0);
+					margin: gutter-value() * -1;
 					margin-bottom: 0;
 
 					@include breakpoint(medium){
-						margin: gutter-value(-1.0);
-						margin-bottom: gutter-value(-3, $direction:vertical);
+						margin: gutter-value() * -1;
+						margin-bottom: gutter-value($direction:vertical) * -3;
 					}
 
 					@include breakpoint(large){
-						margin: gutter-value(-1.0);
-						margin-bottom: gutter-value(-3, $direction:vertical);
+						margin: gutter-value() * -1;
+						margin-bottom: gutter-value($direction:vertical) * -3;
 					}
 				}
 
@@ -469,7 +469,7 @@
 
 						&:nth-of-type(3),
 						&:nth-of-type(4){
-							margin-top: gutter-value(-1, $direction:vertical);
+							margin-top: gutter-value($direction:vertical) * -1;
 						}
 					}
 
@@ -527,7 +527,7 @@
 					@include grid-item($start:1, $end:11);
 					order: 4;
 
-					margin-top: gutter-value(-0.5, $direction:'vertical');
+					margin-top: gutter-value($direction:'vertical') * -0.5;
 
 					@include breakpoint(medium){
 						@include grid-item(8, $start:0);
@@ -552,17 +552,17 @@
 						'padding-top' : 'md',
 						'padding-bottom' : 'xl'
 					));
-					margin: gutter-value(-1);
-					margin-top: gutter-value(1, $direction:vertical);
+					margin: gutter-value() * -1;
+					margin-top: gutter-value($direction:vertical);
 
 					@include breakpoint(medium){
-						margin: gutter-value(-1);
-						margin-top: gutter-value(2, $direction:vertical);
+						margin: gutter-value() * -1;
+						margin-top: gutter-value($direction:vertical) * 2;
 					}
 
 					@include breakpoint(large){
-						margin: gutter-value(-1);
-						margin-top: gutter-value(2.5, $direction:vertical);
+						margin: gutter-value() * -1;
+						margin-top: gutter-value($direction:vertical) * 2.5;
 					}
 				}
 			}
diff --git a/docs/examples/scss/examples.scss b/docs/examples/scss/examples.scss
index 4d7de22..1d86c2a 100644
--- a/docs/examples/scss/examples.scss
+++ b/docs/examples/scss/examples.scss
@@ -241,7 +241,7 @@
 						@include grid-item(4);
 						@include grid-item-align(null, end);
 
-						height: gutter-value(2.5, $direction:'vertical');
+						height: gutter-value($direction:'vertical') * 2.5;
 					}
 
 					&:nth-of-type(even){
@@ -280,7 +280,7 @@
 							order: 5;
 
 							width: 50%;
-							height: gutter-value(3.0);
+							height: gutter-value() * 3;
 						}
 
 						&:nth-of-type(2){
@@ -409,17 +409,17 @@
 
 						@include spacing-based-attribute('height', 'xxl', 3.0);
 
-						margin: gutter-value(-1.0);
+						margin: gutter-value() * -1;
 						margin-bottom: 0;
 
 						@include breakpoint(medium){
-							margin: gutter-value(-1.0);
-							margin-bottom: gutter-value(-3, $direction:vertical);
+							margin: gutter-value() * -1;
+							margin-bottom: gutter-value($direction:vertical) * -3;
 						}
 
 						@include breakpoint(large){
-							margin: gutter-value(-1.0);
-							margin-bottom: gutter-value(-3, $direction:vertical);
+							margin: gutter-value() * -1;
+							margin-bottom: gutter-value($direction:vertical) * -3;
 						}
 					}
 
@@ -476,7 +476,7 @@
 
 							&:nth-of-type(3),
 							&:nth-of-type(4){
-								margin-top: gutter-value(-1, $direction:vertical);
+								margin-top: gutter-value($direction:vertical) * -1;
 							}
 						}
 
@@ -534,7 +534,7 @@
 						@include grid-item($start:1, $end:11);
 						order: 4;
 
-						margin-top: gutter-value(-0.5, $direction:'vertical');
+						margin-top: gutter-value($direction:'vertical') * -0.5;
 
 						@include breakpoint(medium){
 							@include grid-item(8, $start:0);
@@ -559,17 +559,17 @@
 							'padding-top' : 'md',
 							'padding-bottom' : 'xl'
 						));
-						margin: gutter-value(-1);
-						margin-top: gutter-value(1, $direction:vertical);
+						margin: gutter-value() * -1;
+						margin-top: gutter-value($direction:vertical);
 
 						@include breakpoint(medium){
-							margin: gutter-value(-1);
-							margin-top: gutter-value(2, $direction:vertical);
+							margin: gutter-value() * -1;
+							margin-top: gutter-value($direction:vertical) * 2;
 						}
 
 						@include breakpoint(large){
-							margin: gutter-value(-1);
-							margin-top: gutter-value(2.5, $direction:vertical);
+							margin: gutter-value() * -1;
+							margin-top: gutter-value($direction:vertical) * 2.5;
 						}
 					}
 				}
diff --git a/docs/examples/stylus/defines.styl b/docs/examples/stylus/defines.styl
index 52b8a28..8d4e118 100644
--- a/docs/examples/stylus/defines.styl
+++ b/docs/examples/stylus/defines.styl
@@ -51,8 +51,8 @@ $JIG_CONFIG = {
 	'content' : {
 		'padding' : {
 			'xsmall' : 15px,
-			'medium' : 35px,
-			'large' : 50px,
+			'small' : 35px,
+			'medium' : 50px,
 			'xlarge' : 60px
 		},
 		'min-width' : 360px - (2 * 15px),
diff --git a/docs/examples/stylus/examples.styl b/docs/examples/stylus/examples.styl
index d7ecbd4..ff2a1be 100644
--- a/docs/examples/stylus/examples.styl
+++ b/docs/examples/stylus/examples.styl
@@ -200,7 +200,7 @@ $example-grid
 					grid-item(4)
 					grid-item-align(null, end)
 
-					height gutter-value(2.5, $direction:'vertical')
+					height gutter-value($direction:'vertical') * 2.5
 
 				&:nth-of-type(even)
 					grid-item(4)
@@ -233,7 +233,7 @@ $example-grid
 						order 5
 
 						width 50%
-						height gutter-value(3.0)
+						height gutter-value() * 3.0
 
 					&:nth-of-type(2)
 						grid-item($start:8, $end:12)
@@ -344,17 +344,17 @@ $example-grid
 
 					spacing-based-attribute('height', 'xxl', 3.0)
 
-					margin gutter-value(-1.0)
+					margin gutter-value() * -1
 					margin-bottom 0
 
 					+breakpoint(medium)
-						margin gutter-value(-1.0, $breakpoint:medium)
-						margin-bottom gutter-value(-3, $breakpoint:medium, $direction:vertical)
+						margin gutter-value($breakpoint:medium) * -1
+						margin-bottom gutter-value($breakpoint:medium, $direction:vertical) * -3
 
 					set-auto-breakpoint(large)
 					+breakpoint(large)
-						margin gutter-value(-1.0)
-						margin-bottom gutter-value(-3, $direction:vertical)
+						margin gutter-value() * -1
+						margin-bottom gutter-value($direction:vertical) * -3
 
 
 
@@ -401,7 +401,7 @@ $example-grid
 
 						&:nth-of-type(3)
 						&:nth-of-type(4)
-							margin-top gutter-value(-1, $direction:vertical)
+							margin-top gutter-value($direction:vertical) * -1
 
 
 
@@ -448,7 +448,7 @@ $example-grid
 					grid-item($start:1, $end:11)
 					order 4
 
-					margin-top gutter-value(-0.5, $direction:'vertical')
+					margin-top gutter-value($direction:'vertical') * -0.5
 
 					+breakpoint(medium)
 						grid-item(8, $start:0)
@@ -469,14 +469,14 @@ $example-grid
 						'padding-top' : 'md',
 						'padding-bottom' : 'xl'
 					})
-					margin gutter-value(-1)
-					margin-top gutter-value(1, $direction:vertical)
+					margin gutter-value() * -1
+					margin-top gutter-value($direction:vertical)
 
 					+breakpoint(medium)
-						margin gutter-value(-1, $breakpoint:medium)
-						margin-top gutter-value(2, $breakpoint:medium, $direction:vertical)
+						margin gutter-value($breakpoint:medium) * -1
+						margin-top gutter-value($breakpoint:medium, $direction:vertical) * 2
 
 					set-auto-breakpoint(large)
 					+breakpoint(large)
-						margin gutter-value(-1)
-						margin-top gutter-value(2.5, $direction:vertical)
+						margin gutter-value() * -1
+						margin-top gutter-value($direction:vertical) * 2.5
diff --git a/package.json b/package.json
index 2ef7a71..9a869ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name" : "@oktarintentakel/jig",
-	"version" : "0.1.11-beta",
+	"version" : "0.1.12-beta",
 	"author" : "Sebastian Schlapkohl",
 	"description" : "A \"foundationish\" grid solution for SCSS and Stylus with native CSS grid and sane defaults and helpers for responsive websites.",
 	"license" : "MIT",
diff --git a/source/scss-legacy/jig/grid.scss b/source/scss-legacy/jig/grid.scss
index 5214764..4102d73 100644
--- a/source/scss-legacy/jig/grid.scss
+++ b/source/scss-legacy/jig/grid.scss
@@ -187,8 +187,6 @@
  * @name gutter-value
  * @alias gutter-value
  *
- * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example
- * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract
  * @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
  * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
  * @returns {Number} the determined gutter value with applied factor and/or addition
@@ -196,11 +194,11 @@
  *
  * @example
  * \@include breakpoint(medium){
- *   padding-left: gutter-value(0.5);
+ *   padding-left: gutter-value() * 0.5;
  * }
  * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');
  */
-@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){
+@function gutter-value($direction:'horizontal', $breakpoint:'auto'){
 	$gutter: map-get-deep($jig---grid-config, 'gutters', $direction);
 	$res: null;
 
@@ -216,5 +214,5 @@
 		@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';
 	}
 
-	@return ($res * $factor) + $add;
+	@return $res;
 }
diff --git a/source/scss/jig/grid.scss b/source/scss/jig/grid.scss
index 761a18d..9d79ac2 100644
--- a/source/scss/jig/grid.scss
+++ b/source/scss/jig/grid.scss
@@ -196,8 +196,6 @@
  * @name gutter-value
  * @alias gutter-value
  *
- * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example
- * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract
  * @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
  * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
  * @returns {Number} the determined gutter value with applied factor and/or addition
@@ -205,11 +203,11 @@
  *
  * @example
  * \@include breakpoint(medium){
- *   padding-left: gutter-value(0.5);
+ *   padding-left: gutter-value() * 0.5;
  * }
  * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');
  */
-@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){
+@function gutter-value($direction:'horizontal', $breakpoint:'auto'){
 	$gutter: map.get($jig---grid-config, 'gutters', $direction);
 	$res: null;
 
@@ -225,5 +223,5 @@
 		@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';
 	}
 
-	@return ($res * $factor) + $add;
+	@return $res;
 }
diff --git a/source/stylus/jig/grid.styl b/source/stylus/jig/grid.styl
index c3d11fa..b6b26da 100644
--- a/source/stylus/jig/grid.styl
+++ b/source/stylus/jig/grid.styl
@@ -172,8 +172,6 @@ grid-item-align($horizontal=null, $vertical=null)
  * @name gutter-value
  * @alias gutter-value
  *
- * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example
- * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract
  * @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
  * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
  * @returns {Number} the determined gutter value with applied factor and/or addition
@@ -181,15 +179,10 @@ grid-item-align($horizontal=null, $vertical=null)
  *
  * @example
  * +breakpoint(medium)
- *   padding-left gutter-value(0.5)
+ *   padding-left gutter-value() * 0.5
  * margin-top gutter-value($direction:'vertical', $breakpoint:'small')
  */
-gutter-value(
-	$factor=1.0,
-	$add=0,
-	$direction='horizontal',
-	$breakpoint='auto'
-)
+gutter-value($direction='horizontal', $breakpoint='auto')
 	$direction = to-str($direction)
 	$breakpoint = to-str($breakpoint)
 	$gutter = hash-get-deep($jig---grid-config, 'gutters', $direction)
@@ -204,4 +197,4 @@ gutter-value(
 	if $res == null
 		error('jig:gutter-value | could not resolve gutter, check direction and/or breakpoint')
 
-	return ($res * $factor) + $add
+	return $res