mp-design-system 1.2.61 → 1.2.63

package/src/prototype/range.njk

@@ -13,6 +13,7 @@ tagTitle: Range
 {% from "components/comparison-table/macro.njk" import comparisonTable %}
 {% from "components/hero/macro.njk" import hero %}
 
+{% from "components/product-card/macro.njk" import productCardNew %}
 {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
 
 {% extends "page.njk" %}
@@ -95,14 +96,18 @@ tagTitle: Range
 
 <div id="products" class="u-pad-y-xl" style="scroll-margin-top:70px">
   <div class="o-grid o-grid--of-three u-wrap">
-    {{ productCard({
-      title: 'Mastersizer 3000',
-      description: 'Delivering the data you need for outcomes you can trust',
+    {{ productCardNew({
+      type: 'product',
+      theme: 'bordered',
+      header: {
+        title: 'Mastersizer 3000',
+        subtitle: 'Delivering the data you need for outcomes you can trust'
+      },
       image: {
         src: '/static/img/range-product-1.jpg',
         alt: ''
       },
-      features: [
+      list: [
         {
           icon: 'tick',
           label: 'Particle size range from 0.01 to 3500µm'
@@ -124,23 +129,28 @@ tagTitle: Range
         buttons: [
           {
             link: '#',
-            label: 'More details'
+            label: 'View product'
           },
           {
             link: '/prototype/request-a-quote',
-            label: 'Request a quote'
+            label: 'Request a quote',
+            colour: 'outline-green'
           }
         ]
       }
     }) }}
-    {{ productCard({
-      title: 'Mastersizer 3000E',
-      description: 'Entry level particle size analyzer',
+    {{ productCardNew({
+      type: 'product',
+      theme: 'bordered',
+      header: {
+        title: 'Mastersizer 3000E',
+        subtitle: 'Entry level particle size analyzer'
+      },
       image: {
         src: '/static/img/range-product-1.jpg',
         alt: ''
       },
-      features: [
+      list: [
         {
           icon: 'tick',
           label: 'Particle size range from 0.1 to 1000µm'
@@ -162,11 +172,12 @@ tagTitle: Range
         buttons: [
           {
             link: '#',
-            label: 'More details'
+            label: 'View product'
           },
           {
             link: '/prototype/request-a-quote',
-            label: 'Request a quote'
+            label: 'Request a quote',
+            colour: 'outline-green'
           }
         ]
       }

package/dist/build/arc.abe174a6.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity=".075"><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs><g clip-path="url('#a')"><g stroke="#3D7B87"><path d="M388.57 203.44c40.74 9.94 66.77 48.93 58.38 88.2-8.38 39.27-48.05 64.23-89.3 56.67"/><path d="M402.01 140.47c2.72.35 5.43.82 8.15 1.4 56.13 11.98 91.68 68.3 79.4 125.79-12.27 57.5-67.72 94.39-123.84 82.4a98.78 98.78 0 0 1-8.01-2.04"/><path d="M432.3-1.42c3.09.5 6.18 1.08 9.27 1.74 97.39 20.78 159.62 115.91 139.01 212.47-20.6 96.55-116.27 157.98-213.65 137.19a183 183 0 0 1-9.17-2.2"/><path d="M359.04 347.92c50.87 14.25 81.93 69.05 69.9 125.41-9.2 43.08-41 75.04-78.8 84.26"/><path d="M358.75 349.03a75.38 75.38 0 0 1-15.33 143.5m472.91-210.11c-136.88 72.26-297.27 99.23-458.69 65.9"/><path d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path d="M730.15 434.78c20.26-94.9-46.81-189.74-149.9-211.75-103.1-22-203.05 37.17-223.31 132.09-20.26 94.9 46.8 189.74 149.9 211.75 103.1 22 203.05-37.17 223.3-132.09Z"/><path d="M565.63 393.51c11.4-53.42-25.74-106.7-83.05-118.93-57.32-12.24-112.98 21.23-124.38 74.65-11.41 53.43 25.74 106.7 83.05 118.94 57.31 12.23 112.98-21.23 124.38-74.66Z"/><path d="M507.87 381.04c8.07-37.81-18.83-75.68-60.2-84.5-41.36-8.84-81.37 14.74-89.44 52.55-8.08 37.81 18.82 75.68 60.19 84.51 41.36 8.83 81.38-14.75 89.45-52.56Z"/><path d="M668.34-16.28c-164.89 90.43-279.7 223.03-314.5 386.05-34.6 162.08 15.29 329 127.5 478.23"/><path d="M482.38 560.08c20.96-98.17-37.75-193.87-131.07-213.79-93.33-19.92-186 43.46-206.95 141.63-20.96 98.18 37.75 193.87 131.07 213.8 93.33 19.92 186-43.47 206.95-141.64Z"/></g><g fill="#3D7B87"><circle cx="545.73" cy="65.7" r="6.7" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5" cy="6.18" rx="5" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" rx="5" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" rx="5" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g></g></svg>

package/dist/build/concentric.465e6b4d.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="1012" fill="none"><g stroke="#3D7B87" opacity=".1"><circle cx="641" cy="506" r="80"/><circle cx="641" cy="506" r="20"/><circle cx="641" cy="506" r="160"/><circle cx="641" cy="506" r="240"/><circle cx="641" cy="506" r="320"/><circle cx="641" cy="506" r="400"/><circle cx="641" cy="506" r="480"/><circle cx="641" cy="506" r="560"/><circle cx="641" cy="506" r="640"/></g></svg>

package/dist/build/crystal.8300dbe3.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity=".075"><defs><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath><style>.a{fill:#3d7b87}</style></defs><g clip-path="url('#a')"><g stroke="#3D7B87"><path d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path d="m93 259-62 61 20 77 82 14 62-62-19-76M91 548l62-62 81 15 20 75-62 62-82-15-19-75Zm146-335 82 14 62-62-20-76-82-15-62 62m59 228 62-62 82 14 20 76-62 62-82-15-20-75Zm0 0-82-14"/><path d="m296 439-63 62m145-48 20 77-62 61-83-14m127-411 82 14 62-62-19-76-83-15-62 62m79 304 82 14 63-62-20-76-82-14-63 61m43-137 20 76m-144 48-20-77"/><path d="m521 406 20 77-62 61-82-14M41 177l23 4m69-66-6-21m73 572-6-22m82-576-5-21m72 572-5-22m82-576-6-21m73 572-6-22M0 314l23 4m37 222 23 4M510 36l39-37M85 649l18-17M27 420l17-17"/></g><g fill="#3d7b87"><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 205 131)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 263 359)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 268 68)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 327 295)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 306 221)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 364 449)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 324 585)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 181 631)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 60 179)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 121 405)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 125 115)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 183 343)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 39 390)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 161 269)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 19 315)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 223 494)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 80 541)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 347 84)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 407 311)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 410 22)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 470 249)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 449 175)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 508 401)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 465 539)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 493 36)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 225 205)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 284 433)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 241 571)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 98 618)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 81 253)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 141 481)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 369 158)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 428 385)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 385 523)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 511 113)"/></g></g></svg>

package/dist/build/dots-pattern.1bae0e23.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none"><g stroke="#3D7B87" opacity=".1"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>

package/dist/build/js/app.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["src/assets/js/imports/accordion.js","src/assets/js/imports/carousel.js","src/assets/js/imports/clear-form.js","src/assets/js/imports/comparison.js","src/assets/js/imports/facet.js","src/assets/js/imports/gallery.js","src/assets/js/imports/utilities.js","src/assets/js/imports/hero-pattern.js","src/assets/js/imports/hero-video.js","src/assets/js/imports/hotspot-image.js","src/assets/js/imports/internal-nav.js","src/assets/js/imports/off-canvas.js","src/assets/js/imports/responsive-table.js","src/assets/js/imports/scrollbar-width.js","src/assets/js/imports/scroll-spy.js","src/assets/js/imports/tabs.js","src/assets/js/app.js"],"sourcesContent":["function Accordion() {\r\n    const accordions = Array.from(document.querySelectorAll('.c-accordion__title'));\r\n    accordions.forEach(setupAccordions);\r\n}\r\n\r\nfunction setupAccordions(title) {\r\n    title.addEventListener('click', titleClick())\r\n}\r\n\r\nfunction titleClick() {\r\n    return (event) => {\r\n        var item = event.currentTarget.parentElement;\r\n        item.classList.toggle('c-accordion__item--open');\r\n    }\r\n}\r\n\r\nexport default Accordion;\r\n","function Carousel() {\r\n  let current = 0;\r\n  const bgSlides = document.querySelectorAll('.c-hero__image-bg');\r\n  const fgSlides = document.querySelectorAll('.c-hero__image-fg');\r\n\r\n  if(fgSlides.length > 0) {\r\n    setInterval(() => {\r\n      for (var bgSlide of bgSlides) {\r\n        bgSlide.style.opacity = 0;\r\n      }\r\n      current = (current != bgSlides.length - 1) ? current + 1 : 0;\r\n      bgSlides[current].style.opacity = 1;\r\n      \r\n      for (var fgSlide of fgSlides) {\r\n        fgSlide.style.opacity = 0;\r\n      }\r\n      fgSlides[current].style.opacity = 1;\r\n    }, 5000);\r\n  }\r\n}\r\n\r\nexport default Carousel;","function ClearForm() {\r\n  const formClear = document.getElementById('clearForm');\r\n  if (formClear) {\r\n    formClear.addEventListener('click', function () {\r\n      const fields = this.closest('form').elements;\r\n      fields.forEach(field => {\r\n        if (field.value != '') {\r\n          if (\r\n            field.type.toLowerCase() == 'text' || \r\n            field.type.toLowerCase() == 'email' || \r\n            field.type.toLowerCase() == 'tel' || \r\n            field.type.toLowerCase() == 'select-one' || \r\n            field.type.toLowerCase() == 'textarea'\r\n            ) {\r\n            field.value = '';\r\n            return;\r\n          } else if (field.type.toLowerCase() == 'checkbox') {\r\n            field.checked = false;\r\n            return;\r\n          }\r\n        }\r\n      });\r\n    });\r\n  };\r\n}\r\n\r\nexport default ClearForm;","function Comparison() {\r\n  document.querySelectorAll('.c-comparison-table').forEach(extractMobileComparison)\r\n}\r\n\r\nfunction extractMobileComparison(container) {\r\n  const parent = container.parentNode.parentNode;\r\n  const body = parent.querySelector('.c-comparison-table tbody');\r\n  const head = parent.querySelector('.c-comparison-table thead');\r\n  const mobile = parent.parentElement.querySelector('.c-comparison-table__mobile');\r\n\r\n  if (!body || !head || !mobile) return;\r\n\r\n  // Remove empty corner piece  \r\n  const productsInfo = Array.from(head.children[0].children).filter((x, i) => i).map(x => ({ info: x.innerHTML }));\r\n  const productsButtons = Array.from(head.children[1].children).filter((x, i) => i).map(x => ({ buttons: x.innerHTML }));\r\n  const products = productsInfo.map((info, index) => ({ ...info, ...productsButtons[index], table: [] }));\r\n\r\n  Array.from(body.children).forEach(row => {\r\n    // For table row headers, push to all products\r\n    if (row.classList.contains('c-comparison-table__title')) {\r\n      products.forEach(x => {\r\n        x.table.push({ type: 'title', title: row.children[0].textContent })\r\n      })\r\n    } else {\r\n      // For all others, loop the cells and push to their appropriate parent\r\n      const cells = Array.from(row.children);\r\n      const firstCell = cells.shift();\r\n\r\n      cells.forEach((el, index) => {\r\n        products[index].table.push({\r\n          type: 'row',\r\n          key: firstCell.textContent,\r\n          value: el.innerHTML\r\n        })\r\n      })\r\n    }\r\n  })\r\n\r\n  products.forEach(product => {\r\n    const el = createMobileProduct(product);\r\n    mobile.appendChild(el)\r\n  })\r\n}\r\n\r\nfunction createMobileProduct(product) {\r\n  const parent = document.createElement('article');\r\n  parent.innerHTML = `${product.info}${product.buttons}\r\n  <table class=\"c-comparison-table\">\r\n    ${product.table.map(x => {\r\n      if (x.type === 'title') {\r\n        return `<tr class=\"c-comparison-table__title\"><th><span>${x.title}</span></th><th></th></tr>`;\r\n      } else {\r\n        return `<tr>\r\n          <td>${x.key}</td>\r\n          <td>${x.value}</td>\r\n        </tr>`;\r\n      }\r\n    }).join('')}\r\n  </table>`;\r\n\r\n  return parent;\r\n}\r\n\r\nexport default Comparison;\r\n","function Facet() {\r\n    const facetAccordions = Array.from(document.querySelectorAll('.c-facet__toggle'));\r\n    facetAccordions.forEach(setupFacetAccordions);\r\n}\r\n\r\nfunction setupFacetAccordions(toggle) {\r\n    toggle.addEventListener('click', titleClick())\r\n}\r\n\r\nfunction titleClick() {\r\n    return (event) => {\r\n        event.preventDefault();\r\n        \r\n        var toggle = event.currentTarget;\r\n        var facet = toggle.parentElement;\r\n\r\n        facet.classList.toggle('c-facet--open');\r\n        const expanded = facet.classList.contains('c-facet--open') ? 'true' : 'false';\r\n        toggle.setAttribute('aria-expanded', expanded);\r\n    }\r\n}\r\n\r\nexport default Facet;\r\n","function Gallery() {\r\n  const mainSlides = document.querySelectorAll('.c-gallery__main .c-gallery__slide');\r\n  const thumbnailSlides = document.querySelectorAll('.c-gallery__thumbnails .c-gallery__slide');\r\n\r\n  thumbnailSlides.forEach(thumbnailSlide => thumbnailSlide.addEventListener('click', function(e) {\r\n    thumbnailSlides.forEach(function(thumbnail) {\r\n      if(thumbnail != e.target.parentNode) {\r\n        thumbnail.classList.remove('active');\r\n      }\r\n    });\r\n    e.target.parentNode.classList.add('active');\r\n\r\n    mainSlides.forEach(function(mainSlide) {\r\n      if(mainSlide.dataset.slide == thumbnailSlide.dataset.slide) {\r\n        mainSlide.classList.add('active');\r\n      } else {\r\n        mainSlide.classList.remove('active');\r\n      }\r\n    });\r\n  }));\r\n\r\n  mainSlides.forEach(function(mainSlide) {\r\n    if(!mainSlide.classList.contains('c-gallery__video')) {\r\n      mainSlide.addEventListener('click', lightboxTrigger);\r\n    }\r\n  });\r\n\r\n  function lightboxTrigger() {\r\n    const lightbox = document.querySelector('.c-gallery__main').cloneNode(true);\r\n    lightbox.classList.remove('c-gallery__main');\r\n    lightbox.classList.add('c-lightbox');\r\n    lightbox.querySelectorAll('.c-gallery__slide').forEach(function(slide) {\r\n      if(slide.classList.contains('c-gallery__video')) {\r\n        slide.remove();\r\n      }\r\n      if(!slide.classList.contains('c-gallery__video')) {\r\n        var slideImg = slide.querySelector('img');\r\n        if(slideImg.srcset != '') {\r\n          slideImg.removeAttribute('srcset');\r\n        }\r\n        var slideImgSrc = slideImg.getAttribute('src');\r\n        if (slideImgSrc) {\r\n          if (slideImgSrc.indexOf('?') !== -1) {\r\n            slideImg.setAttribute('src', slideImgSrc.split(\"?\")[0] + '?quality=90&width=2176');\r\n          } else {\r\n            slideImg.setAttribute('src', slideImgSrc + '?quality=90&width=2176');\r\n          }\r\n        } else {\r\n          console.log(slideImg);\r\n          console.log('has no src defined...');\r\n        }\r\n      }\r\n      slide.classList.add('c-lightbox__slide');\r\n      slide.classList.remove('c-gallery__slide');\r\n    });\r\n    document.body.appendChild(lightbox);\r\n    lightbox.insertAdjacentHTML('beforeend', '<a class=\"c-lightbox__prev\"></a><a class=\"c-lightbox__next\"></a>');\r\n\r\n    lightbox.querySelector('.c-lightbox__prev').addEventListener('click', function() {\r\n      const lightboxActive = lightbox.querySelector('.active');\r\n      const prevImage = lightbox.querySelector('[data-slide=\"' + (parseInt(lightboxActive.dataset.slide) - 1) + '\"]');\r\n      if(prevImage != null) {\r\n        lightboxActive.classList.remove('active');\r\n        prevImage.classList.add('active');\r\n      }\r\n    });\r\n\r\n    lightbox.querySelector('.c-lightbox__next').addEventListener('click', function() {\r\n      const lightboxActive = lightbox.querySelector('.active');\r\n      const nextImage = lightbox.querySelector('[data-slide=\"' + (parseInt(lightboxActive.dataset.slide) + 1) + '\"]');\r\n      if(nextImage != null) {\r\n        lightboxActive.classList.remove('active');\r\n        nextImage.classList.add('active');\r\n      }\r\n    });\r\n\r\n    lightbox.addEventListener('click', function(e) {\r\n      if (e.target !== e.currentTarget) {\r\n        return;\r\n      } else {\r\n        lightbox.remove();\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nexport default Gallery;\r\n","export function shuffle(array) {\r\n  const arr = [...array];\r\n  for (let i = arr.length - 1; i > 0; i--) {\r\n    let j = Math.floor(Math.random() * (i + 1));\r\n    [arr[i], arr[j]] = [arr[j], arr[i]];\r\n  }\r\n\r\n  return arr;\r\n}\r\n\r\nexport function userPrefersReducedMotion() {\r\n  const QUERY = '(prefers-reduced-motion: no-preference)';\r\n  const mediaQueryList = window.matchMedia(QUERY);\r\n  const prefersReducedMotion = !mediaQueryList.matches;\r\n  return prefersReducedMotion;\r\n}\r\n\r\nexport const debounce = (func, limit) => {\r\n  let wait = false; \r\n  return () => {\r\n      if (wait) return;\r\n      func();\r\n      wait = true;\r\n      setTimeout(() => wait = false, limit);\r\n  }\r\n}\r\n\r\nexport const lerp = (x, y, a) => x * (1 - a) + y * a;\r\nexport const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));\r\nexport const invlerp = (x, y, a) => clamp((a - x) / (y - x));\r\nexport const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a));\r\n","import { range, shuffle, userPrefersReducedMotion } from './utilities';\r\n\r\nfunction HeroPattern() {\r\n  let time = 0;\r\n\r\n  const c = document.querySelector('.c-hero__canvas');\r\n  if (!c) return;\r\n  const ctx = c.getContext(\"2d\");\r\n  \r\n  const sineColour = \"rgb(19,170,19)\";\r\n  const reduceMotion = userPrefersReducedMotion();\r\n\r\n  const crossGap = 147;\r\n  const minimumOpacity = 0;\r\n  const maximumOpacity = 0.5;\r\n  const crossSpeed = 0.25;\r\n\r\n  let width;\r\n  let height;\r\n  let across;\r\n  let down;\r\n  let crosses = [];\r\n  let totalPoints;\r\n\r\n  function draw() {\r\n    // Sine wave\r\n    time = time + 0.005;\r\n    \r\n    ctx.clearRect(0, 0, c.width, c.height);\r\n    ctx.beginPath();\r\n  \r\n    for(let cnt = c.width; cnt > 0; cnt--) {\r\n      ctx.lineTo(cnt, c.height * 0.5 - (Math.cos(time + cnt / 5 * 0.03) * (height * 0.3) ));\r\n    }\r\n  \r\n    ctx.lineWidth = 0.5;\r\n    ctx.strokeStyle = sineColour;\r\n    ctx.stroke();\r\n  \r\n    // Crosses\r\n    crosses.forEach(cross => {\r\n      drawCross(cross.x, cross.y, range(0, crosses.length, minimumOpacity, maximumOpacity, cross.counter));\r\n  \r\n      cross.counter += cross.direction;\r\n      if (cross.counter >= crosses.length) cross.direction = -1 * crossSpeed;\r\n      if (cross.counter < 0) cross.direction = crossSpeed;\r\n    })\r\n  \r\n    if (!reduceMotion) {\r\n      window.requestAnimationFrame(draw);\r\n    }\r\n  }\r\n  \r\n  function onResize() {\r\n    width = c.scrollWidth;\r\n    height = c.scrollHeight;\r\n  \r\n    ctx.canvas.width  = width;\r\n    ctx.canvas.height = height;\r\n  \r\n    across = Math.ceil(width / crossGap);\r\n    down = Math.ceil(height / crossGap);\r\n  \r\n    totalPoints = (across + 1) * (down + 1);\r\n    const ids = shuffle(Array.from({ length: totalPoints }, (_, i) => (i)))\r\n    crosses = [];\r\n    for(let x = 0; x <= across; x++) {\r\n      for(let y = 0; y <= down; y++) {\r\n        crosses.push({\r\n          counter: ids.shift(),\r\n          direction: Math.random() > 0.5 ? crossSpeed : -1 * crossSpeed,\r\n          x: crossGap * (x + 1) - crossGap / 1,\r\n          y: crossGap * (y + 1) - crossGap / 2\r\n        });\r\n      }\r\n    }\r\n  }\r\n  \r\n  function drawCross(x, y, opacity) {\r\n    ctx.beginPath();\r\n    ctx.moveTo(x - 14, y);\r\n    ctx.lineTo(x + 14, y);\r\n    ctx.strokeStyle = `rgba(255, 255, 255, ${opacity}`;\r\n    ctx.moveTo(x, y - 14);\r\n    ctx.lineTo(x, y + 14);\r\n    ctx.stroke();\r\n  }\r\n\r\n  window.addEventListener('resize', onResize);\r\n  onResize();\r\n  draw();\r\n}\r\n\r\nexport default HeroPattern;\r\n","function HeroVideo() {\r\n  document.addEventListener(\"DOMContentLoaded\", () => {\r\n    const videoBackground = document.getElementById('videoBackground');\r\n    if(typeof(videoBackground) != 'undefined' && videoBackground != null) {\r\n      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\r\n      if(!reducedMotion || reducedMotion.matches) {\r\n        videoBackground.pause();\r\n      }\r\n      \r\n      const lightboxTrigger = document.getElementById('playVideo');\r\n      const lightboxContainer = document.getElementById('lightboxVideo');\r\n      const lightboxVideo = lightboxContainer.querySelector('.c-lightbox__video');\r\n\r\n      lightboxTrigger.addEventListener('click', e => {\r\n        videoBackground.pause();\r\n        lightboxContainer.classList.remove('u-hidden');\r\n        checkVideos();\r\n      });\r\n  \r\n      lightboxContainer.addEventListener('click', (e) => {\r\n        if (!e.target.classList.contains('c-lightbox__video')) {\r\n          videoBackground.setAttribute('autoplay','');\r\n          lightboxContainer.classList.add('u-hidden');\r\n          checkVideos();\r\n        }\r\n      });\r\n      window.addEventListener('keydown', function(e) {\r\n        if (e.key == \"Escape\") {\r\n          videoBackground.setAttribute('autoplay','');\r\n          lightboxContainer.classList.add('u-hidden');\r\n          checkVideos();\r\n        }\r\n      });\r\n\r\n      function checkVideos() {\r\n        if(lightboxContainer.classList.contains('u-hidden')) {\r\n          if (videoBackground.paused) {\r\n            videoBackground.play();\r\n          }\r\n          if (!lightboxVideo.paused) {\r\n            lightboxVideo.pause();\r\n          }\r\n        } else {\r\n          if (!videoBackground.paused) {\r\n            videoBackground.pause();\r\n          }\r\n        }\r\n      }\r\n    }\r\n  });\r\n}\r\n\r\nexport default HeroVideo;","// Function to initialize tooltip behavior\r\nfunction HotspotImage() {\r\n  // Add delay for Tridion JavaScript created hotspot images\r\n  setTimeout(function () {\r\n    // Select all elements that trigger tooltips\r\n    const tooltips = document.querySelectorAll('.c-hotspot-image__button');\r\n\r\n    // Add event listeners for each tooltip button\r\n    tooltips.forEach((button) => {\r\n      button.addEventListener('click', handleTooltipToggle);\r\n    });\r\n\r\n    // Add event listener for Escape key press\r\n    document.addEventListener('keydown', handleKeyDown);\r\n\r\n    // Add event listener for click outside tooltip\r\n    document.addEventListener('click', handleClickOutside);\r\n  }, 2000);\r\n}\r\n\r\n// Function to handle the tooltip toggle\r\nfunction handleTooltipToggle(event) {\r\n  // Prevent default action if needed\r\n  event.preventDefault();\r\n\r\n  const button = event.currentTarget;\r\n  const tooltipId = button.getAttribute('aria-controls');\r\n  const tooltip = document.getElementById(tooltipId);\r\n\r\n  if (tooltip.classList.contains('c-hotspot-image__tooltip--open')) {\r\n    closeTooltip(button, tooltip);\r\n  } else {\r\n    openTooltip(button, tooltip);\r\n  }\r\n}\r\n\r\n// Function to open a tooltip\r\nfunction openTooltip(button, tooltip) {\r\n  // Add active class and make tooltip visible\r\n  tooltip.classList.add('c-hotspot-image__tooltip--open');\r\n  tooltip.setAttribute('aria-hidden', 'false');\r\n  button.setAttribute('aria-expanded', 'true');\r\n\r\n  // Add event listener for click outside\r\n  document.addEventListener('click', handleClickOutside);\r\n}\r\n\r\n// Function to close a tooltip\r\nfunction closeTooltip(button, tooltip) {\r\n  // Remove active class and hide tooltip\r\n  tooltip.classList.remove('c-hotspot-image__tooltip--open');\r\n  tooltip.setAttribute('aria-hidden', 'true');\r\n  button.setAttribute('aria-expanded', 'false');\r\n\r\n  // Remove event listener for click outside\r\n  document.removeEventListener('click', handleClickOutside);\r\n}\r\n\r\n// Function to handle Escape key press\r\nfunction handleKeyDown(event) {\r\n  if (event.key === 'Escape') {\r\n    const activeTooltip = document.querySelector(\r\n      '.c-hotspot-image__tooltip--open'\r\n    );\r\n    if (activeTooltip) {\r\n      const button = document.querySelector(\r\n        `[aria-controls=\"${activeTooltip.id}\"]`\r\n      );\r\n      closeTooltip(button, activeTooltip);\r\n    }\r\n  }\r\n}\r\n\r\n// Function to handle click outside the tooltip\r\nfunction handleClickOutside(event) {\r\n  const activeTooltip = document.querySelector(\r\n    '.c-hotspot-image__tooltip--open'\r\n  );\r\n  if (\r\n    activeTooltip &&\r\n    !activeTooltip.contains(event.target) &&\r\n    !event.target.closest('.c-hotspot-image__button')\r\n  ) {\r\n    const button = document.querySelector(\r\n      `[aria-controls=\"${activeTooltip.id}\"]`\r\n    );\r\n    closeTooltip(button, activeTooltip);\r\n  }\r\n}\r\n\r\nexport default HotspotImage;\r\n","function InternalNav() {\r\n    const internalNav = document.querySelector('.c-internal-nav--sticky');\r\n\r\n    if (!internalNav) {\r\n        return;\r\n    }\r\n\r\n    const observerOptions = {\r\n        root: null,\r\n        rootMargin: '0px',\r\n        threshold: 1.0\r\n    };\r\n\r\n    const intersectionCallback = (entries, observer) => {\r\n        const isIntersecting = entries[0].isIntersecting;\r\n        internalNav.classList.toggle('c-internal-nav--stuck', !isIntersecting);\r\n    };\r\n\r\n    const observer = new IntersectionObserver(intersectionCallback, observerOptions);\r\n    observer.observe(internalNav);\r\n\r\n    let internalNavHeight = internalNav.offsetHeight;\r\n\r\n    const updateInternalNavHeight = () => {\r\n        internalNavHeight = internalNav.offsetHeight;\r\n        const anchors = Array.from(internalNav.querySelectorAll('a'));\r\n        anchors.forEach(anchor => {\r\n            const id = anchor.getAttribute('href').replace('#', '');\r\n            const target = document.getElementById(id);\r\n            if (target) {\r\n                target.style.scrollMarginTop = `${internalNavHeight}px`;\r\n            }\r\n        });\r\n    };\r\n\r\n    window.addEventListener('resize', updateInternalNavHeight);\r\n\r\n    updateInternalNavHeight();\r\n}\r\n\r\nexport default InternalNav;","// Function to initialize off-canvas behavior\r\nfunction OffCanvas() {\r\n  // Select all elements that trigger off-canvas behavior\r\n  const toggles = document.querySelectorAll(\".c-off-canvas__toggle\");\r\n\r\n  // Iterate through each toggle element\r\n  if (toggles.length) {\r\n    toggles.forEach(toggle => {\r\n      // Determine initial visibility state and handle click event\r\n      handleOffCanvas(toggle, isVisible(toggle));\r\n      toggle.addEventListener('click', () => toggleOffCanvas(toggle));\r\n    });\r\n\r\n    // Add event listener for scroll events to check visibility\r\n    // window.addEventListener('scroll', () => {\r\n    //   toggles.forEach(toggle => {\r\n    //     handleOffCanvas(toggle, isVisible(toggle));\r\n    //   });\r\n    // });\r\n\r\n    // Add event listener for resize events to check visibility\r\n    window.addEventListener('resize', () => {\r\n      toggles.forEach(toggle => {\r\n        handleOffCanvas(toggle, isVisible(toggle));\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\n// Function to check if an element is currently visible on the page\r\nfunction isVisible(element) {\r\n  // Check element's styles for visibility\r\n  const style = window.getComputedStyle(element);\r\n  return (\r\n    style.display !== 'none' &&\r\n    style.visibility !== 'hidden'\r\n  );\r\n}\r\n\r\n// Function to handle off-canvas behavior based on visibility\r\nfunction handleOffCanvas(toggle, isVisible) {\r\n  const target = document.getElementById(toggle.getAttribute('data-target'));\r\n  if (isVisible === true) {\r\n    createOffCanvas(target);\r\n  } else {\r\n    removeOffCanvas(target);\r\n  }\r\n}\r\n\r\n// Function to create off canvas\r\nfunction createOffCanvas(target) {\r\n  // Add necessary classes and attributes for off-canvas display\r\n  target.classList.add('c-off-canvas');\r\n  target.setAttribute('tabindex', '-1');\r\n  target.setAttribute('aria-hidden', 'true');\r\n  \r\n  // Extract specific sections of the off-canvas content\r\n  const targetHeader = target.querySelector('[data-off-canvas=\"header\"]');\r\n  const targetMain = target.querySelector('[data-off-canvas=\"main\"]');\r\n  const targetFooter = target.querySelector('[data-off-canvas=\"footer\"]');\r\n\r\n  // Extract content from the sections\r\n  const targetHeaderContent = targetHeader !== null ? targetHeader.outerHTML : '';\r\n  const targetMainContent = targetMain !== null ? targetMain.outerHTML : '';\r\n  const targetFooterContent = targetFooter !== null ? targetFooter.outerHTML : '';\r\n\r\n  // Replace the target's content with off-canvas structure\r\n  target.innerHTML = `\r\n    <div class=\"c-off-canvas__backdrop\" role=\"presentation\"></div>\r\n    <div class=\"c-off-canvas__content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"offCanvasHeader\">\r\n      <header id=\"offCanvasHeader\" class=\"c-off-canvas__header\">${targetHeaderContent}</header>\r\n      <main class=\"c-off-canvas__main\">${targetMainContent}</main>\r\n      <footer class=\"c-off-canvas__footer\">\r\n        ${targetFooterContent}\r\n        <button class=\"mp c-twi c-twi--left c-off-canvas__close\" data-off-canvas-close=\"true\" onclick=\"return false\">\r\n          <span>Cancel</span>\r\n          <svg role=\"img\" aria-hidden=\"true\" focusable=\"false\" class=\"mp c-icon c-icon--cross\">\r\n            <use xlink:href=\"/static/svg/sprite.svg#cross\"></use>\r\n          </svg>\r\n        </button>\r\n      </footer>\r\n    </div>\r\n  `;\r\n}\r\n\r\n// Function to remove off-canvas layout\r\nfunction removeOffCanvas(target) {\r\n  // Remove classes and attributes for off-canvas display\r\n  target.classList.remove('c-off-canvas', 'c-off-canvas--active');\r\n  target.removeAttribute('tabindex');\r\n  target.removeAttribute('aria-hidden');\r\n\r\n  // Remove backdrop element if present\r\n  const targetBackdrop = target.querySelector('.c-off-canvas__backdrop');\r\n  if (targetBackdrop) {\r\n    targetBackdrop.remove();\r\n  }\r\n\r\n  // Restore original content by removing off-canvas structure\r\n  const targetContent = target.querySelector('.c-off-canvas__content');\r\n  if (targetContent) {\r\n    while (targetContent.firstChild) {\r\n      target.insertBefore(targetContent.firstChild, targetContent);\r\n    }\r\n    target.removeChild(targetContent);\r\n  }\r\n\r\n  const targetHeader = target.querySelector('.c-off-canvas__header');\r\n  if (targetHeader) {\r\n    while (targetHeader.firstChild) {\r\n      target.insertBefore(targetHeader.firstChild, targetHeader);\r\n    }\r\n    target.removeChild(targetHeader);\r\n  }\r\n\r\n  const targetMain = target.querySelector('.c-off-canvas__main');\r\n  if (targetMain) {\r\n    while (targetMain.firstChild) {\r\n      target.insertBefore(targetMain.firstChild, targetMain);\r\n    }\r\n    target.removeChild(targetMain);\r\n  }\r\n\r\n  const targetFooter = target.querySelector('.c-off-canvas__footer');\r\n  if (targetFooter) {\r\n    while (targetFooter.firstChild) {\r\n      target.insertBefore(targetFooter.firstChild, targetFooter);\r\n    }\r\n    target.removeChild(targetFooter);\r\n  }\r\n  \r\n  // Remove close button element if present\r\n  const targetClose = target.querySelector('.c-off-canvas__close');\r\n  if (targetClose) {\r\n    targetClose.remove();\r\n  }\r\n}\r\n\r\n// Function to toggle off-canvas visibility\r\nfunction toggleOffCanvas(toggle) {\r\n  const target = document.getElementById(toggle.getAttribute('data-target'));\r\n\r\n  // Check if the target is already open or closed\r\n  if (!target.classList.contains('c-off-canvas--active')) {\r\n    openOffCanvas(toggle, target);\r\n  } else if (target.classList.contains('c-off-canvas--active')) {\r\n    closeOffCanvas(target);\r\n  }\r\n}\r\n\r\nfunction openOffCanvas(toggle, target) {\r\n  // Add classes and attributes for open off-canvas\r\n  toggle.setAttribute('aria-expanded', 'true');\r\n  target.classList.add('c-off-canvas--active');\r\n  target.setAttribute('aria-hidden', 'false');\r\n\r\n  // Add event listener for backdrop clicks\r\n  const offCanvasBackdrop = target.querySelector('.c-off-canvas__backdrop');\r\n  if(offCanvasBackdrop) {\r\n    offCanvasBackdrop.addEventListener('click', handleBackdropClick);\r\n  }\r\n\r\n  // Add event listener forclose button clicks\r\n  const offCanvasCloseElements = target.querySelectorAll('[data-off-canvas-close=\"true\"]');\r\n  if (offCanvasCloseElements.length > 0) {\r\n    offCanvasCloseElements.forEach((offCanvasClose) => {\r\n      offCanvasClose.addEventListener('click', handleCloseClick);\r\n    });\r\n  }\r\n\r\n   // Add event listener for Escape key press\r\n  document.addEventListener('keydown', handleKeyDown, { once: true });\r\n\r\n  // Adjust body overflow to prevent scrolling\r\n  document.body.style.overflowY = 'hidden';\r\n\r\n  // Close other open off-canvas elements\r\n  const allOffCanvasElementsExceptCurrent = Array.from(document.querySelectorAll('.c-off-canvas')).filter(offCanvas => offCanvas !== target);\r\n  if (allOffCanvasElementsExceptCurrent.length > 0) {\r\n    allOffCanvasElementsExceptCurrent.forEach((offCanvas) => {\r\n      closeOffCanvas(offCanvas);\r\n    });\r\n  }\r\n}\r\n\r\n// Function to close an off-canvas\r\nfunction closeOffCanvas(target) {\r\n  // Remove classes and attributes for open off-canvas\r\n  document.querySelector('[data-target=\"' + target.id + '\"').setAttribute('aria-expanded', 'false');\r\n  target.classList.remove('c-off-canvas--active');\r\n  target.setAttribute('aria-hidden', 'true');\r\n\r\n  // Restore body overflow\r\n  document.body.style.overflowY = '';\r\n}\r\n\r\n// Function to handle backdrop click\r\nfunction handleBackdropClick() {\r\n  const offCanvas = this.closest('.c-off-canvas');\r\n  closeOffCanvas(offCanvas);\r\n}\r\n\r\n// Function to handle Escape key press\r\nfunction handleKeyDown(event) {\r\n  if (event.key === 'Escape') {\r\n    const activeOffCanvas = document.querySelector('.c-off-canvas--active');\r\n    if (activeOffCanvas) {\r\n      closeOffCanvas(activeOffCanvas);\r\n    }\r\n  }\r\n}\r\n\r\n// Function to handle close button click\r\nfunction handleCloseClick() {\r\n  const offCanvas = this.closest('.c-off-canvas');\r\n  closeOffCanvas(offCanvas);\r\n}\r\n\r\nexport default OffCanvas;","const ResponsiveTable = () => {\r\n  const tables = Array.from(document.querySelectorAll('.c-table--responsive'));\r\n  tables.forEach(createResponsiveTable);\r\n\r\n  /**\r\n   * Create responsive table headers for large tables\r\n   * @param {HTMLTableElement} table\r\n   */\r\n  function createResponsiveTable(table) {\r\n    const headers = table.querySelectorAll('thead > :first-child th');\r\n    const breakPoint = Number(table.getAttribute('data-columns')) || 2\r\n  \r\n    if (headers.length < breakPoint) {\r\n      table.classList.remove('c-table--responsive');\r\n      return;\r\n    };\r\n\r\n    Array.from(table.querySelectorAll('tbody tr')).forEach((row) => {\r\n      Array.from(headers)\r\n        .map((x) => x.textContent)\r\n        .forEach((header, index) => {\r\n          if (row.children[index]) {\r\n            row.children[index].setAttribute('data-responsive-title', header);\r\n          }\r\n        });\r\n    });\r\n  }\r\n};\r\n\r\nexport default ResponsiveTable;\r\n","import { debounce } from './utilities';\r\n\r\nfunction ScrollbarWidth() {\r\n    setScrollbarWidth();\r\n    window.addEventListener('resize', debounce(setScrollbarWidth, 250));\r\n}\r\n\r\nfunction setScrollbarWidth() {\r\n    document.documentElement.style.setProperty(\r\n        '--scrollbarWidth', \r\n        window.innerWidth - document.body.clientWidth + 'px'\r\n    );\r\n}\r\n\r\nexport default ScrollbarWidth;","function ScrollSpy() {\r\n  const internalNav = document.querySelector('.c-internal-nav--sticky');\r\n  const internalNavHeight = internalNav ? internalNav.offsetHeight : 0;\r\n\r\n  const spies = Array.from(document.querySelectorAll('.c-scroll-spy'));\r\n  spies.forEach(spy => {\r\n    setup(spy, internalNavHeight);\r\n  });\r\n}\r\n\r\nfunction setup(element, internalNavHeight) {\r\n  const anchors = Array.from(element.querySelectorAll('a'));\r\n  const observer = new IntersectionObserver(observation(anchors));\r\n  \r\n  anchors.forEach(anchor => {\r\n    const id = anchor.getAttribute('href').replace('#', '');\r\n    const target = document.getElementById(id);\r\n    if (!target) return;\r\n\r\n    observer.observe(target);\r\n  });\r\n\r\n  const currentTop = parseFloat(window.getComputedStyle(element).top);\r\n  element.style.top = `${currentTop + internalNavHeight}px`;\r\n}\r\n\r\n/**\r\n * @param {Array<HTMLAnchorElement>} results \r\n * @return {Array<IntersectionObserverEntry>}\r\n */\r\nfunction observation(anchors) {\r\n  return (results) => {\r\n    const firstObservation = results.find(x => x.isIntersecting);\r\n\r\n    if (firstObservation) {\r\n      anchors.forEach(x => {\r\n        x.classList.toggle(\r\n          'c-scroll-spy-active',\r\n          x.getAttribute('href') === '#' + firstObservation.target.id\r\n        )\r\n      })\r\n    }\r\n  }\r\n}\r\n\r\nexport default ScrollSpy;\r\n","function Tabs() {\r\n  const tabs = Array.from(document.querySelectorAll('.c-tabs--anchor'));\r\n  tabs.forEach(setupTabs);\r\n}\r\n\r\nfunction setupTabs(parent) {\r\n  const controls = Array.from(parent.querySelectorAll('.c-tabs__control'));\r\n  const content = Array.from(parent.querySelectorAll('.c-tab'));\r\n  const persist = parent.classList.contains('c-tabs--persist');\r\n  \r\n  if (!controls.length || !content.length) return;\r\n\r\n  controls.forEach(control => {\r\n    control.addEventListener('click', controlClick(controls, content, persist))\r\n  })\r\n\r\n  if (persist && window.location.hash) {\r\n    const control = parent.querySelector('[href=\"' + window.location.hash + '\"]');\r\n    if (control) control.dispatchEvent(new Event('click'));\r\n  }\r\n}\r\n\r\nfunction controlClick(controls, contents, persist) {\r\n  return (event) => {\r\n    const control = event.currentTarget;\r\n    const content = contents.find(x => x.id === control.getAttribute('href').replace('#', ''));\r\n    \r\n    if (!content) {\r\n      return true;\r\n    };\r\n\r\n    event.preventDefault();\r\n    \r\n    if (persist) {\r\n      history.pushState(null, null, control.getAttribute('href'));\r\n    }\r\n\r\n    controls.forEach(c => c.classList.toggle('c-tabs__control--active', c === control));\r\n    contents.forEach(c => {\r\n      const isCurrent = c === content;\r\n      c.classList.toggle('c-tab--active', isCurrent);\r\n      \r\n      if (persist) return;\r\n\r\n      if (isCurrent) {\r\n        c.setAttribute('tabIndex', -1);\r\n        \r\n        const y = window.scrollY;\r\n        c.focus();\r\n        window.scrollTo({ behavior: \"auto\", top: y })\r\n      } else {\r\n        c.removeAttribute('tabIndex');\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nexport default Tabs;\r\n","import Accordion from './imports/accordion';\r\nimport Carousel from './imports/carousel';\r\nimport ClearForm from './imports/clear-form';\r\nimport Comparison from './imports/comparison';\r\nimport Facet from './imports/facet';\r\nimport Gallery from './imports/gallery';\r\nimport HeroPattern from './imports/hero-pattern';\r\nimport HeroVideo from './imports/hero-video';\r\nimport HotspotImage from './imports/hotspot-image';\r\nimport InternalNav from './imports/internal-nav';\r\nimport OffCanvas from './imports/off-canvas';\r\nimport ResponsiveTable from './imports/responsive-table';\r\nimport ScrollbarWidth from './imports/scrollbar-width';\r\nimport ScrollSpy from './imports/scroll-spy';\r\nimport Tabs from './imports/tabs';\r\n\r\n(() => {\r\n  if (window.NodeList && !NodeList.prototype.forEach) {\r\n    NodeList.prototype.forEach = Array.prototype.forEach;\r\n  }\r\n  if (window.HTMLCollection && !HTMLCollection.prototype.forEach) {\r\n    HTMLCollection.prototype.forEach = Array.prototype.forEach;\r\n  }\r\n\r\n  Accordion();\r\n  Carousel();\r\n  ClearForm();\r\n  Comparison();\r\n  Facet();\r\n  Gallery();\r\n  HeroPattern();\r\n  HeroVideo();\r\n  HotspotImage();\r\n  InternalNav();\r\n  OffCanvas();\r\n  ResponsiveTable();\r\n  ScrollbarWidth();\r\n  ScrollSpy();\r\n  Tabs();\r\n})();\r\n"],"names":["$c274619fa9ae66ac$var$setupAccordions","title","addEventListener","event","currentTarget","parentElement","classList","toggle","$c274619fa9ae66ac$export$2e2bcd8739ae039","Array","from","document","querySelectorAll","forEach","$5bdce36a18199573$export$2e2bcd8739ae039","current","bgSlides","fgSlides","length","setInterval","bgSlide","style","opacity","fgSlide","$2b04c6f63ef290fb$export$2e2bcd8739ae039","formClear","getElementById","this","closest","elements","field","value","type","toLowerCase","checked","$7fbc59e2fab6d5d2$var$extractMobileComparison","container","parent","parentNode","body","querySelector","head","mobile","productsInfo","children","filter","x","i","map","info","innerHTML","productsButtons","buttons","products","index","table","row","contains","push","textContent","cells","firstCell","shift","el","key","product","createElement","join","$7fbc59e2fab6d5d2$var$createMobileProduct","appendChild","$7fbc59e2fab6d5d2$export$2e2bcd8739ae039","$c84660375132b4b5$var$setupFacetAccordions","preventDefault","facet","expanded","setAttribute","$c84660375132b4b5$export$2e2bcd8739ae039","$dfe0031b837edf6f$export$2e2bcd8739ae039","mainSlides","thumbnailSlides","lightboxTrigger","lightbox","cloneNode","remove","add","slide","slideImg","srcset","removeAttribute","slideImgSrc","getAttribute","indexOf","split","console","log","insertAdjacentHTML","lightboxActive","prevImage","parseInt","dataset","nextImage","e","target","thumbnailSlide","thumbnail","mainSlide","$41a3994d4318effb$export$b568019c0551f0a4","y","a","min","max","Math","$41a3994d4318effb$export$7d15b64cf5a3a4c4","$2e27ca8f14f20195$export$2e2bcd8739ae039","time","c","ctx","getContext","reduceMotion","window","matchMedia","matches","crossGap","crossSpeed","width","height","across","down","totalPoints","crosses","onResize","scrollWidth","scrollHeight","canvas","ceil","ids","array","arr","j","floor","random","$41a3994d4318effb$export$448332262467e042","_","counter","direction","draw","clearRect","beginPath","cnt","lineTo","cos","lineWidth","strokeStyle","stroke","cross","x1","y1","x2","y2","$41a3994d4318effb$export$3a89f8d6f6bf6c9f","moveTo","requestAnimationFrame","$63fd9338c6a56d33$export$2e2bcd8739ae039","videoBackground","reducedMotion","pause","lightboxContainer","lightboxVideo","checkVideos","paused","play","$a769352498853f72$var$handleTooltipToggle","button","tooltipId","tooltip","$a769352498853f72$var$closeTooltip","$a769352498853f72$var$handleClickOutside","$a769352498853f72$var$openTooltip","removeEventListener","$a769352498853f72$var$handleKeyDown","activeTooltip","id","$a769352498853f72$export$2e2bcd8739ae039","setTimeout","$a8ec42a1db03828c$export$2e2bcd8739ae039","internalNav","IntersectionObserver","entries","observer","isIntersecting","root","rootMargin","threshold","observe","internalNavHeight","offsetHeight","updateInternalNavHeight","anchor","replace","scrollMarginTop","$34e92b90f028a0e5$var$isVisible","element","getComputedStyle","display","visibility","$34e92b90f028a0e5$var$handleOffCanvas","isVisible","targetHeader","targetMain","targetFooter","targetHeaderContent","outerHTML","targetMainContent","targetFooterContent","$34e92b90f028a0e5$var$createOffCanvas","targetBackdrop","targetContent","firstChild","insertBefore","removeChild","targetClose","$34e92b90f028a0e5$var$removeOffCanvas","$34e92b90f028a0e5$var$closeOffCanvas","overflowY","$34e92b90f028a0e5$var$handleBackdropClick","$34e92b90f028a0e5$var$handleKeyDown","activeOffCanvas","$34e92b90f028a0e5$var$handleCloseClick","$34e92b90f028a0e5$export$2e2bcd8739ae039","toggles","offCanvasBackdrop","offCanvasCloseElements","offCanvasClose","once","allOffCanvasElementsExceptCurrent","offCanvas","$34e92b90f028a0e5$var$openOffCanvas","$34e92b90f028a0e5$var$toggleOffCanvas","headers","breakPoint","Number","header","$e3dc92a106d80d6c$var$setScrollbarWidth","documentElement","setProperty","innerWidth","clientWidth","$e3dc92a106d80d6c$export$2e2bcd8739ae039","func","limit","wait","$41a3994d4318effb$export$61fc7d43ac8f84b0","spy","anchors","results","firstObservation","find","$9d1dec2ad218c628$var$observation","currentTop","parseFloat","top","$9d1dec2ad218c628$var$setup","$1d2dabc452d8efd6$var$setupTabs","controls","content","persist","control","contents","history","pushState","isCurrent","scrollY","focus","scrollTo","behavior","$1d2dabc452d8efd6$var$controlClick","location","hash","dispatchEvent","Event","$1d2dabc452d8efd6$export$2e2bcd8739ae039","NodeList","prototype","HTMLCollection","$384feef4bde84172$export$2e2bcd8739ae039","$9d1dec2ad218c628$export$2e2bcd8739ae039"],"version":3,"file":"app.js.map"}

package/dist/build/scss/library.css.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["scss/library.css","src/assets/scss/library.scss","src/assets/scss/tools/breakout.scss","src/assets/scss/tools/cutoff.scss","src/assets/scss/foundations/typography.scss","src/assets/scss/foundations/space.scss","src/assets/scss/tools/index.scss","src/assets/scss/foundations/animation.scss","src/assets/scss/elements/reset.scss","src/assets/scss/objects/syntax-highlighting.scss","src/assets/scss/utilities/hr.scss","src/assets/scss/objects/grid.scss"],"sourcesContent":["@import \"https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap\";\n.u-breakout {\n  left: 50%;\n  left: calc(50% + var(--scrollbarWidth)  / 2.0001);\n  width: 100vw;\n  width: calc(100vw - var(--scrollbarWidth) );\n  padding-left: safe-space(0);\n  padding-right: safe-space(0);\n  position: relative;\n  transform: translateX(-50vw);\n}\n\n.u-cutoff {\n  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gutter) ), calc(100% - var(--gutter) ) 100%, 0 100%);\n}\n\n.u-cutoff--top-right {\n  clip-path: polygon(0 0, calc(100% - var(--gutter) ) 0, 100% var(--gutter), 100% 100%, 0 100%);\n}\n\n.u-cutoff--top-left {\n  clip-path: polygon(0 var(--gutter), var(--gutter) 0, 100% 0, 100% 100%, 0 100%);\n}\n\n.u-cutoff--bottom-left {\n  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--gutter) 100%, 0 calc(100% - var(--gutter) ) );\n}\n\n.u-cutoff--m {\n  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-m) ), calc(100% - var(--space-m) ) 100%, 0 100%);\n}\n\n.u-cutoff--xl {\n  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-xl) ), calc(100% - var(--space-xl) ) 100%, 0 100%);\n}\n\n:root {\n  --fluid-min-width: 320;\n  --fluid-max-width: 1332;\n  --fluid-screen: 100vw;\n  --fluid-bp: calc( (var(--fluid-screen)  - var(--fluid-min-width)  / 16 * 1rem)  / (var(--fluid-max-width)  - var(--fluid-min-width) ) );\n}\n\n@media screen and (min-width: 1332px) {\n  :root {\n    --fluid-screen: calc(var(--fluid-max-width)  * 1px);\n  }\n}\n\n:root {\n  --f--2-min: 12.64;\n  --f--2-max: 12.5;\n  --step--2: calc( ((var(--f--2-min)  / 16)  * 1rem)  + (var(--f--2-max)  - var(--f--2-min) )  * var(--fluid-bp) );\n  --f--1-min: 14.22;\n  --f--1-max: 15;\n  --step--1: calc( ((var(--f--1-min)  / 16)  * 1rem)  + (var(--f--1-max)  - var(--f--1-min) )  * var(--fluid-bp) );\n  --f-0-min: 16;\n  --f-0-max: 18;\n  --step-0: calc( ((var(--f-0-min)  / 16)  * 1rem)  + (var(--f-0-max)  - var(--f-0-min) )  * var(--fluid-bp) );\n  --f-1-min: 18;\n  --f-1-max: 21.6;\n  --step-1: calc( ((var(--f-1-min)  / 16)  * 1rem)  + (var(--f-1-max)  - var(--f-1-min) )  * var(--fluid-bp) );\n  --f-2-min: 20.25;\n  --f-2-max: 25.92;\n  --step-2: calc( ((var(--f-2-min)  / 16)  * 1rem)  + (var(--f-2-max)  - var(--f-2-min) )  * var(--fluid-bp) );\n  --f-3-min: 22.78;\n  --f-3-max: 31.1;\n  --step-3: calc( ((var(--f-3-min)  / 16)  * 1rem)  + (var(--f-3-max)  - var(--f-3-min) )  * var(--fluid-bp) );\n  --f-4-min: 25.63;\n  --f-4-max: 37.32;\n  --step-4: calc( ((var(--f-4-min)  / 16)  * 1rem)  + (var(--f-4-max)  - var(--f-4-min) )  * var(--fluid-bp) );\n  --f-5-min: 28.83;\n  --f-5-max: 44.79;\n  --step-5: calc( ((var(--f-5-min)  / 16)  * 1rem)  + (var(--f-5-max)  - var(--f-5-min) )  * var(--fluid-bp) );\n  --f-6-min: 32.44;\n  --f-6-max: 53.75;\n  --step-6: calc( ((var(--f-6-min)  / 16)  * 1rem)  + (var(--f-6-max)  - var(--f-6-min) )  * var(--fluid-bp) );\n  --f-7-min: 36.49;\n  --f-7-max: 64.5;\n  --step-7: calc( ((var(--f-7-min)  / 16)  * 1rem)  + (var(--f-7-max)  - var(--f-7-min) )  * var(--fluid-bp) );\n  --f-8-min: 41.05;\n  --f-8-max: 77.4;\n  --step-8: calc( ((var(--f-8-min)  / 16)  * 1rem)  + (var(--f-8-max)  - var(--f-8-min) )  * var(--fluid-bp) );\n  --f-9-min: 46.18;\n  --f-9-max: 92.88;\n  --step-9: calc( ((var(--f-9-min)  / 16)  * 1rem)  + (var(--f-9-max)  - var(--f-9-min) )  * var(--fluid-bp) );\n  --f-10-min: 51.96;\n  --f-10-max: 111.45;\n  --step-10: calc( ((var(--f-10-min)  / 16)  * 1rem)  + (var(--f-10-max)  - var(--f-10-min) )  * var(--fluid-bp) );\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: . .  / fonts / inter-regular. woff2 format(\"woff2\"), . .  / fonts / inter-regular. woff format(\"woff\");\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: . .  / fonts / inter-semibold. woff2 format(\"woff2\"), . .  / fonts / inter-semibold. woff format(\"woff\");\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: . .  / fonts / inter-bold. woff2 format(\"woff2\"), . .  / fonts / inter-bold. woff format(\"woff\");\n}\n\n:root {\n  --max-screen: 83.25;\n  --fc-screen: 100vw;\n  --fc-bp: calc((var(--fc-screen)  - 20em)  / (var(--max-screen)  - 20) );\n  --fc-base: 18;\n  --fc-3xs: 4.5;\n  --space-3xs: calc(var(--fc-3xs)  / 16 * 1rem);\n  --fc-2xs: 9;\n  --space-2xs: calc(var(--fc-2xs)  / 16 * 1rem);\n  --fc-xs: 13.5;\n  --space-xs: calc(var(--fc-xs)  / 16 * 1rem);\n  --fc-s: 18;\n  --space-s: calc(var(--fc-s)  / 16 * 1rem);\n  --fc-m: 27;\n  --space-m: calc(var(--fc-m)  / 16 * 1rem);\n  --fc-l: 36;\n  --space-l: calc(var(--fc-l)  / 16 * 1rem);\n  --fc-xl: 54;\n  --space-xl: calc(var(--fc-xl)  / 16 * 1rem);\n  --fc-2xl: 72;\n  --space-2xl: calc(var(--fc-2xl)  / 16 * 1rem);\n  --fc-3xl: 108;\n  --space-3xl: calc(var(--fc-3xl)  / 16 * 1rem);\n  --fc-4xl: 144;\n  --space-4xl: calc(var(--fc-4xl)  / 16 * 1rem);\n  --space--3xs: calc( ((var(--fc-)  / 16)  * 1rem)  + (var(--fc-3xs)  - var(--fc-) )  * var(--fluid-bp) );\n  --space-3xs-2xs: calc( ((var(--fc-3xs)  / 16)  * 1rem)  + (var(--fc-2xs)  - var(--fc-3xs) )  * var(--fluid-bp) );\n  --space-2xs-xs: calc( ((var(--fc-2xs)  / 16)  * 1rem)  + (var(--fc-xs)  - var(--fc-2xs) )  * var(--fluid-bp) );\n  --space-xs-s: calc( ((var(--fc-xs)  / 16)  * 1rem)  + (var(--fc-s)  - var(--fc-xs) )  * var(--fluid-bp) );\n  --space-s-m: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-m-l: calc( ((var(--fc-m)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-m) )  * var(--fluid-bp) );\n  --space-l-xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-xl-2xl: calc( ((var(--fc-xl)  / 16)  * 1rem)  + (var(--fc-2xl)  - var(--fc-xl) )  * var(--fluid-bp) );\n  --space-2xl-3xl: calc( ((var(--fc-2xl)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-2xl) )  * var(--fluid-bp) );\n  --space-3xl-4xl: calc( ((var(--fc-3xl)  / 16)  * 1rem)  + (var(--fc-4xl)  - var(--fc-3xl) )  * var(--fluid-bp) );\n  --space-s-l: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-s-m: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-xs-l: calc( ((var(--fc-xs)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-xs) )  * var(--fluid-bp) );\n  --space-m-xl: calc( ((var(--fc-m)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-m) )  * var(--fluid-bp) );\n  --space-l-2xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-2xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-s-xl: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-l-3xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-xl-3xl: calc( ((var(--fc-xl)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-xl) )  * var(--fluid-bp) );\n  --space-l-4xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-4xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-3xs-m: calc( ((var(--fc-3xs)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-3xs) )  * var(--fluid-bp) );\n  --gutter: var(--space-s-l);\n}\n\n@media screen and (min-width: 75em) {\n  :root {\n    --fc-screen: calc(var(--max-screen)  * 1rem);\n  }\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n*, :before, :after {\n  box-sizing: border-box;\n}\n\nbody {\n  min-height: 100vh;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  margin: 0;\n  display: flex;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nblockquote, pre, ol, ul, figure {\n  margin: 0;\n  padding: 0;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n  border: none;\n  display: block;\n}\n\narticle, aside, figure, footer, header, aside, main, nav {\n  display: block;\n}\n\niframe {\n  border: none;\n}\n\nbody {\n  letter-spacing: -.01em;\n  font: 400 18px / 1.2 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n  font-size: var(--step-0);\n  color: #333;\n}\n\nh1, h2, h3, h4, h5, h6, p, ul, ol, dl {\n  margin: 0;\n}\n\nul, ol, p {\n  line-height: 1.2;\n}\n\na {\n  text-decoration: none;\n}\n\na, a:hover {\n  cursor: pointer;\n  color: inherit;\n}\n\n.mp ol, .mp ul {\n  list-style: none;\n}\n\ncite, address {\n  font-style: normal;\n}\n\n[type=\"submit\"], [type=\"button\"], button {\n  box-shadow: none;\n  appearance: none;\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n  background: none;\n  border: none;\n  border-radius: 0;\n  padding: 0;\n}\n\nlabel {\n  cursor: pointer;\n}\n\nfieldset {\n  border: none;\n  padding: .01em 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    scroll-behavior: auto !important;\n    transition: none !important;\n    animation: none !important;\n  }\n}\n\ncode[class*=\"language-\"], pre[class*=\"language-\"] {\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  color: #3d7b87;\n  tab-size: 4;\n  hyphens: none;\n  background: #ebf1f2;\n  font-family: Source Code Pro, monospace;\n  font-size: 1rem;\n  line-height: 1.5em;\n}\n\n.c-alert code[class*=\"language-\"], .c-alert pre[class*=\"language-\"] {\n  background: none;\n}\n\ncode[class*=\"language-\"]::selection, pre[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection, pre[class*=\"language-\"] ::selection {\n  color: #263238;\n  background: #cceae7;\n}\n\n:not(pre) > code[class*=\"language-\"] {\n  white-space: normal;\n  border-radius: .2em;\n  padding: .1em;\n}\n\npre[class*=\"language-\"] {\n  padding: 18px;\n  padding: var(--space-s);\n  position: relative;\n  overflow: auto;\n}\n\n.language-css > code, .language-sass > code, .language-scss > code {\n  color: #f2a60d;\n}\n\n[class*=\"language-\"] .namespace {\n  opacity: .7;\n}\n\n.token.atrule {\n  color: #3d7b87;\n}\n\n.token.attr-name {\n  color: #00a2c2;\n}\n\n.token.attr-value, .token.attribute {\n  color: #13aa13;\n}\n\n.token.boolean {\n  color: #ce0058;\n}\n\n.token.builtin, .token.cdata, .token.char, .token.class {\n  color: #00a2c2;\n}\n\n.token.class-name {\n  color: #6182b8;\n}\n\n.token.comment {\n  color: #aabfc9;\n}\n\n.token.constant {\n  color: #3d7b87;\n}\n\n.token.deleted {\n  color: #ce0058;\n}\n\n.token.doctype {\n  color: #aabfc9;\n}\n\n.token.entity {\n  color: #ce0058;\n}\n\n.token.function {\n  color: #3d7b87;\n}\n\n.token.hexcode {\n  color: #f2a60d;\n}\n\n.token.id, .token.important {\n  color: #3d7b87;\n  font-weight: bold;\n}\n\n.token.inserted {\n  color: #00a2c2;\n}\n\n.token.keyword {\n  color: #3d7b87;\n}\n\n.token.number {\n  color: #f2a60d;\n}\n\n.token.operator {\n  color: #00a2c2;\n}\n\n.token.prolog {\n  color: #aabfc9;\n}\n\n.token.property {\n  color: #00a2c2;\n}\n\n.token.pseudo-class, .token.pseudo-element {\n  color: #13aa13;\n}\n\n.token.punctuation, .token.regex {\n  color: #00a2c2;\n}\n\n.token.selector {\n  color: #ce0058;\n}\n\n.token.string {\n  color: #13aa13;\n}\n\n.token.symbol {\n  color: #3d7b87;\n}\n\n.token.tag {\n  color: #005461;\n}\n\n.token.unit {\n  color: #f2a60d;\n}\n\n.token.url, .token.variable {\n  color: #ce0058;\n}\n\n.u-hr, .c-library hr, .o-prose hr {\n  padding-bottom: 27px;\n  padding-bottom: var(--space-m-xl);\n  margin: 0 0 27px;\n  margin-bottom: var(--space-m-xl);\n  border: none;\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.u-border-top {\n  border-top: 1px solid #bfd3d6;\n}\n\n.u-border-bottom {\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.u-border {\n  border: 1px solid #bfd3d6;\n}\n\n.o-grid {\n  margin-bottom: -18px;\n  margin-bottom: calc(-1 * var(--gutter) );\n  width: 100%;\n  flex-wrap: wrap;\n  justify-content: stretch;\n  display: flex;\n}\n\n.o-grid--float:after {\n  content: \" \";\n  clear: both;\n  display: table;\n}\n\n.o-grid--between {\n  justify-content: space-between;\n}\n\n.o-grid--no-height-match {\n  align-items: start;\n}\n\n.o-grid > * {\n  margin-bottom: 18px;\n  margin-bottom: var(--gutter);\n  width: 100%;\n}\n\n@media (min-width: 40em) {\n  .o-grid--of-two > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-two.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-two.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-two.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n.o-grid--of-two-switch {\n  justify-content: space-between;\n}\n\n@media (min-width: 40em) {\n  .o-grid--of-two-switch > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two-switch > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two-switch > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-two-switch.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-two-switch.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-two-switch.o-grid--s > :nth-child(2n+1), .o-grid--of-two-switch > :nth-child(2n+2) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-two-late > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two-late > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-two-late.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-two-late.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-two-late.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 22.4em) {\n  .o-grid--of-two-early > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two-early > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-two-early.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-two-early.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-two-early.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 54.9375em) {\n  .o-grid--of-three > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-three.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-three.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-three.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-three > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-three.o-grid--s > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--space-s)  / 3 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-three.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-three.o-grid--s > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 67.9375em) {\n  .o-grid--of-three-late > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-late > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-three-late.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-three-late.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-three-late.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 68em) {\n  .o-grid--of-three-late > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-late > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-three-late.o-grid--s > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--space-s)  / 3 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-three-late.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-three-late.o-grid--s > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 22.4em) and (max-width: 54.9375em) {\n  .o-grid--of-three-early > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-early > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-three-early.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-three-early.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-three-early.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-three-early > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-early > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-three-early.o-grid--s > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--space-s)  / 3 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-three-early.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-three-early.o-grid--s > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 59.9375em) {\n  .o-grid--of-four > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-four > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-four.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-four.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-four.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 60em) {\n  .o-grid--of-four > * {\n    width: calc(25% - 13.6px);\n    width: calc(25% - 3 * var(--gutter)  / 4 - .1px);\n  }\n\n  .o-grid--of-four > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four > :nth-child(4n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-four.o-grid--s > * {\n    width: calc(25% - 13.6px);\n    width: calc(25% - 3 * var(--space-s)  / 4 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-four.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-four.o-grid--s > :nth-child(4n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 22.4em) and (max-width: 59.9375em) {\n  .o-grid--of-four-early > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-four-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four-early > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-four-early.o-grid--s > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--space-s)  / 2 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-four-early.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-four-early.o-grid--s > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 60em) {\n  .o-grid--of-four-early > * {\n    width: calc(25% - 13.6px);\n    width: calc(25% - 3 * var(--gutter)  / 4 - .1px);\n  }\n\n  .o-grid--of-four-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four-early > :nth-child(4n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-four-early.o-grid--s > * {\n    width: calc(25% - 13.6px);\n    width: calc(25% - 3 * var(--space-s)  / 4 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-four-early.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-four-early.o-grid--s > :nth-child(4n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 22.4em) and (max-width: 64.9375em) {\n  .o-grid--of-five > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-five > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-five > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-five.o-grid--s > * {\n    width: calc(33.3333% - 12.1px);\n    width: calc(33.3333% - 2 * var(--space-s)  / 3 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-five.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-five.o-grid--s > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 65em) {\n  .o-grid--of-five > * {\n    width: calc(20% - 14.5px);\n    width: calc(20% - 4 * var(--gutter)  / 5 - .1px);\n  }\n\n  .o-grid--of-five > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-five > :nth-child(5n+1) {\n    margin-left: 0;\n  }\n\n  .o-grid--of-five.o-grid--s > * {\n    width: calc(20% - 14.5px);\n    width: calc(20% - 4 * var(--space-s)  / 5 - .1px);\n    margin-bottom: 18px;\n    margin-bottom: var(--space-s);\n  }\n\n  .o-grid--of-five.o-grid--s > * + * {\n    margin-left: 18px;\n    margin-left: var(--space-s);\n  }\n\n  .o-grid--of-five.o-grid--s > :nth-child(5n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (max-width: 54.9375em) {\n  .o-grid--swipeable {\n    left: 50%;\n    left: calc(50% + var(--scrollbarWidth)  / 2.0001);\n    width: 100vw;\n    width: calc(100vw - var(--scrollbarWidth) );\n    padding-left: var(--gutter);\n    padding-right: var(--gutter);\n    scroll-snap-type: x mandatory;\n    scroll-padding: var(--gutter);\n    -webkit-overflow-scrolling: touch;\n    flex-wrap: nowrap;\n    position: relative;\n    overflow-x: scroll;\n    transform: translateX(-50vw);\n  }\n\n  .o-grid--swipeable > * {\n    max-width: 23em;\n    width: calc(85vw - var(--gutter)  * 2.333);\n    scroll-snap-align: start;\n    scroll-snap-stop: always;\n    flex: none;\n  }\n\n  .o-grid--swipeable > * + * {\n    margin-left: var(--gutter) !important;\n  }\n}\n\n@media (max-width: 55em) {\n  .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+1), .o-grid--float[class*=\"switch\"] > :nth-child(2n+2), .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+2), .o-grid--float[class*=\"switch\"] > :nth-child(2n+1) {\n    position: static;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--4\\/7 > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+2) {\n    width: 57.1429%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--8\\/4 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--8\\/4-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n    width: 65.7143%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--4\\/8 > :nth-child(2n+1), .o-grid--4\\/7 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2), .o-grid--4\\/8-switch > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+1) {\n    width: 31.4286%;\n  }\n\n  .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n    margin-left: 2.85714%;\n    margin-right: 0;\n  }\n\n  .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n    max-width: 828px;\n  }\n\n  .o-grid[class*=\"switch\"] > :nth-child(2n+1) {\n    order: 1;\n  }\n\n  .o-grid--layout, .o-grid--layout > :nth-last-child(1), .o-grid--layout > :nth-last-child(2) {\n    margin-bottom: 0;\n  }\n\n  .o-grid--push {\n    justify-content: space-between;\n  }\n\n  .o-grid--pull {\n    justify-content: flex-start;\n  }\n\n  .o-grid--float {\n    display: block;\n  }\n\n  .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+1), .o-grid--float[class*=\"switch\"] > :nth-child(2n+2) {\n    float: left;\n  }\n\n  .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+2), .o-grid--float[class*=\"switch\"] > :nth-child(2n+1) {\n    float: right;\n  }\n}\n\n@media (min-width: 70em) {\n  .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n    width: 74.2857%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2) {\n    width: 22.8571%;\n  }\n}\n\n.c-library {\n  min-height: 100vh;\n  grid-template-rows: auto 1fr auto;\n  display: grid;\n}\n\n.c-library--components {\n  grid-template-rows: auto 1fr;\n}\n\n.c-library__header {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  padding: 9px;\n  padding: var(--space-2xs);\n  color: #fff;\n  background: #005461;\n  flex-direction: column;\n  align-items: flex-start;\n  font-weight: 700;\n}\n\n@media only screen and (min-width: 650px) {\n  .c-library__header {\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n    flex-direction: row;\n    align-items: center;\n  }\n}\n\n@media only screen and (min-width: 1000px) {\n  .c-library__header {\n    letter-spacing: -.01em;\n    font-size: 15px;\n    font-size: var(--step--1);\n    padding: 18px;\n    padding: var(--space-s) var(--space-s-l);\n  }\n}\n\n.c-library__header img {\n  filter: saturate(0) brightness(10);\n}\n\n.c-library__header .c-library-page-active {\n  position: relative;\n}\n\n.c-library__header .c-library-page-active:after {\n  content: \"\";\n  width: 100%;\n  border-bottom: 1px solid ;\n  position: absolute;\n  bottom: -6px;\n  left: 0;\n}\n\n.c-library__hero {\n  color: #fff;\n  background: linear-gradient(#005461, #0000), linear-gradient(45deg, #00a2c2, #005461);\n}\n\n.c-library__body {\n  grid-template-rows: auto auto;\n  display: grid;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__body {\n    grid-template-columns: 10em 1fr;\n  }\n}\n\n@media only screen and (min-width: 800px) {\n  .c-library__body {\n    grid-template-columns: 17em 1fr;\n  }\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library--components .c-library__body > * {\n    height: calc(100vh - var(--headerHeight)  - 1px);\n    overflow-y: auto;\n  }\n}\n\n.c-library__sidebar {\n  letter-spacing: -.01em;\n  font-size: 12.5px;\n  font-size: var(--step--2);\n  scroll-behavior: none;\n  border-right: 1px solid #ebf1f2;\n  grid-row: -1;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__sidebar {\n    grid-row: auto;\n  }\n}\n\n@media only screen and (min-width: 800px) {\n  .c-library__sidebar {\n    letter-spacing: -.01em;\n    font-size: 15px;\n    font-size: var(--step--1);\n  }\n}\n\n.c-library__sidebar > * {\n  padding: 18px;\n  padding: var(--space-s-l) var(--space-s) var(--space-s-l) var(--space-s-l);\n}\n\n.c-library__sidebar li {\n  position: relative;\n}\n\n.c-library__sidebar li a {\n  color: #006daf;\n}\n\n.c-library__sidebar li a:hover {\n  color: #006daf;\n  text-decoration: underline;\n}\n\n.c-library__sidebar li + li {\n  margin-top: 13.5px;\n  margin-top: var(--space-xs);\n}\n\n.c-library__sidebar ul ul {\n  padding: 13.5px;\n  padding: var(--space-xs);\n  padding-bottom: 0;\n}\n\n.c-library__sidebar ul ul li + li {\n  margin-top: 9px;\n  margin-top: var(--space-2xs);\n}\n\n.c-library__skip-link {\n  padding: 13.5px;\n  padding: var(--space-xs);\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__skip-link {\n    display: none;\n  }\n}\n\n.c-library__logo {\n  max-width: 15%;\n  min-width: 100px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n@media only screen and (min-width: 650px) {\n  .c-library__logo {\n    justify-content: flex-start;\n  }\n}\n\n.c-library__logo-name {\n  padding-left: 13.5px;\n  padding-left: var(--space-xs-s);\n  margin-left: 13.5px;\n  margin-left: var(--space-xs-s);\n  white-space: nowrap;\n  border-left: 1px solid #3d7b87;\n}\n\n.c-library__logo-name span {\n  display: block;\n}\n\n.c-library__logo-name span:nth-last-child(3), .c-library__logo-name span:nth-last-child(1) {\n  text-transform: uppercase;\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  letter-spacing: .08em;\n  color: #bfd3d6;\n}\n\n.c-library__logo-name span:nth-last-child(2) {\n  color: #fff;\n  letter-spacing: -.03em;\n  font-size: 37.32px;\n  font-size: var(--step-4);\n}\n\n.has-js .c-library__sidebar ul > li > ul {\n  display: none;\n}\n\n.has-js .c-library__sidebar ul > .c-library-accordion-open > ul {\n  display: block;\n}\n\n.c-library .c-library-accordion-open > .c-library-accordion__toggle {\n  transform: rotate(180deg);\n}\n\n.c-library .c-library-accordion__toggle {\n  color: #006daf;\n  justify-content: center;\n  align-items: center;\n  padding: .25rem;\n  font-size: 1rem;\n  line-height: 1;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n.c-library-menu-active {\n  font-weight: 700;\n  position: relative;\n}\n\n.c-library-menu-active:before {\n  content: \"▸ \";\n  position: absolute;\n  top: 0;\n  left: -17px;\n}\n\n.c-library-stretch {\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.c-library__main {\n  overflow-y: auto;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__main {\n    overflow-y: scroll;\n  }\n}\n\n.c-library__frame {\n  width: 100%;\n  position: relative;\n}\n\n.c-library__frame-links {\n  right: 0;\n  top: calc(-1 * (var(--space-m)  + var(--space-s) ) );\n  z-index: 1;\n  position: absolute;\n}\n\n.c-library__frame-links a, .c-library__frame-links button {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n  background: #bfd3d6;\n  border-radius: 0 0 .25em .25em;\n  padding: .25em .666em;\n}\n\n.c-library__frame-background {\n  border-radius: 0 0 0 .25em;\n  top: 0;\n}\n\n.c-library__frame iframe {\n  --negative-padding: calc( var(--space-m)  * -1 );\n  height: 100%;\n  width: 100%;\n  width: calc(100% - var(--negative-padding)  * 2);\n  left: var(--negative-padding);\n  top: var(--negative-padding);\n  resize: both;\n  transition: padding .3s cubic-bezier(.22, .61, .36, 1), background-color .3s cubic-bezier(.22, .61, .36, 1);\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__frame iframe {\n    position: absolute;\n  }\n}\n\n.c-library__frame iframe body {\n  border: 2px solid red;\n}\n\n.c-library-code {\n  font-family: Source Code Pro;\n}\n\n.c-library-pre {\n  padding: 18px;\n  padding: var(--space-s);\n  background: #ebf1f2;\n  font-family: Source Code Pro;\n  line-height: 1.4;\n  overflow-x: auto;\n}\n\n.c-library-pre--bordered {\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.c-library-version {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n}\n\n.c-library-status {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n  background: #bfd3d6;\n  border-radius: .25em;\n  padding: .25em .666em;\n}\n\n.c-library-status--ready {\n  color: #fff;\n  background: #13aa13;\n}\n\n.c-library-status--in-production, .c-library-status--development, .c-library-status--placeholder {\n  color: #fff;\n  background: #f2a60d;\n}\n\n.c-library-status--deprecated {\n  color: #fff;\n  background: #ce0058;\n}\n\n.c-library__swatch-grid {\n  margin-bottom: var(--space-m);\n  grid-auto-rows: minmax(4em, auto);\n  gap: 0 1em;\n  display: grid;\n}\n\n@media only screen and (min-width: 680px) {\n  .c-library__swatch-grid {\n    grid-template-rows: 5em auto;\n    grid-template-columns: repeat(5, auto);\n    gap: 0;\n  }\n}\n\n.c-library__swatch-grid--has-labels {\n  grid-auto-flow: row;\n}\n\n@media only screen and (min-width: 40em) {\n  .c-library__swatch-grid--has-labels {\n    grid-template-rows: auto;\n    grid-template-columns: minmax(15%, 15em) auto;\n  }\n}\n\n@media only screen and (min-width: 1000px) {\n  .c-library__swatch-grid--has-labels {\n    grid-template-rows: 5em auto;\n    grid-template-columns: repeat(5, 1fr);\n    grid-auto-flow: column;\n  }\n}\n\n.c-library__swatches, .c-library__swatch-labels {\n  grid-template-columns: repeat(auto-fit, 165px);\n  display: grid;\n}\n\n.c-library__swatch {\n  display: flex;\n}\n\n.c-library__swatch > * {\n  justify-content: center;\n  margin: auto;\n  font-weight: 700;\n}\n\n.c-library__swatches > * {\n  height: 0;\n  padding-bottom: 50%;\n  position: relative;\n}\n\n.c-library__swatches > * > * {\n  text-align: center;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  padding: .5rem;\n  font-weight: 700;\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.c-library__swatch-grid table {\n  letter-spacing: -.01em;\n  font-size: 12.5px;\n  font-size: var(--step--2);\n}\n\n.c-library__swatch-grid table td, .c-library__swatch-grid table th {\n  padding: 9px 0 9px 4.5px;\n  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-3xs);\n}\n\n.c-library__swatch-grid table th {\n  width: 3em;\n}\n\n.c-library__swatch-grid table td {\n  font-family: monospace;\n}\n\n.c-library__image-row {\n  max-width: 100%;\n  display: flex;\n}\n\n.c-library__image-row img {\n  object-fit: contain;\n  width: 6%;\n  flex: auto;\n  margin: 0 2% 0 0;\n}\n\n.c-library__image-row img:last-child {\n  margin-right: 0;\n}\n\n.c-library__space {\n  display: block;\n}\n\n.c-library__space span {\n  height: 0;\n  background: linear-gradient(45deg, #fff3 0%, #fff0 100%), #ce005880;\n  padding-bottom: 100%;\n  display: block;\n  position: relative;\n}\n\n.c-library__space code {\n  margin-left: 18px;\n  margin-left: var(--space-s);\n  white-space: nowrap;\n  line-height: 1;\n  position: absolute;\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n}\n\n.c-library-grid {\n  color: #fff;\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  background: #00758c;\n  justify-content: center;\n  align-items: center;\n  padding: 3rem 1rem;\n  display: flex;\n}\n\n.c-library-grid--alt {\n  background: #3d7b87;\n  padding: 2rem 1rem;\n}\n\n.c-library-grid--alt:before {\n  content: \" \";\n  display: block;\n}\n\n.c-library-grid--first {\n  background: #005461;\n  padding: 2rem 1rem;\n}\n\n.c-library-grid--first:before {\n  content: \"First on mobile\";\n}\n\n.c-library-copy {\n  position: relative;\n}\n\n.c-library-copy__trigger {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-weight: 700;\n  font-size: var(--step--1);\n  padding: 4.5px 9px;\n  padding: var(--space-3xs) var(--space-2xs);\n  letter-spacing: .02em;\n  background: #bfd3d6;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n}\n\n.c-library-copy__trigger:hover {\n  color: #ce0058;\n}\n\n.c-library__typo__sidebar {\n  width: 14.2857%;\n}\n\n.c-library__typo__sidebar span {\n  display: block;\n}\n\n.c-library__typo__sidebar .x2 {\n  height: 2em;\n  border: 1px solid #333;\n  border-width: 1px 0;\n  margin-top: 4.25em;\n  line-height: 2em;\n}\n\n.c-library__typo__main {\n  width: 82.8572%;\n}\n\n.c-library__semi {\n  font-weight: 600;\n}\n\n.c-library__photo-grid {\n  margin-top: 54px;\n  margin-top: var(--space-xl);\n  grid-template-columns: 1fr;\n  gap: 2px;\n  display: grid;\n}\n\n@media only screen and (min-width: 880px) {\n  .c-library__photo-grid {\n    grid-auto-flow: dense;\n    grid-auto-rows: auto;\n  }\n\n  .c-library__photo-grid img {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n\n  .c-library__photo-grid div {\n    grid-area: 1 / 1 / 2 / 3;\n    display: flex;\n  }\n\n  .c-library__photo-grid div h2 {\n    margin: auto var(--space-s);\n  }\n\n  .c-library__photo-grid.grid-1 {\n    grid-template-columns: 40% 20% 40%;\n    grid-template-rows: var(--space-2xl) 400px 400px;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(2) {\n    grid-area: 2 / 1 / 3 / 3;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(3) {\n    grid-area: 1 / 3 / 3 / 4;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(5) {\n    grid-column: 2 / 4;\n  }\n\n  .c-library__photo-grid.grid-2 {\n    grid-template-columns: 50% 50%;\n    grid-template-rows: var(--space-2xl) 300px 300px;\n  }\n\n  .c-library__photo-grid.grid-2 div {\n    grid-column: 1 / 2;\n  }\n\n  .c-library__photo-grid.grid-2 img:nth-child(2) {\n    grid-row: 2 / 4;\n  }\n\n  .c-library__photo-grid.grid-2 img:nth-child(3) {\n    grid-row: 1 / 3;\n  }\n}\n\n.c-library__illustration-grid {\n  gap: var(--gutter);\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  display: grid;\n}\n\n.c-library__illustration-grid :nth-child(2n+1):nth-last-child(5) {\n  grid-column: 1 / -1;\n}\n\n.c-library .c-alert ul li {\n  margin-left: 1em;\n  padding-left: .5rem;\n  list-style: outside url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"8\\\" height=\\\"20\\\" viewBox=\\\"0 0 10 20\\\"><circle cx=\\\"5\\\" cy=\\\"14\\\" r=\\\"3.5\\\" fill=\\\"%2313AA13\\\" fill-rule=\\\"evenodd\\\"/></svg>\");\n}\n\n.c-library .c-alert ul li h3, .c-library .c-alert ul li h4 {\n  color: #13aa13;\n  font-size: 1em;\n  line-height: 1.6;\n}\n\n@media only screen and (max-width: 1050px) {\n  .c-library__logo-name span:nth-last-child(3), .c-library__logo-name span:nth-last-child(1) {\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n  }\n\n  .c-library__logo-name span:nth-last-child(2) {\n    letter-spacing: -.02em;\n    font-size: 21.6px;\n    font-size: var(--step-1);\n  }\n\n  .c-library__header nav li:last-child {\n    display: none;\n  }\n}\n\n@media only screen and (min-width: 650px) and (max-width: 700px), screen and (max-width: 450px) {\n  .c-library__header nav .u-row {\n    gap: 9px;\n    gap: var(--space-2xs);\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n  }\n}\n\n@media only screen and (max-width: 650px) {\n  .c-library__header nav a {\n    padding: 9px 0;\n    padding: var(--space-2xs) 0;\n    display: block;\n  }\n\n  .c-library__header .c-library-page-active:after {\n    bottom: 4.5px;\n    bottom: var(--space-3xs);\n  }\n}\n\n/*# sourceMappingURL=library.css.map */\n","@import './tools';\r\n@import './foundations';\r\n@import './elements/reset';\r\n@import './objects/syntax-highlighting';\r\n@import './utilities/hr.scss';\r\n@import './objects/grid';\r\n\r\n@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');\r\n\r\n.c-library {\r\n  display: grid;\r\n  min-height: 100vh;\r\n  grid-template-rows: auto 1fr auto;\r\n  \r\n  &--components {\r\n    grid-template-rows: auto 1fr;\r\n  }\r\n\r\n  &__header {\r\n    @include step(-1);\r\n    @include padding('2xs');\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    \r\n    background: color('petrol');\r\n    color: color('white');\r\n    font-weight: weight('bold');\r\n    \r\n    @media only screen and (min-width:650px) {\r\n      @include step(-2);\r\n      flex-direction: row;\r\n      align-items: center;\r\n    }\r\n\r\n    @media only screen and (min-width:1000px) {\r\n      @include step(-1);\r\n      @include padding('s', 's-l');\r\n    }\r\n\r\n    img {\r\n      filter: saturate(0) brightness(10);\r\n    }\r\n\r\n    .c-library-page-active {\r\n      position: relative;\r\n\r\n      &:after {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        width: 100%;\r\n        bottom: -6px;\r\n        border-bottom: 1px solid;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__hero {\r\n    color: white;\r\n    background: linear-gradient(color('petrol'), transparent), linear-gradient(45deg, color('blue'), color('petrol'));\r\n  }\r\n\r\n  &__body {\r\n    display: grid;\r\n    grid-template-rows: auto auto;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      grid-template-columns: 10em 1fr;\r\n    }\r\n    \r\n    @media only screen and (min-width: 800px) {\r\n      grid-template-columns: 17em 1fr;\r\n    }\r\n  }\r\n\r\n  @media only screen and (min-width: 600px) {\r\n    &--components &__body > * {\r\n      overflow-y: auto;\r\n      height: calc( 100vh - var(--headerHeight) - 1px );\r\n    }\r\n  }\r\n\r\n  &__sidebar {\r\n    @include step(-2);\r\n    border-right: 1px solid color('petrol', 'step-3');\r\n    grid-row: -1;\r\n    scroll-behavior: none;\r\n  \r\n    @media only screen and (min-width: 600px) {\r\n      grid-row: auto;\r\n    }\r\n\r\n    @media only screen and (min-width: 800px) {\r\n      @include step(-1);\r\n    }\r\n\r\n    & > * {\r\n      @include padding('s-l', 's', 's-l', 's-l');\r\n    }\r\n\r\n    li {\r\n      position: relative;\r\n    }\r\n\r\n    li a {\r\n      color: color('utility-blue');\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n        color: color('utility-blue');\r\n      }\r\n    }\r\n\r\n    li + li {\r\n      @include margin-top('xs');\r\n    }\r\n\r\n    ul ul {\r\n      @include padding('xs');\r\n      padding-bottom: 0;\r\n\r\n      li + li  {\r\n        @include margin-top('2xs');\r\n      }\r\n    }\r\n  }\r\n\r\n  &__skip-link {\r\n    @include padding('xs');\r\n    \r\n    @media only screen and (min-width: 600px) {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  &__logo {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    max-width: 15%;\r\n    min-width: 100px;\r\n\r\n    @media only screen and (min-width:650px) {\r\n      justify-content: flex-start;\r\n    }\r\n    \r\n    &-name {\r\n      @include padding-left('xs-s');\r\n      @include margin-left('xs-s');\r\n      border-left: 1px solid color('petrol', 'step-1');\r\n      white-space: nowrap;\r\n\r\n      span {\r\n        display: block;\r\n\r\n        &:nth-last-child(3),\r\n        &:nth-last-child(1) {\r\n          text-transform: uppercase;\r\n          @include step(-1);\r\n          letter-spacing: 0.08em;\r\n          color: color('petrol', 'step-2');\r\n        }\r\n\r\n        &:nth-last-child(2) {\r\n          color: color('white');\r\n          @include step(4);\r\n        }\r\n\r\n        // &:nth-last-child(3) {\r\n          // color: color('petrol', 'step-1');\r\n        // }\r\n      }\r\n    }\r\n  }\r\n\r\n  .has-js &__sidebar ul > li > ul {\r\n    display: none;\r\n  }\r\n\r\n  .has-js &__sidebar ul > .c-library-accordion-open > ul {\r\n    display: block;\r\n  }\r\n\r\n  .c-library-accordion-open > .c-library-accordion__toggle {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .c-library-accordion__toggle {\r\n    color: color('utility-blue');\r\n    line-height: 1;\r\n    font-size: 1rem;\r\n    position: absolute;\r\n    right: 0;\r\n    top: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 0.25rem;\r\n  }\r\n\r\n  &-menu-active  {\r\n    font-weight: weight('bold');\r\n    position: relative;\r\n\r\n    &::before {\r\n      content: '▸ ';\r\n      position: absolute;\r\n      left: -17px;\r\n      top: 0;\r\n    }\r\n  }\r\n\r\n  &-stretch {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n  }\r\n\r\n  &__main {\r\n    overflow-y: auto;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  &__frame {\r\n    position: relative;\r\n    width: 100%;\r\n    \r\n    &-links {\r\n      position: absolute;\r\n      right: 0;\r\n      top: calc(-1 * (var(--space-m) + var(--space-s)));\r\n      z-index: 1;\r\n\r\n      a, button {\r\n        border-radius: 0 0 0.25em 0.25em;\r\n        @include step(-1);\r\n        padding: 0.25em 0.666em;\r\n        background: color('petrol', 'step-2');\r\n        color: color('grey', 'step-1');\r\n      }\r\n    }\r\n\r\n    &-background {\r\n      border-radius: 0 0 0 0.25em;\r\n      top: 0;\r\n    }\r\n\r\n    iframe {\r\n      --negative-padding: calc( var(--space-m) * -1 );\r\n      height: 100%;\r\n      width: 100%;\r\n      width: calc( 100% - var(--negative-padding) *2 );\r\n      left: var(--negative-padding);\r\n      top: var(--negative-padding);\r\n      transition: \r\n        padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),\r\n        background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n      resize: both;\r\n\r\n      @media only screen and (min-width: 600px) {\r\n        position: absolute;\r\n      }\r\n\r\n      body {\r\n        border: 2px solid red;\r\n      }\r\n    }\r\n  }\r\n\r\n  &-code {\r\n    font-family: 'Source Code Pro';\r\n  }\r\n\r\n  &-pre {\r\n    overflow-x: auto;\r\n    background: color('petrol', 'step-3');\r\n    @include padding('s');\r\n    font-family: 'Source Code Pro';\r\n    line-height: 1.4;\r\n\r\n    &--bordered {\r\n      border-bottom: 1px solid color('petrol', 'step-2');\r\n    }\r\n  }\r\n\r\n  &-version {\r\n    @include step(-1);\r\n    color: color('grey', 'step-1');\r\n  }\r\n\r\n  &-status {\r\n    @include step(-1);\r\n    padding: 0.25em 0.666em;\r\n    border-radius: 0.25em;\r\n    background: color('petrol', 'step-2');\r\n    color: color('grey', 'step-1');\r\n\r\n    &--ready {\r\n      background: color('green');\r\n      color: color('white');\r\n    }\r\n\r\n    &--in-production,\r\n    &--development,\r\n    &--placeholder {\r\n      background: color('utility-orange');\r\n      color: color('white');\r\n    }\r\n\r\n    &--deprecated {\r\n      background: color('red');\r\n      color: color('white');\r\n    }\r\n  }\r\n\r\n  &__swatch-grid {\r\n    display: grid;\r\n    gap: 0 1em;\r\n    grid-auto-rows: minmax(4em, auto);\r\n    margin-bottom: var(--space-m);\r\n    \r\n    @media only screen and (min-width: 680px) {\r\n      gap: 0;\r\n      grid-template-columns: repeat(5, auto);\r\n      grid-template-rows: 5em auto;\r\n    }\r\n  }\r\n  \r\n  &__swatch-grid--has-labels {\r\n    grid-auto-flow: row;\r\n    \r\n    @media only screen and (min-width: 40em) {\r\n      grid-template-columns: minmax(15%, 15em) auto;\r\n      grid-template-rows: auto;\r\n    }\r\n    \r\n    @media only screen and (min-width:1000px) {\r\n      grid-auto-flow: column;\r\n      grid-template-columns: repeat(5, 1fr);\r\n      grid-template-rows: 5em auto;\r\n    }\r\n  }\r\n  \r\n  &__swatches,\r\n  &__swatch-labels {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, 165px);\r\n  }\r\n  \r\n  &__swatch {\r\n    display: flex;\r\n    \r\n    & > * {\r\n      justify-content: center;\r\n      font-weight: weight('bold');\r\n      margin: auto;\r\n    }\r\n  }\r\n  \r\n  &__swatches {\r\n    & > * {\r\n      height: 0;\r\n      padding-bottom: 50%;\r\n      position: relative;\r\n      \r\n      & > * {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        padding: 0.5rem;\r\n        font-weight: weight('bold');\r\n        text-align: center;\r\n        position: absolute;\r\n        height: 100%;\r\n        width: 100%;\r\n        left: 0;\r\n        top: 0;\r\n      }\r\n    }\r\n  }\r\n  \r\n  &__swatch-grid table {\r\n    @include step(-2);\r\n    \r\n    td,\r\n    th {\r\n      @include padding('2xs', 0, '2xs', '3xs');\r\n    }\r\n    th {\r\n      widtH: 3em;\r\n    }\r\n    td {\r\n      font-family: monospace;\r\n    }\r\n  }\r\n\r\n  &__image-row {\r\n    display: flex;\r\n    max-width: 100%;\r\n\r\n    img {\r\n      flex: 1 1 auto;\r\n      margin: 0 2% 0 0;\r\n      object-fit: contain;\r\n      width: 6%;\r\n\r\n      &:last-child {\r\n        margin-right: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__space {\r\n    display: block;\r\n\r\n    span {\r\n      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(206, 0, 88, 0.5);\r\n      height: 0;\r\n      padding-bottom: 100%;\r\n      position: relative;\r\n      display: block;\r\n    }\r\n\r\n    code {\r\n      position: absolute;\r\n      line-height: 1;\r\n      left: 100%;\r\n      top: 50%;\r\n      @include margin-left('s');\r\n      white-space: nowrap;\r\n      transform: translateY(-50%);\r\n    }\r\n  }\r\n\r\n  &-grid {\r\n    background: color('blue', 'step--1');\r\n    padding: 3rem 1rem;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: color('white');\r\n    @include step(-1);\r\n\r\n    &--alt {\r\n      background: color('petrol', 'step-1');\r\n      padding: 2rem 1rem;\r\n  \r\n      &:before {\r\n        content: '\\00a0';\r\n        display: block;\r\n      }\r\n    }\r\n\r\n    &--first {\r\n      background: color('petrol');\r\n      padding: 2rem 1rem;\r\n  \r\n      &:before {\r\n        content: 'First on mobile';\r\n      }\r\n    }\r\n  }\r\n\r\n  &-copy {\r\n    position: relative;\r\n\r\n    &__trigger {\r\n      position: absolute;\r\n      background: color('petrol', 'step-2');\r\n      bottom: 0;\r\n      right: 0;\r\n      font-weight: weight('bold');\r\n      @include step(-1);\r\n      @include padding('3xs', '2xs');\r\n      letter-spacing: ls('2%');\r\n      \r\n      &:hover {\r\n        color: color('red');\r\n      }\r\n    }\r\n  }\r\n\r\n  hr {\r\n    @extend .u-hr\r\n  }\r\n\r\n  &__typo {\r\n\r\n    &__sidebar {\r\n      width: grid-column(2);\r\n\r\n      span {\r\n        display: block;\r\n\r\n      }\r\n\r\n      .x2 {\r\n        margin-top: 4.25em;\r\n        border: 1px solid color(\"grey\");\r\n        border-width: 1px 0;\r\n        height: 2em;\r\n        line-height: 2em;\r\n      }\r\n    }\r\n\r\n    &__main {\r\n      width: grid-column(10);\r\n    }\r\n  }\r\n\r\n  &__semi {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &__photo-grid {\r\n    display: grid;\r\n    gap: 2px;\r\n    grid-template-columns: 1fr;\r\n    @include margin-top(xl);\r\n\r\n    @media only screen and (min-width: 880px) {\r\n      grid-auto-flow: dense;\r\n      grid-auto-rows: auto;\r\n\r\n      img {\r\n        height: 100%;\r\n        width: 100%;\r\n        object-fit: cover;\r\n      }\r\n\r\n      div {\r\n        grid-column: 1/3;\r\n        grid-row: 1/2;\r\n        display: flex;\r\n\r\n        h2 {\r\n          margin: auto var(--space-s);\r\n        }\r\n      }\r\n\r\n      &.grid-1 {\r\n        grid-template-columns: 40% 20% 40%;\r\n        grid-template-rows: var(--space-2xl) 400px 400px;\r\n\r\n        img {  \r\n          &:nth-child(2) {\r\n            grid-row: 2/3;\r\n            grid-column: 1/3;\r\n          }\r\n  \r\n          &:nth-child(3) {\r\n            grid-column: 3/4;\r\n            grid-row: 1/3;\r\n          }\r\n  \r\n          &:nth-child(5) {\r\n            grid-column: 2/4;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.grid-2 {\r\n        grid-template-columns: 50% 50%;\r\n        grid-template-rows: var(--space-2xl) 300px 300px;\r\n\r\n        div {\r\n          grid-column: 1/2;\r\n        }\r\n\r\n        img {\r\n          &:nth-child(2) {\r\n            grid-row: 2/4;\r\n          }\r\n          &:nth-child(3) {\r\n            grid-row: 1/3;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  &__illustration-grid {\r\n      display:grid;\r\n      grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));\r\n      gap:var(--gutter);\r\n      \r\n      & :nth-child(odd):nth-last-child(5) {\r\n          grid-column: 1/-1;\r\n      }\r\n  }\r\n\r\n  .c-alert ul li {\r\n    list-style: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>') outside;    \r\n    margin-left: 1em;\r\n    padding-left: 0.5rem;\r\n\r\n    h3,\r\n    h4 {\r\n      line-height: lh('prose');\r\n      font-size: 1em;\r\n      color: color('green');\r\n    }\r\n  }\r\n}\r\n\r\n// Header responsive styles\r\n@media only screen and (max-width: 1050px) {\r\n  .c-library__logo-name span:nth-last-child(3),\r\n  .c-library__logo-name span:nth-last-child(1) {\r\n    @include step(-2);\r\n  }\r\n\r\n  .c-library__logo-name span:nth-last-child(2) {\r\n    @include step(1);\r\n  }\r\n\r\n  .c-library__header nav li:last-child {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 650px) and (max-width: 700px),\r\n            screen and (max-width: 450px) {\r\n  .c-library__header nav .u-row {\r\n    @include space('gap', '2xs');\r\n    @include step(-2);\r\n  }\r\n}\r\n\r\n.c-library__header {\r\n  @media only screen and (max-width: 650px) {\r\n    nav a {\r\n      @include padding('2xs',0);\r\n      display: block;\r\n    }\r\n\r\n    .c-library-page-active:after {\r\n      @include space('bottom','3xs');\r\n    }\r\n  }\r\n}","// Breakout\r\n// Force an element to fill 100% of the window width, ignoring its container\r\n\r\n@mixin breakout($pad: 0) {\r\n    left: 50%;\r\n    left: calc( 50% + var(--scrollbarWidth)/2.0001 );\r\n    position: relative;\r\n    transform: translateX(-50vw);\r\n    width: 100vw;\r\n    width: calc( 100vw - var(--scrollbarWidth) );\r\n    padding-left: safe-space($pad);\r\n    padding-right: safe-space($pad);\r\n}\r\n\r\n.u-breakout {\r\n    @include breakout\r\n}","// Cutoff corner effect\r\n@mixin cutoff($corner:\"bottom-right\", $size:var(--gutter)) {\r\n    \r\n    $offset : calc(100% - $size);\r\n\r\n    // Co-ordinates for the polygon\r\n    $co1: \"0 0\";\r\n    $co2: \"100% 0\";\r\n    $co3: \"100% 100%\";\r\n    $co4: \"0 100%\";\r\n\r\n    // Override the basic co-ordinates\r\n    @if $corner == \"top-left\" {\r\n        $co1: \"0 #{$size}, #{$size} 0\";\r\n    } @else if $corner == \"top-right\" {\r\n        $co2: \"#{$offset} 0, 100% #{$size}\";\r\n    } @else if $corner == \"bottom-left\" {\r\n        $co4: \"#{$size} 100%, 0 #{$offset}\";\r\n    } @else {\r\n        $co3: \"100% #{$offset}, #{$offset} 100%\";\r\n    }\r\n\r\n    clip-path: polygon(\r\n        #{$co1}, #{$co2}, #{$co3}, #{$co4}\r\n    );\r\n}\r\n\r\n.u-cutoff {\r\n    @include cutoff\r\n}\r\n\r\n.u-cutoff--top-right {\r\n    @include cutoff(\"top-right\")\r\n}\r\n\r\n.u-cutoff--top-left {\r\n    @include cutoff(\"top-left\")\r\n}\r\n\r\n.u-cutoff--bottom-left {\r\n    @include cutoff(\"bottom-left\")\r\n}\r\n\r\n.u-cutoff--m {\r\n    @include cutoff($size: var(--space-m))\r\n}\r\n\r\n.u-cutoff--xl {\r\n    @include cutoff($size: var(--space-xl))\r\n}\r\n","$weights: (\r\n  base: 400,\r\n  semi: 600,\r\n  bold: 700\r\n);\r\n\r\n$line-heights: (\r\n  base: 1.2,\r\n  prose: 1.6,\r\n);\r\n\r\n$letter-spacings: (\r\n  '4%': 0.04em,\r\n  '2%': 0.02em,\r\n  base: -0.01em,\r\n  '-2%': -0.02em,\r\n  '-3%': -0.03em\r\n);\r\n\r\n$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n\r\n/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, */\r\n$steps: (\r\n  -2: (\r\n    min: 12.64,\r\n    max: 12.50,\r\n    ls: base\r\n  ),\r\n\r\n  -1: (\r\n    min: 14.22,\r\n    max: 15.00,\r\n    ls: base\r\n  ),\r\n\r\n  0: (\r\n    min: 16.00,\r\n    max: 18.00,\r\n    ls: base\r\n  ),\r\n\r\n  1: (\r\n    min: 18.00,\r\n    max: 21.60,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  2: (\r\n    min: 20.25,\r\n    max: 25.92,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  3: (\r\n    min: 22.78,\r\n    max: 31.10,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  4: (\r\n    min: 25.63,\r\n    max: 37.32,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  5: (\r\n    min: 28.83,\r\n    max: 44.79,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  6: (\r\n    min: 32.44,\r\n    max: 53.75,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  7: (\r\n    min: 36.49,\r\n    max: 64.50,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  8: (\r\n    min: 41.05,\r\n    max: 77.40,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  9: (\r\n    min: 46.18,\r\n    max: 92.88,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  10: (\r\n    min: 51.96,\r\n    max: 111.45,\r\n    ls: '-3%'\r\n  )\r\n);\r\n\r\n$f-min-width: 320;\r\n$f-max-width: 1332;\r\n\r\n:root {\r\n  --fluid-min-width: #{$f-min-width};\r\n  --fluid-max-width: #{$f-max-width};\r\n\r\n  --fluid-screen: 100vw;\r\n  --fluid-bp: calc(\r\n    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /\r\n      (var(--fluid-max-width) - var(--fluid-min-width))\r\n  );\r\n}\r\n\r\n@media screen and (min-width: #{$f-max-width * 1px}) {\r\n  :root {\r\n    --fluid-screen: calc(var(--fluid-max-width) * 1px);\r\n  }\r\n}\r\n\r\n:root {\r\n  @each $name, $step in $steps {\r\n    --f-#{$name}-min: #{map-get($step, min)};\r\n    --f-#{$name}-max: #{map-get($step, max)};\r\n    --step-#{$name}: calc(\r\n      ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) *\r\n        var(--fluid-bp)\r\n    );\r\n  }\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: #{'../fonts/inter-regular.woff2'} format(\"woff2\"),\r\n       #{'../fonts/inter-regular.woff'} format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 600;\r\n  font-display: swap;\r\n  src: #{'../fonts/inter-semibold.woff2'} format(\"woff2\"),\r\n       #{'../fonts/inter-semibold.woff'} format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: #{'../fonts/inter-bold.woff2'} format(\"woff2\"),\r\n       #{'../fonts/inter-bold.woff'} format(\"woff\");\r\n}","@use 'sass:math';\r\n\r\n$wrapper: 78.75rem;\r\n\r\n$space-base: 18;\r\n$spaces: (\r\n  \"3xs\": 0.25,\r\n  \"2xs\": 0.5,\r\n  \"xs\": 0.75,\r\n  \"s\": 1,\r\n  \"m\": 1.5,\r\n  \"l\": 2,\r\n  \"xl\": 3,\r\n  \"2xl\": 4,\r\n  \"3xl\": 6,\r\n  \"4xl\": 8,\r\n);\r\n\r\n:root {\r\n  --max-screen: #{ math.div($f-max-width, 16) };\r\n  --fc-screen: 100vw;\r\n  --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));\r\n\r\n  --fc-base: #{$space-base};\r\n\r\n  @each $space, $_ in $spaces {\r\n    --fc-#{$space}: #{space-size($space)};\r\n    --space-#{$space}: calc(var(--fc-#{$space}) / 16 * 1rem);\r\n  }\r\n\r\n  $min: \"\";\r\n  @each $max, $_ in $spaces {\r\n    @if ($min) {\r\n      @include space-between($min, $max);\r\n    }\r\n    $min: $max;\r\n  }\r\n\r\n  @include space-between(s, l);\r\n  @include space-between(s, m);\r\n  @include space-between(xs, l);\r\n  @include space-between(m, xl);\r\n  @include space-between(l, 2xl);\r\n  @include space-between(s, xl);\r\n  @include space-between(l, 3xl);\r\n  @include space-between(xl, 3xl);\r\n  @include space-between(l, 4xl);\r\n  @include space-between(3xs, m);\r\n\r\n  --gutter: var(--space-s-l);\r\n}\r\n\r\n@media screen and (min-width: 75em) {\r\n  :root {\r\n    --fc-screen: calc(var(--max-screen) * 1rem);\r\n  }\r\n}\r\n","@import './breakout.scss';\r\n@import './cutoff.scss';\r\n\r\n@function color($palette, $tone: 'step-0') {\r\n  @return map-get(map-get($colours, $palette), $tone);\r\n}\r\n\r\n@function lh($size: 'base') {\r\n  @return map-get($line-heights, $size);\r\n}\r\n\r\n@function ls($size: 'base') {\r\n  @return map-get($letter-spacings, $size);\r\n}\r\n\r\n@function weight($size: 'base') {\r\n  @return map-get($weights, $size);\r\n}\r\n\r\n@mixin step($step: 0) {\r\n  letter-spacing: ls(map-get(map-get($steps, $step), ls));\r\n  font-size: 1px * map-get(map-get($steps, $step), max);\r\n  font-size: var(--step-#{$step});\r\n}\r\n\r\n@mixin flow($size) {\r\n  & > * + * {\r\n    @include margin-top($size);\r\n  }\r\n}\r\n\r\n@function space-size($key: s) {\r\n  @return $space-base * map-get($spaces, $key);\r\n}\r\n\r\n@function space-unit($key: s) {\r\n  @return space-size($key) * 1px;\r\n}\r\n\r\n@mixin space-between($min, $max) {\r\n  --space-#{$min}-#{$max}: calc(\r\n    ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) *\r\n      var(--fluid-bp)\r\n  );\r\n}\r\n\r\n@function safe-space($value, $safe: false) {\r\n  @if (type-of($value) == number) {\r\n    @return $value;\r\n  } @else if (type-of($value) == null) {\r\n    @return 0;\r\n  } @else if (type-of($value) == string) {\r\n    $split: get-min-max($value);\r\n    $min: nth($split, 1);\r\n\r\n    @if ($value == 'gutter') {\r\n      @if ($safe) {\r\n        @return space-unit(s);\r\n      } @else {\r\n        @return var(--gutter);        \r\n      }\r\n    }\r\n\r\n    @if ($value == 'auto') {\r\n      @return auto;\r\n    }\r\n    \r\n    @if ($safe) {\r\n      @return space-unit($min);\r\n    } @else {\r\n      @return var(--space-#{$value});      \r\n    }\r\n  }\r\n}\r\n\r\n@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }\r\n@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }\r\n@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }\r\n@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }\r\n@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }\r\n@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }\r\n@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }\r\n@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }\r\n@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }\r\n@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }\r\n@mixin top($arg1: '') { @include space('top', $arg1); }\r\n\r\n@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {\r\n  @if ($arg4 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);\r\n  } @else if ($arg3 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);\r\n  } @else if ($arg2 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2);\r\n  } @else if ($arg1 != '') {\r\n    #{$property}: safe-space($arg1, true);\r\n    #{$property}: safe-space($arg1);\r\n  }\r\n}\r\n\r\n@function get-min-max($value) {\r\n  $split: str-split($value, '-');\r\n  $min: nth($split, 1);\r\n\r\n  @if (length($split) == 1) {\r\n    @return ($min, null);\r\n  } @else {\r\n    @return ($min, nth($split, 2))\r\n  }\r\n}\r\n\r\n@function str-split($string, $separator) {\r\n  // empty array/list\r\n  $split-arr: ();\r\n  // first index of separator in string\r\n  $index : str-index($string, $separator);\r\n  // loop through string\r\n  @while $index != null {\r\n      // get the substring from the first character to the separator\r\n      $item: str-slice($string, 1, $index - 1);\r\n      // push item to array\r\n      $split-arr: append($split-arr, $item);\r\n      // remove item and separator from string\r\n      $string: str-slice($string, $index + 1);\r\n      // find new index of separator\r\n      $index : str-index($string, $separator);\r\n  }\r\n  // add the remaining string to list (the last item)\r\n  $split-arr: append($split-arr, $string);\r\n\r\n  @return $split-arr;\r\n}\r\n\r\n@mixin hyphenated {\r\n  @media only screen and (max-width: 28rem) {\r\n    word-break: break-word;\r\n    -webkit-hyphens: auto;\r\n    -ms-hyphens: auto;\r\n    hyphens: auto;\r\n  }\r\n\r\n  @media only screen and (max-width: 70rem) {\r\n    [lang='de-DE'] & {\r\n      word-break: break-word;\r\n      -webkit-hyphens: auto;\r\n      -ms-hyphens: auto;\r\n      hyphens: auto;\r\n    }\r\n  }\r\n}\r\n\r\n@mixin clickable-parent {\r\n  position: static;\r\n\r\n  &:focus {\r\n    outline: 0;\r\n  }\r\n\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    cursor: pointer !important;\r\n    display: flex;\r\n  }\r\n}","@keyframes spin {\r\n    from { transform: rotate(0deg) }\r\n    to { transform: rotate(360deg) }\r\n}","\r\n*,\r\n*:before,\r\n*:after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: stretch;\r\n  min-height: 100vh;\r\n  margin: 0;\r\n}\r\n\r\nhtml {\r\n  scroll-behavior: smooth;\r\n}\r\n\r\nblockquote,\r\npre,\r\nol,\r\nul,\r\nfigure {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\nimg {\r\n  max-width: 100%;\r\n  display: block;\r\n  height: auto;\r\n  border: none;\r\n}\r\n\r\narticle,\r\naside,\r\nfigure,\r\nfooter,\r\nheader,\r\naside,\r\nmain,\r\nnav {\r\n  display: block;\r\n}\r\n\r\niframe {\r\n  border: none;\r\n}\r\n\r\n// Typography\r\n\r\n@mixin mp-reset-base {\r\n  font: weight() #{1.125rem}/lh() $font-stack;\r\n  @include step();\r\n  color: color('grey');\r\n}\r\n\r\nbody {\r\n  @include mp-reset-base();\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nul,\r\nol,\r\ndl {\r\n  margin: 0\r\n}\r\n\r\nul, ol, p {\r\n  line-height: lh();\r\n}\r\n\r\na {\r\n  text-decoration: none;\r\n}\r\n\r\na,\r\na:hover {\r\n  cursor: pointer;\r\n  color: inherit;\r\n}\r\n\r\n// Lists\r\n\r\n.mp ol,\r\n.mp ul {\r\n  list-style: none;\r\n}\r\n\r\n// Font styles\r\n\r\ncite,\r\naddress {\r\n  font-style: normal;\r\n}\r\n\r\n// Form\r\n\r\n[type=\"submit\"],\r\n[type=\"button\"],\r\nbutton {\r\n  border-radius: 0;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  appearance: none;\r\n  padding: 0;\r\n  cursor: pointer;\r\n  border: none;\r\n  color: inherit;\r\n  font: inherit;\r\n}\r\n\r\nlabel {\r\n  cursor: pointer;\r\n}\r\n\r\nfieldset {\r\n  border: 0;\r\n  padding: 0.01em 0 0 0;\r\n}\r\n\r\n// Animation\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n  * {\r\n    -webkit-animation: none!important;\r\n    animation: none!important;\r\n    transition: none!important;\r\n    scroll-behavior: auto!important;\r\n  }\r\n}\r\n","code[class*=\"language-\"],\r\npre[class*=\"language-\"] {\r\n\ttext-align: left;\r\n\twhite-space: pre;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n  color: color('petrol', 'step-1');\r\n  background: color('petrol', 'step-3');\r\n  font-family: 'Source Code Pro', monospace;\r\n\tfont-size: 1rem;\r\n\tline-height: 1.5em;\r\n\r\n\t-moz-tab-size: 4;\r\n\t-o-tab-size: 4;\r\n\ttab-size: 4;\r\n\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n\r\n\t.c-alert & {\r\n\t\tbackground: transparent;\r\n\t}\r\n}\r\n\r\ncode[class*=\"language-\"]::-moz-selection,\r\npre[class*=\"language-\"]::-moz-selection,\r\ncode[class*=\"language-\"] ::-moz-selection,\r\npre[class*=\"language-\"] ::-moz-selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\ncode[class*=\"language-\"]::selection,\r\npre[class*=\"language-\"]::selection,\r\ncode[class*=\"language-\"] ::selection,\r\npre[class*=\"language-\"] ::selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\n:not(pre) > code[class*=\"language-\"] {\r\n\twhite-space: normal;\r\n\tborder-radius: 0.2em;\r\n\tpadding: 0.1em;\r\n}\r\n\r\npre[class*=\"language-\"] {\r\n\toverflow: auto;\r\n  position: relative;\r\n  @include padding('s');\r\n}\r\n\r\n.language-css > code,\r\n.language-sass > code,\r\n.language-scss > code {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n[class*=\"language-\"] .namespace {\r\n\topacity: 0.7;\r\n}\r\n\r\n.token.atrule {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.attr-name {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.attr-value {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.attribute {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.boolean {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.builtin {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.cdata {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.char {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class-name {\r\n\tcolor: #6182b8;\r\n}\r\n\r\n.token.comment {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.constant {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.deleted {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.doctype {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.entity {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.function {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.hexcode {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.id {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.important {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.inserted {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.keyword {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.number {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.operator {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.prolog {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.property {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.pseudo-class {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.pseudo-element {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.punctuation {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.regex {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.selector {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.string {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.symbol {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.tag {\r\n\tcolor: color('petrol');\r\n}\r\n\r\n.token.unit {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.url {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.variable {\r\n\tcolor: color('red');\r\n}\r\n\r\n",".u-hr {\r\n  margin: 0;\r\n  border: none;\r\n  @include padding-bottom('m-xl');\r\n  @include margin-bottom('m-xl');\r\n  border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-top {\r\n  border-top: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-bottom {\r\n  border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border {\r\n  border: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.o-prose hr {\r\n  @extend .u-hr\r\n}","@use 'sass:math';\r\n\r\n// Layout\r\n$grid-width: 1260;\r\n$grid-columns: 12;\r\n$grid-column-width: 72;\r\n$grid-gutter-width: 36;\r\n\r\n@function grid-gutter() {\r\n  @return math.div($grid-gutter-width, $grid-width) * 100%;\r\n}\r\n\r\n@function grid-column($count) {\r\n  @return math.div(\r\n    (\r\n      ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)\r\n    ), $grid-width\r\n  ) * 100%;\r\n}\r\n\r\n@function grid-column-px($count) {\r\n  @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;\r\n}\r\n\r\n@mixin o-grid($columns) {\r\n  $width: math.div(100%, $columns);\r\n  \r\n  & > * {\r\n    width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);\r\n    width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);\r\n    // @include margin-bottom(0);\r\n    \r\n    & + * {\r\n      @include margin-left(\"gutter\");\r\n    }\r\n\r\n    &:nth-child(#{$columns}n + 1) {\r\n      margin-left: 0;\r\n    }\r\n  }\r\n\r\n  &.o-grid--s {\r\n    & > * {\r\n      width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);\r\n      width: calc(($width - (($columns - 1) * var(--space-s) / $columns)) - 0.1px);\r\n      @include margin-bottom(\"s\");\r\n      \r\n      & + * {\r\n        @include margin-left(\"s\");\r\n      }\r\n\r\n      &:nth-child(#{$columns}n + 1) {\r\n        margin-left: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.o-grid {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: stretch;\r\n  margin-bottom: calc(-1 * space-unit());\r\n  margin-bottom: calc(-1 * var(--gutter));\r\n  width: 100%;\r\n\r\n  &--float:after {\r\n    content: \" \";\r\n    display: table;\r\n    clear: both;\r\n  }\r\n\r\n  &--between {\r\n    justify-content: space-between;\r\n  }\r\n\r\n  &--no-height-match {\r\n    align-items: start;\r\n  }\r\n\r\n  & > * {\r\n    @include margin-bottom(\"gutter\");\r\n    width: 100%;\r\n  }\r\n\r\n  &--of-two {\r\n    @media (min-width: 40em) {\r\n      @include o-grid(2)\r\n    }\r\n  }\r\n\r\n  &--of-two-switch {\r\n    justify-content: space-between;\r\n    \r\n    @media (min-width: 40em) {\r\n      @include o-grid(2);\r\n    \r\n      &>:nth-child(2n + 2) {\r\n        @include margin-left(0);\r\n      }\r\n    }\r\n  }\r\n\r\n  &--of-two-late {\r\n    @media (min-width: 55em) {\r\n      @include o-grid(2)\r\n    }\r\n  }\r\n\r\n  &--of-two-early {\r\n    @media (min-width: 22.4em) {\r\n      @include o-grid(2)\r\n    }\r\n  }\r\n\r\n  &--of-three {\r\n    @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 55em) {\r\n      @include o-grid(3)\r\n    }\r\n  }\r\n\r\n  &--of-three-late {\r\n    @media (min-width: 38em) and (max-width: 67.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 68em) {\r\n      @include o-grid(3)\r\n    }\r\n  }\r\n\r\n  &--of-three-early {\r\n    @media (min-width: 22.4em) and (max-width: 54.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 55em) {\r\n      @include o-grid(3)\r\n    }\r\n  }\r\n\r\n  &--of-four {\r\n    @media (min-width: 38em) and (max-width: 59.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 60em) {\r\n      @include o-grid(4)\r\n    }\r\n  }\r\n\r\n  &--of-four-early {\r\n    @media (min-width: 22.4em) and (max-width: 59.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 60em) {\r\n      @include o-grid(4)\r\n    }\r\n  }\r\n\r\n  &--of-five {\r\n    @media (min-width: 22.4em) and (max-width: 64.9375em) {\r\n      @include o-grid(3)\r\n    }\r\n\r\n    @media (min-width: 65em) {\r\n      @include o-grid(5)\r\n    }\r\n  }\r\n\r\n  &--swipeable {\r\n    @media (max-width: 54.9375em) {\r\n      @include breakout('gutter');\r\n      flex-wrap: nowrap;\r\n      overflow-x: scroll;\r\n      scroll-snap-type: x mandatory;\r\n      scroll-padding: var(--gutter);\r\n      -webkit-overflow-scrolling: touch;\r\n\r\n      & > * {\r\n        flex: 0 0 auto;\r\n        max-width: 23em;\r\n        width: calc(85vw - var(--gutter)*2.333); // !important\r\n        scroll-snap-align: start;\r\n        scroll-snap-stop: always;\r\n      }\r\n\r\n      & > * + * {\r\n        margin-left: var(--gutter) !important;\r\n      }\r\n    }\r\n  }\r\n\r\n  // Prevents overlap on floated sticky elements when stacked\r\n  @media (max-width: 55em) {\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 1),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 2),\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 2),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 1) {\r\n      position: static;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 55em) {\r\n    &--4\\/7 > :nth-child(2n + 2),\r\n    &--4\\/7-switch > :nth-child(2n + 2) {\r\n      width: grid-column(7)\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 1),\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--8\\/4 > :nth-child(2n + 1),\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--4\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/4-switch > :nth-child(2n + 2),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1),\r\n    &--4\\/8-switch > :nth-child(2n + 1) {\r\n      width: grid-column(8);\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--8\\/4 > :nth-child(2n + 2),\r\n    &--3\\/9 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 1),\r\n    &--4\\/8 > :nth-child(2n + 1),\r\n    &--4\\/7 > :nth-child(2n + 1),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/4-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 2),\r\n    &--4\\/8-switch > :nth-child(2n + 2),\r\n    &--4\\/7-switch > :nth-child(2n + 1) {\r\n      width: grid-column(4);\r\n    }\r\n\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--4\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--8\\/4 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/4-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1),\r\n    &--4\\/8-switch > :nth-child(2n + 1) {\r\n      margin-left: grid-gutter();\r\n      margin-right: 0;\r\n    }\r\n\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 1) {\r\n      max-width: grid-column-px(8);\r\n    }\r\n\r\n    &[class*=\"switch\"] > :nth-child(2n + 1) {\r\n      order: 1;\r\n    }\r\n\r\n    &--layout {\r\n      margin-bottom: 0;\r\n\r\n      & > :nth-last-child(1),\r\n      & > :nth-last-child(2) {\r\n        margin-bottom: 0;\r\n      }\r\n    }\r\n\r\n    &--push {\r\n      justify-content: space-between;\r\n    }\r\n\r\n    &--pull {\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    &--float {\r\n      display: block;\r\n    }\r\n\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 1),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 2) {\r\n      float: left;\r\n    }\r\n\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 2),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 1) {\r\n      float: right;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 70em) {\r\n    &--9\\/3 > :nth-child(2n + 1),\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1) {\r\n      width: grid-column(9);\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--3\\/9 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 1),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 2) {\r\n      width: grid-column(3);\r\n    }\r\n  }\r\n}\r\n"],"names":[],"version":3,"file":"library.css.map"}