diff --git a/packages/css/src/__snapshots__/render-sass.test.js.snap b/packages/css/src/__snapshots__/render-sass.test.js.snap index 397f9d5..80eb933 100644 --- a/packages/css/src/__snapshots__/render-sass.test.js.snap +++ b/packages/css/src/__snapshots__/render-sass.test.js.snap @@ -1,12 +1,970 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`render() Renders main css file with custom optional settings 1`] = ` -":root{--color-black: #000;--color-shark: #252729;--color-tundora: #454647;--color-abbey: #575A5C;--color-silver: #BCBDBE;--color-alabaster: #f8f8f8;--color-white: #fff;--break-sm: 420px;--break-md: 768px;--break-lg: 1024px;--space-0: 0;--space-05x: 4px;--space-1x: 8px;--space-2x: 16px;--space-10x: 80px;--font-heading: Lora,serif;--font-body: Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;--layer-under: -1;--layer-over: 1;--radius-none: 0;--radius-small: 4px;--radius-round: 50%;--line-compact: 1.1;--line-default: 1.5}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:\\"monospace\\", monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:\\"monospace\\", monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\\"button\\"],[type=\\"reset\\"],[type=\\"submit\\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\\"button\\"]::-moz-focus-inner,[type=\\"reset\\"]::-moz-focus-inner,[type=\\"submit\\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\\"button\\"]:-moz-focusring,[type=\\"reset\\"]:-moz-focusring,[type=\\"submit\\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\\"checkbox\\"],[type=\\"radio\\"]{box-sizing:border-box;padding:0}[type=\\"number\\"]::-webkit-inner-spin-button,[type=\\"number\\"]::-webkit-outer-spin-button{height:auto}[type=\\"search\\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\\"search\\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.antialias{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (min-width: 420px){.sm\\\\:antialias{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media screen and (min-width: 768px){.md\\\\:antialias{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media screen and (min-width: 1024px){.lg\\\\:antialias{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}.child-my-0>*:first-child{margin-top:0}.child-my-0>*:last-child{margin-bottom:0}.child-mx-0>*:first-child{margin-left:0}.child-mx-0>*:last-child{margin-right:0}.sr-only,.sr-focus:not(:focus){position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}@media screen and (min-width: 420px){.sm\\\\:sr-only,.sm\\\\:sr-focus:not(:focus){position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}}@media screen and (min-width: 768px){.md\\\\:sr-only,.md\\\\:sr-focus:not(:focus){position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}}@media screen and (min-width: 1024px){.lg\\\\:sr-only,.lg\\\\:sr-focus:not(:focus){position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}}.list-reset{list-style:none;padding:0}@media screen and (min-width: 420px){.sm\\\\:list-reset{list-style:none;padding:0}}@media screen and (min-width: 768px){.md\\\\:list-reset{list-style:none;padding:0}}@media screen and (min-width: 1024px){.lg\\\\:list-reset{list-style:none;padding:0}}.bg-black{background-color:#000}.bg-shark{background-color:#252729}.bg-tundora{background-color:#454647}.bg-abbey{background-color:#575A5C}.bg-silver{background-color:#BCBDBE}.bg-alabaster{background-color:#f8f8f8}.bg-white{background-color:#fff}@media screen and (min-width: 420px){.sm\\\\:bg-black{background-color:#000}.sm\\\\:bg-shark{background-color:#252729}.sm\\\\:bg-tundora{background-color:#454647}.sm\\\\:bg-abbey{background-color:#575A5C}.sm\\\\:bg-silver{background-color:#BCBDBE}.sm\\\\:bg-alabaster{background-color:#f8f8f8}.sm\\\\:bg-white{background-color:#fff}}@media screen and (min-width: 768px){.md\\\\:bg-black{background-color:#000}.md\\\\:bg-shark{background-color:#252729}.md\\\\:bg-tundora{background-color:#454647}.md\\\\:bg-abbey{background-color:#575A5C}.md\\\\:bg-silver{background-color:#BCBDBE}.md\\\\:bg-alabaster{background-color:#f8f8f8}.md\\\\:bg-white{background-color:#fff}}@media screen and (min-width: 1024px){.lg\\\\:bg-black{background-color:#000}.lg\\\\:bg-shark{background-color:#252729}.lg\\\\:bg-tundora{background-color:#454647}.lg\\\\:bg-abbey{background-color:#575A5C}.lg\\\\:bg-silver{background-color:#BCBDBE}.lg\\\\:bg-alabaster{background-color:#f8f8f8}.lg\\\\:bg-white{background-color:#fff}}.c-black{color:#000}.c-shark{color:#252729}.c-tundora{color:#454647}.c-abbey{color:#575A5C}.c-silver{color:#BCBDBE}.c-alabaster{color:#f8f8f8}.c-white{color:#fff}@media screen and (min-width: 420px){.sm\\\\:c-black{color:#000}.sm\\\\:c-shark{color:#252729}.sm\\\\:c-tundora{color:#454647}.sm\\\\:c-abbey{color:#575A5C}.sm\\\\:c-silver{color:#BCBDBE}.sm\\\\:c-alabaster{color:#f8f8f8}.sm\\\\:c-white{color:#fff}}@media screen and (min-width: 768px){.md\\\\:c-black{color:#000}.md\\\\:c-shark{color:#252729}.md\\\\:c-tundora{color:#454647}.md\\\\:c-abbey{color:#575A5C}.md\\\\:c-silver{color:#BCBDBE}.md\\\\:c-alabaster{color:#f8f8f8}.md\\\\:c-white{color:#fff}}@media screen and (min-width: 1024px){.lg\\\\:c-black{color:#000}.lg\\\\:c-shark{color:#252729}.lg\\\\:c-tundora{color:#454647}.lg\\\\:c-abbey{color:#575A5C}.lg\\\\:c-silver{color:#BCBDBE}.lg\\\\:c-alabaster{color:#f8f8f8}.lg\\\\:c-white{color:#fff}}.lh-compact{line-height:1.1}.lh-default{line-height:1.5}@media screen and (min-width: 420px){.sm\\\\:lh-compact{line-height:1.1}.sm\\\\:lh-default{line-height:1.5}}@media screen and (min-width: 768px){.md\\\\:lh-compact{line-height:1.1}.md\\\\:lh-default{line-height:1.5}}@media screen and (min-width: 1024px){.lg\\\\:lh-compact{line-height:1.1}.lg\\\\:lh-default{line-height:1.5}}.ff-heading{font-family:Lora,serif}.ff-body{font-family:Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}@media screen and (min-width: 420px){.sm\\\\:ff-heading{font-family:Lora,serif}.sm\\\\:ff-body{font-family:Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}}@media screen and (min-width: 768px){.md\\\\:ff-heading{font-family:Lora,serif}.md\\\\:ff-body{font-family:Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}}@media screen and (min-width: 1024px){.lg\\\\:ff-heading{font-family:Lora,serif}.lg\\\\:ff-body{font-family:Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}}.fw-normal{font-weight:400}.fw-bold{font-weight:700}@media screen and (min-width: 420px){.sm\\\\:fw-normal{font-weight:400}.sm\\\\:fw-bold{font-weight:700}}@media screen and (min-width: 768px){.md\\\\:fw-normal{font-weight:400}.md\\\\:fw-bold{font-weight:700}}@media screen and (min-width: 1024px){.lg\\\\:fw-normal{font-weight:400}.lg\\\\:fw-bold{font-weight:700}}.z-under{z-index:-1}.z-over{z-index:1}@media screen and (min-width: 420px){.sm\\\\:z-under{z-index:-1}.sm\\\\:z-over{z-index:1}}@media screen and (min-width: 768px){.md\\\\:z-under{z-index:-1}.md\\\\:z-over{z-index:1}}@media screen and (min-width: 1024px){.lg\\\\:z-under{z-index:-1}.lg\\\\:z-over{z-index:1}}.rc-none{border-radius:0}.rc-small{border-radius:4px}.rc-round{border-radius:50%}@media screen and (min-width: 420px){.sm\\\\:rc-none{border-radius:0}.sm\\\\:rc-small{border-radius:4px}.sm\\\\:rc-round{border-radius:50%}}@media screen and (min-width: 768px){.md\\\\:rc-none{border-radius:0}.md\\\\:rc-small{border-radius:4px}.md\\\\:rc-round{border-radius:50%}}@media screen and (min-width: 1024px){.lg\\\\:rc-none{border-radius:0}.lg\\\\:rc-small{border-radius:4px}.lg\\\\:rc-round{border-radius:50%}}.float-l{float:left}.float-r{float:right}.float-0{float:none}@media screen and (min-width: 420px){.sm\\\\:float-l{float:left}.sm\\\\:float-r{float:right}.sm\\\\:float-0{float:none}}@media screen and (min-width: 768px){.md\\\\:float-l{float:left}.md\\\\:float-r{float:right}.md\\\\:float-0{float:none}}@media screen and (min-width: 1024px){.lg\\\\:float-l{float:left}.lg\\\\:float-r{float:right}.lg\\\\:float-0{float:none}}.align-l{text-align:left}.align-r{text-align:right}.align-0{text-align:none}.align-c{text-align:center}.align-j{text-align:justify}@media screen and (min-width: 420px){.sm\\\\:align-l{text-align:left}.sm\\\\:align-r{text-align:right}.sm\\\\:align-0{text-align:none}.sm\\\\:align-c{text-align:center}.sm\\\\:align-j{text-align:justify}}@media screen and (min-width: 768px){.md\\\\:align-l{text-align:left}.md\\\\:align-r{text-align:right}.md\\\\:align-0{text-align:none}.md\\\\:align-c{text-align:center}.md\\\\:align-j{text-align:justify}}@media screen and (min-width: 1024px){.lg\\\\:align-l{text-align:left}.lg\\\\:align-r{text-align:right}.lg\\\\:align-0{text-align:none}.lg\\\\:align-c{text-align:center}.lg\\\\:align-j{text-align:justify}}.flx-0{flex:0}.flx-1{flex:1}.flx-g-0{flex-grow:0}.flx-g-1{flex-grow:1}.flx-s-0{flex-shrink:0}.flx-s-1{flex-shrink:1}.flx-b-0{flex-basis:0}.flx-b-auto{flex-basis:auto}.flx-b-fill{flex-basis:100%}.flx-d-c{flex-direction:column}.flx-d-cr{flex-direction:column-reverse}.flx-d-r{flex-direction:row}.flx-d-rr{flex-direction:row-reverse}.flx-a-fs{align-items:flex-start}.flx-a-fe{align-items:flex-end}.flx-a-c{align-items:center}.flx-a-s{align-items:stretch}.flx-a-sa{align-items:space-around}.flx-a-sb{align-items:space-between}.flx-j-fs{justify-content:flex-start}.flx-j-fe{justify-content:flex-end}.flx-j-c{justify-content:center}.flx-j-s{justify-content:stretch}.flx-j-sa{justify-content:space-around}.flx-j-sb{justify-content:space-between}@media screen and (min-width: 420px){.sm\\\\:flx-0{flex:0}.sm\\\\:flx-1{flex:1}.sm\\\\:flx-g-0{flex-grow:0}.sm\\\\:flx-g-1{flex-grow:1}.sm\\\\:flx-s-0{flex-shrink:0}.sm\\\\:flx-s-1{flex-shrink:1}.sm\\\\:flx-b-0{flex-basis:0}.sm\\\\:flx-b-auto{flex-basis:auto}.sm\\\\:flx-b-fill{flex-basis:100%}.sm\\\\:flx-d-c{flex-direction:column}.sm\\\\:flx-d-cr{flex-direction:column-reverse}.sm\\\\:flx-d-r{flex-direction:row}.sm\\\\:flx-d-rr{flex-direction:row-reverse}.sm\\\\:flx-a-fs{align-items:flex-start}.sm\\\\:flx-a-fe{align-items:flex-start}.sm\\\\:flx-a-c{align-items:center}.sm\\\\:flx-a-s{align-items:stretch}.sm\\\\:flx-a-sa{align-items:space-around}.sm\\\\:flx-a-sb{align-items:space-between}.sm\\\\:flx-j-fs{justify-content:flex-start}.sm\\\\:flx-j-fe{justify-content:flex-start}.sm\\\\:flx-j-c{justify-content:center}.sm\\\\:flx-j-s{justify-content:stretch}.sm\\\\:flx-j-sa{justify-content:space-around}.sm\\\\:flx-j-sb{justify-content:space-between}}@media screen and (min-width: 768px){.md\\\\:flx-0{flex:0}.md\\\\:flx-1{flex:1}.md\\\\:flx-g-0{flex-grow:0}.md\\\\:flx-g-1{flex-grow:1}.md\\\\:flx-s-0{flex-shrink:0}.md\\\\:flx-s-1{flex-shrink:1}.md\\\\:flx-b-0{flex-basis:0}.md\\\\:flx-b-auto{flex-basis:auto}.md\\\\:flx-b-fill{flex-basis:100%}.md\\\\:flx-d-c{flex-direction:column}.md\\\\:flx-d-cr{flex-direction:column-reverse}.md\\\\:flx-d-r{flex-direction:row}.md\\\\:flx-d-rr{flex-direction:row-reverse}.md\\\\:flx-a-fs{align-items:flex-start}.md\\\\:flx-a-fe{align-items:flex-start}.md\\\\:flx-a-c{align-items:center}.md\\\\:flx-a-s{align-items:stretch}.md\\\\:flx-a-sa{align-items:space-around}.md\\\\:flx-a-sb{align-items:space-between}.md\\\\:flx-j-fs{justify-content:flex-start}.md\\\\:flx-j-fe{justify-content:flex-start}.md\\\\:flx-j-c{justify-content:center}.md\\\\:flx-j-s{justify-content:stretch}.md\\\\:flx-j-sa{justify-content:space-around}.md\\\\:flx-j-sb{justify-content:space-between}}@media screen and (min-width: 1024px){.lg\\\\:flx-0{flex:0}.lg\\\\:flx-1{flex:1}.lg\\\\:flx-g-0{flex-grow:0}.lg\\\\:flx-g-1{flex-grow:1}.lg\\\\:flx-s-0{flex-shrink:0}.lg\\\\:flx-s-1{flex-shrink:1}.lg\\\\:flx-b-0{flex-basis:0}.lg\\\\:flx-b-auto{flex-basis:auto}.lg\\\\:flx-b-fill{flex-basis:100%}.lg\\\\:flx-d-c{flex-direction:column}.lg\\\\:flx-d-cr{flex-direction:column-reverse}.lg\\\\:flx-d-r{flex-direction:row}.lg\\\\:flx-d-rr{flex-direction:row-reverse}.lg\\\\:flx-a-fs{align-items:flex-start}.lg\\\\:flx-a-fe{align-items:flex-start}.lg\\\\:flx-a-c{align-items:center}.lg\\\\:flx-a-s{align-items:stretch}.lg\\\\:flx-a-sa{align-items:space-around}.lg\\\\:flx-a-sb{align-items:space-between}.lg\\\\:flx-j-fs{justify-content:flex-start}.lg\\\\:flx-j-fe{justify-content:flex-start}.lg\\\\:flx-j-c{justify-content:center}.lg\\\\:flx-j-s{justify-content:stretch}.lg\\\\:flx-j-sa{justify-content:space-around}.lg\\\\:flx-j-sb{justify-content:space-between}}.w-auto{width:auto}.w-min-auto{min-width:auto}.w-max-auto{max-width:auto}.h-auto{height:auto}.h-min-auto{min-height:auto}.h-max-auto{max-height:auto}.w-none{width:none}.w-min-none{min-width:none}.w-max-none{max-width:none}.h-none{height:none}.h-min-none{min-height:none}.h-max-none{max-height:none}.w-fill{width:100%}.w-min-fill{min-width:100%}.w-max-fill{max-width:100%}.h-fill{height:100%}.h-min-fill{min-height:100%}.h-max-fill{max-height:100%}@media screen and (min-width: 420px){.sm\\\\:w-auto{width:auto}.sm\\\\:w-min-auto{min-width:auto}.sm\\\\:w-max-auto{max-width:auto}.sm\\\\:h-auto{height:auto}.sm\\\\:h-min-auto{min-height:auto}.sm\\\\:h-max-auto{max-height:auto}.sm\\\\:w-none{width:none}.sm\\\\:w-min-none{min-width:none}.sm\\\\:w-max-none{max-width:none}.sm\\\\:h-none{height:none}.sm\\\\:h-min-none{min-height:none}.sm\\\\:h-max-none{max-height:none}.sm\\\\:w-fill{width:100%}.sm\\\\:w-min-fill{min-width:100%}.sm\\\\:w-max-fill{max-width:100%}.sm\\\\:h-fill{height:100%}.sm\\\\:h-min-fill{min-height:100%}.sm\\\\:h-max-fill{max-height:100%}}@media screen and (min-width: 768px){.md\\\\:w-auto{width:auto}.md\\\\:w-min-auto{min-width:auto}.md\\\\:w-max-auto{max-width:auto}.md\\\\:h-auto{height:auto}.md\\\\:h-min-auto{min-height:auto}.md\\\\:h-max-auto{max-height:auto}.md\\\\:w-none{width:none}.md\\\\:w-min-none{min-width:none}.md\\\\:w-max-none{max-width:none}.md\\\\:h-none{height:none}.md\\\\:h-min-none{min-height:none}.md\\\\:h-max-none{max-height:none}.md\\\\:w-fill{width:100%}.md\\\\:w-min-fill{min-width:100%}.md\\\\:w-max-fill{max-width:100%}.md\\\\:h-fill{height:100%}.md\\\\:h-min-fill{min-height:100%}.md\\\\:h-max-fill{max-height:100%}}@media screen and (min-width: 1024px){.lg\\\\:w-auto{width:auto}.lg\\\\:w-min-auto{min-width:auto}.lg\\\\:w-max-auto{max-width:auto}.lg\\\\:h-auto{height:auto}.lg\\\\:h-min-auto{min-height:auto}.lg\\\\:h-max-auto{max-height:auto}.lg\\\\:w-none{width:none}.lg\\\\:w-min-none{min-width:none}.lg\\\\:w-max-none{max-width:none}.lg\\\\:h-none{height:none}.lg\\\\:h-min-none{min-height:none}.lg\\\\:h-max-none{max-height:none}.lg\\\\:w-fill{width:100%}.lg\\\\:w-min-fill{min-width:100%}.lg\\\\:w-max-fill{max-width:100%}.lg\\\\:h-fill{height:100%}.lg\\\\:h-min-fill{min-height:100%}.lg\\\\:h-max-fill{max-height:100%}}.d-none{display:none}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-block{display:block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-table{display:table}@media screen and (min-width: 420px){.sm\\\\:d-none{display:none}.sm\\\\:d-inline{display:inline}.sm\\\\:d-inline-block{display:inline-block}.sm\\\\:d-block{display:block}.sm\\\\:d-flex{display:flex}.sm\\\\:d-inline-flex{display:inline-flex}.sm\\\\:d-grid{display:grid}.sm\\\\:d-table{display:table}}@media screen and (min-width: 768px){.md\\\\:d-none{display:none}.md\\\\:d-inline{display:inline}.md\\\\:d-inline-block{display:inline-block}.md\\\\:d-block{display:block}.md\\\\:d-flex{display:flex}.md\\\\:d-inline-flex{display:inline-flex}.md\\\\:d-grid{display:grid}.md\\\\:d-table{display:table}}@media screen and (min-width: 1024px){.lg\\\\:d-none{display:none}.lg\\\\:d-inline{display:inline}.lg\\\\:d-inline-block{display:inline-block}.lg\\\\:d-block{display:block}.lg\\\\:d-flex{display:flex}.lg\\\\:d-inline-flex{display:inline-flex}.lg\\\\:d-grid{display:grid}.lg\\\\:d-table{display:table}}.container{width:100%;box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;min-width:320px;max-width:1448px}@media screen and (min-width: 768px){.container{padding-left:48px;padding-right:48px;max-width:1496px}}.p-0{padding:0}.p-05x{padding:4px}.p-1x{padding:8px}.p-2x{padding:16px}.p-10x{padding:80px}.px-0{padding-left:0;padding-right:0}.px-05x{padding-left:4px;padding-right:4px}.px-1x{padding-left:8px;padding-right:8px}.px-2x{padding-left:16px;padding-right:16px}.px-10x{padding-left:80px;padding-right:80px}.py-0{padding-top:0;padding-bottom:0}.py-05x{padding-top:4px;padding-bottom:4px}.py-1x{padding-top:8px;padding-bottom:8px}.py-2x{padding-top:16px;padding-bottom:16px}.py-10x{padding-top:80px;padding-bottom:80px}.pt-0{padding-top:0}.pt-05x{padding-top:4px}.pt-1x{padding-top:8px}.pt-2x{padding-top:16px}.pt-10x{padding-top:80px}.pr-0{padding-right:0}.pr-05x{padding-right:4px}.pr-1x{padding-right:8px}.pr-2x{padding-right:16px}.pr-10x{padding-right:80px}.pb-0{padding-bottom:0}.pb-05x{padding-bottom:4px}.pb-1x{padding-bottom:8px}.pb-2x{padding-bottom:16px}.pb-10x{padding-bottom:80px}.pl-0{padding-left:0}.pl-05x{padding-left:4px}.pl-1x{padding-left:8px}.pl-2x{padding-left:16px}.pl-10x{padding-left:80px}.m-0{margin:0}.m-05x{margin:4px}.m-1x{margin:8px}.m-2x{margin:16px}.m-10x{margin:80px}.mx-0{margin-left:0;margin-right:0}.mx-05x{margin-left:4px;margin-right:4px}.mx-1x{margin-left:8px;margin-right:8px}.mx-2x{margin-left:16px;margin-right:16px}.mx-10x{margin-left:80px;margin-right:80px}.my-0{margin-top:0;margin-bottom:0}.my-05x{margin-top:4px;margin-bottom:4px}.my-1x{margin-top:8px;margin-bottom:8px}.my-2x{margin-top:16px;margin-bottom:16px}.my-10x{margin-top:80px;margin-bottom:80px}.mt-0{margin-top:0}.mt-05x{margin-top:4px}.mt-1x{margin-top:8px}.mt-2x{margin-top:16px}.mt-10x{margin-top:80px}.mr-0{margin-right:0}.mr-05x{margin-right:4px}.mr-1x{margin-right:8px}.mr-2x{margin-right:16px}.mr-10x{margin-right:80px}.mb-0{margin-bottom:0}.mb-05x{margin-bottom:4px}.mb-1x{margin-bottom:8px}.mb-2x{margin-bottom:16px}.mb-10x{margin-bottom:80px}.ml-0{margin-left:0}.ml-05x{margin-left:4px}.ml-1x{margin-left:8px}.ml-2x{margin-left:16px}.ml-10x{margin-left:80px}@media screen and (min-width: 420px){.sm\\\\:p-0{padding:0}.sm\\\\:p-05x{padding:4px}.sm\\\\:p-1x{padding:8px}.sm\\\\:p-2x{padding:16px}.sm\\\\:p-10x{padding:80px}.sm\\\\:px-0{padding-left:0;padding-right:0}.sm\\\\:px-05x{padding-left:4px;padding-right:4px}.sm\\\\:px-1x{padding-left:8px;padding-right:8px}.sm\\\\:px-2x{padding-left:16px;padding-right:16px}.sm\\\\:px-10x{padding-left:80px;padding-right:80px}.sm\\\\:py-0{padding-top:0;padding-bottom:0}.sm\\\\:py-05x{padding-top:4px;padding-bottom:4px}.sm\\\\:py-1x{padding-top:8px;padding-bottom:8px}.sm\\\\:py-2x{padding-top:16px;padding-bottom:16px}.sm\\\\:py-10x{padding-top:80px;padding-bottom:80px}.sm\\\\:pt-0{padding-top:0}.sm\\\\:pt-05x{padding-top:4px}.sm\\\\:pt-1x{padding-top:8px}.sm\\\\:pt-2x{padding-top:16px}.sm\\\\:pt-10x{padding-top:80px}.sm\\\\:pr-0{padding-right:0}.sm\\\\:pr-05x{padding-right:4px}.sm\\\\:pr-1x{padding-right:8px}.sm\\\\:pr-2x{padding-right:16px}.sm\\\\:pr-10x{padding-right:80px}.sm\\\\:pb-0{padding-bottom:0}.sm\\\\:pb-05x{padding-bottom:4px}.sm\\\\:pb-1x{padding-bottom:8px}.sm\\\\:pb-2x{padding-bottom:16px}.sm\\\\:pb-10x{padding-bottom:80px}.sm\\\\:pl-0{padding-left:0}.sm\\\\:pl-05x{padding-left:4px}.sm\\\\:pl-1x{padding-left:8px}.sm\\\\:pl-2x{padding-left:16px}.sm\\\\:pl-10x{padding-left:80px}.sm\\\\:m-0{margin:0}.sm\\\\:m-05x{margin:4px}.sm\\\\:m-1x{margin:8px}.sm\\\\:m-2x{margin:16px}.sm\\\\:m-10x{margin:80px}.sm\\\\:mx-0{margin-left:0;margin-right:0}.sm\\\\:mx-05x{margin-left:4px;margin-right:4px}.sm\\\\:mx-1x{margin-left:8px;margin-right:8px}.sm\\\\:mx-2x{margin-left:16px;margin-right:16px}.sm\\\\:mx-10x{margin-left:80px;margin-right:80px}.sm\\\\:my-0{margin-top:0;margin-bottom:0}.sm\\\\:my-05x{margin-top:4px;margin-bottom:4px}.sm\\\\:my-1x{margin-top:8px;margin-bottom:8px}.sm\\\\:my-2x{margin-top:16px;margin-bottom:16px}.sm\\\\:my-10x{margin-top:80px;margin-bottom:80px}.sm\\\\:mt-0{margin-top:0}.sm\\\\:mt-05x{margin-top:4px}.sm\\\\:mt-1x{margin-top:8px}.sm\\\\:mt-2x{margin-top:16px}.sm\\\\:mt-10x{margin-top:80px}.sm\\\\:mr-0{margin-right:0}.sm\\\\:mr-05x{margin-right:4px}.sm\\\\:mr-1x{margin-right:8px}.sm\\\\:mr-2x{margin-right:16px}.sm\\\\:mr-10x{margin-right:80px}.sm\\\\:mb-0{margin-bottom:0}.sm\\\\:mb-05x{margin-bottom:4px}.sm\\\\:mb-1x{margin-bottom:8px}.sm\\\\:mb-2x{margin-bottom:16px}.sm\\\\:mb-10x{margin-bottom:80px}.sm\\\\:ml-0{margin-left:0}.sm\\\\:ml-05x{margin-left:4px}.sm\\\\:ml-1x{margin-left:8px}.sm\\\\:ml-2x{margin-left:16px}.sm\\\\:ml-10x{margin-left:80px}}@media screen and (min-width: 768px){.md\\\\:p-0{padding:0}.md\\\\:p-05x{padding:4px}.md\\\\:p-1x{padding:8px}.md\\\\:p-2x{padding:16px}.md\\\\:p-10x{padding:80px}.md\\\\:px-0{padding-left:0;padding-right:0}.md\\\\:px-05x{padding-left:4px;padding-right:4px}.md\\\\:px-1x{padding-left:8px;padding-right:8px}.md\\\\:px-2x{padding-left:16px;padding-right:16px}.md\\\\:px-10x{padding-left:80px;padding-right:80px}.md\\\\:py-0{padding-top:0;padding-bottom:0}.md\\\\:py-05x{padding-top:4px;padding-bottom:4px}.md\\\\:py-1x{padding-top:8px;padding-bottom:8px}.md\\\\:py-2x{padding-top:16px;padding-bottom:16px}.md\\\\:py-10x{padding-top:80px;padding-bottom:80px}.md\\\\:pt-0{padding-top:0}.md\\\\:pt-05x{padding-top:4px}.md\\\\:pt-1x{padding-top:8px}.md\\\\:pt-2x{padding-top:16px}.md\\\\:pt-10x{padding-top:80px}.md\\\\:pr-0{padding-right:0}.md\\\\:pr-05x{padding-right:4px}.md\\\\:pr-1x{padding-right:8px}.md\\\\:pr-2x{padding-right:16px}.md\\\\:pr-10x{padding-right:80px}.md\\\\:pb-0{padding-bottom:0}.md\\\\:pb-05x{padding-bottom:4px}.md\\\\:pb-1x{padding-bottom:8px}.md\\\\:pb-2x{padding-bottom:16px}.md\\\\:pb-10x{padding-bottom:80px}.md\\\\:pl-0{padding-left:0}.md\\\\:pl-05x{padding-left:4px}.md\\\\:pl-1x{padding-left:8px}.md\\\\:pl-2x{padding-left:16px}.md\\\\:pl-10x{padding-left:80px}.md\\\\:m-0{margin:0}.md\\\\:m-05x{margin:4px}.md\\\\:m-1x{margin:8px}.md\\\\:m-2x{margin:16px}.md\\\\:m-10x{margin:80px}.md\\\\:mx-0{margin-left:0;margin-right:0}.md\\\\:mx-05x{margin-left:4px;margin-right:4px}.md\\\\:mx-1x{margin-left:8px;margin-right:8px}.md\\\\:mx-2x{margin-left:16px;margin-right:16px}.md\\\\:mx-10x{margin-left:80px;margin-right:80px}.md\\\\:my-0{margin-top:0;margin-bottom:0}.md\\\\:my-05x{margin-top:4px;margin-bottom:4px}.md\\\\:my-1x{margin-top:8px;margin-bottom:8px}.md\\\\:my-2x{margin-top:16px;margin-bottom:16px}.md\\\\:my-10x{margin-top:80px;margin-bottom:80px}.md\\\\:mt-0{margin-top:0}.md\\\\:mt-05x{margin-top:4px}.md\\\\:mt-1x{margin-top:8px}.md\\\\:mt-2x{margin-top:16px}.md\\\\:mt-10x{margin-top:80px}.md\\\\:mr-0{margin-right:0}.md\\\\:mr-05x{margin-right:4px}.md\\\\:mr-1x{margin-right:8px}.md\\\\:mr-2x{margin-right:16px}.md\\\\:mr-10x{margin-right:80px}.md\\\\:mb-0{margin-bottom:0}.md\\\\:mb-05x{margin-bottom:4px}.md\\\\:mb-1x{margin-bottom:8px}.md\\\\:mb-2x{margin-bottom:16px}.md\\\\:mb-10x{margin-bottom:80px}.md\\\\:ml-0{margin-left:0}.md\\\\:ml-05x{margin-left:4px}.md\\\\:ml-1x{margin-left:8px}.md\\\\:ml-2x{margin-left:16px}.md\\\\:ml-10x{margin-left:80px}}@media screen and (min-width: 1024px){.lg\\\\:p-0{padding:0}.lg\\\\:p-05x{padding:4px}.lg\\\\:p-1x{padding:8px}.lg\\\\:p-2x{padding:16px}.lg\\\\:p-10x{padding:80px}.lg\\\\:px-0{padding-left:0;padding-right:0}.lg\\\\:px-05x{padding-left:4px;padding-right:4px}.lg\\\\:px-1x{padding-left:8px;padding-right:8px}.lg\\\\:px-2x{padding-left:16px;padding-right:16px}.lg\\\\:px-10x{padding-left:80px;padding-right:80px}.lg\\\\:py-0{padding-top:0;padding-bottom:0}.lg\\\\:py-05x{padding-top:4px;padding-bottom:4px}.lg\\\\:py-1x{padding-top:8px;padding-bottom:8px}.lg\\\\:py-2x{padding-top:16px;padding-bottom:16px}.lg\\\\:py-10x{padding-top:80px;padding-bottom:80px}.lg\\\\:pt-0{padding-top:0}.lg\\\\:pt-05x{padding-top:4px}.lg\\\\:pt-1x{padding-top:8px}.lg\\\\:pt-2x{padding-top:16px}.lg\\\\:pt-10x{padding-top:80px}.lg\\\\:pr-0{padding-right:0}.lg\\\\:pr-05x{padding-right:4px}.lg\\\\:pr-1x{padding-right:8px}.lg\\\\:pr-2x{padding-right:16px}.lg\\\\:pr-10x{padding-right:80px}.lg\\\\:pb-0{padding-bottom:0}.lg\\\\:pb-05x{padding-bottom:4px}.lg\\\\:pb-1x{padding-bottom:8px}.lg\\\\:pb-2x{padding-bottom:16px}.lg\\\\:pb-10x{padding-bottom:80px}.lg\\\\:pl-0{padding-left:0}.lg\\\\:pl-05x{padding-left:4px}.lg\\\\:pl-1x{padding-left:8px}.lg\\\\:pl-2x{padding-left:16px}.lg\\\\:pl-10x{padding-left:80px}.lg\\\\:m-0{margin:0}.lg\\\\:m-05x{margin:4px}.lg\\\\:m-1x{margin:8px}.lg\\\\:m-2x{margin:16px}.lg\\\\:m-10x{margin:80px}.lg\\\\:mx-0{margin-left:0;margin-right:0}.lg\\\\:mx-05x{margin-left:4px;margin-right:4px}.lg\\\\:mx-1x{margin-left:8px;margin-right:8px}.lg\\\\:mx-2x{margin-left:16px;margin-right:16px}.lg\\\\:mx-10x{margin-left:80px;margin-right:80px}.lg\\\\:my-0{margin-top:0;margin-bottom:0}.lg\\\\:my-05x{margin-top:4px;margin-bottom:4px}.lg\\\\:my-1x{margin-top:8px;margin-bottom:8px}.lg\\\\:my-2x{margin-top:16px;margin-bottom:16px}.lg\\\\:my-10x{margin-top:80px;margin-bottom:80px}.lg\\\\:mt-0{margin-top:0}.lg\\\\:mt-05x{margin-top:4px}.lg\\\\:mt-1x{margin-top:8px}.lg\\\\:mt-2x{margin-top:16px}.lg\\\\:mt-10x{margin-top:80px}.lg\\\\:mr-0{margin-right:0}.lg\\\\:mr-05x{margin-right:4px}.lg\\\\:mr-1x{margin-right:8px}.lg\\\\:mr-2x{margin-right:16px}.lg\\\\:mr-10x{margin-right:80px}.lg\\\\:mb-0{margin-bottom:0}.lg\\\\:mb-05x{margin-bottom:4px}.lg\\\\:mb-1x{margin-bottom:8px}.lg\\\\:mb-2x{margin-bottom:16px}.lg\\\\:mb-10x{margin-bottom:80px}.lg\\\\:ml-0{margin-left:0}.lg\\\\:ml-05x{margin-left:4px}.lg\\\\:ml-1x{margin-left:8px}.lg\\\\:ml-2x{margin-left:16px}.lg\\\\:ml-10x{margin-left:80px}} +":root { --break-sm: 420px; --break-md: 768px; --break-lg: 1024px; --color-black: #000000; --color-shark: #252729; --color-tundora: #454647; --color-abbey: #575A5C; --color-silver: #BCBDBE; --color-alabaster: #f8f8f8; --color-white: #FFFFFF; --font-heading: Lora, serif; --font-body: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; --layer-under: -1; --layer-over: 1; --line-compact: 1.1; --line-default: 1.5; --radius-none: 0; --radius-small: 4px; --radius-round: 50%; --space-0: 0; --space-05x: 4px; --space-1x: 8px; --space-2x: 16px; --space-10x: 80px; --weight-normal: 400; --weight-bold: 700; } + +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document ========================================================================== */ +/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ +html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } + +/* Sections ========================================================================== */ +/** Remove the margin in all browsers. */ +body { margin: 0; } + +/** Render the \`main\` element consistently in IE. */ +main { display: block; } + +/** Correct the font size and margin on \`h1\` elements within \`section\` and \`article\` contexts in Chrome, Firefox, and Safari. */ +h1 { font-size: 2em; margin: 0.67em 0; } + +/* Grouping content ========================================================================== */ +/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ +hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } + +/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd \`em\` font sizing in all browsers. */ +pre { font-family: \\"monospace\\", monospace; /* 1 */ font-size: 1em; /* 2 */ } + +/* Text-level semantics ========================================================================== */ +/** Remove the gray background on active links in IE 10. */ +a { background-color: transparent; } + +/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ +abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } + +/** Add the correct font weight in Chrome, Edge, and Safari. */ +b, strong { font-weight: bolder; } + +/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd \`em\` font sizing in all browsers. */ +code, kbd, samp { font-family: \\"monospace\\", monospace; /* 1 */ font-size: 1em; /* 2 */ } + +/** Add the correct font size in all browsers. */ +small { font-size: 80%; } + +/** Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. */ +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } + +sub { bottom: -0.25em; } + +sup { top: -0.5em; } + +/* Embedded content ========================================================================== */ +/** Remove the border on images inside links in IE 10. */ +img { border-style: none; } + +/* Forms ========================================================================== */ +/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ +button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } + +/** Show the overflow in IE. 1. Show the overflow in Edge. */ +button, input { /* 1 */ overflow: visible; } + +/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */ +button, select { /* 1 */ text-transform: none; } + +/** Correct the inability to style clickable types in iOS and Safari. */ +button, [type=\\"button\\"], [type=\\"reset\\"], [type=\\"submit\\"] { -webkit-appearance: button; } + +/** Remove the inner border and padding in Firefox. */ +button::-moz-focus-inner, [type=\\"button\\"]::-moz-focus-inner, [type=\\"reset\\"]::-moz-focus-inner, [type=\\"submit\\"]::-moz-focus-inner { border-style: none; padding: 0; } + +/** Restore the focus styles unset by the previous rule. */ +button:-moz-focusring, [type=\\"button\\"]:-moz-focusring, [type=\\"reset\\"]:-moz-focusring, [type=\\"submit\\"]:-moz-focusring { outline: 1px dotted ButtonText; } + +/** Correct the padding in Firefox. */ +fieldset { padding: 0.35em 0.75em 0.625em; } + +/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from \`fieldset\` elements in IE. 3. Remove the padding so developers are not caught out when they zero out \`fieldset\` elements in all browsers. */ +legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } + +/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */ +progress { vertical-align: baseline; } + +/** Remove the default vertical scrollbar in IE 10+. */ +textarea { overflow: auto; } + +/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */ +[type=\\"checkbox\\"], [type=\\"radio\\"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } + +/** Correct the cursor style of increment and decrement buttons in Chrome. */ +[type=\\"number\\"]::-webkit-inner-spin-button, [type=\\"number\\"]::-webkit-outer-spin-button { height: auto; } + +/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ +[type=\\"search\\"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } + +/** Remove the inner padding in Chrome and Safari on macOS. */ +[type=\\"search\\"]::-webkit-search-decoration { -webkit-appearance: none; } + +/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to \`inherit\` in Safari. */ +::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } + +/* Interactive ========================================================================== */ +/* Add the correct display in Edge, IE 10+, and Firefox. */ +details { display: block; } + +/* Add the correct display in all browsers. */ +summary { display: list-item; } + +/* Misc ========================================================================== */ +/** Add the correct display in IE 10+. */ +template { display: none; } + +/** Add the correct display in IE 10. */ +[hidden] { display: none; } + +html { box-sizing: border-box; } + +*, *:before, *:after { box-sizing: inherit; } + +.antialias { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +@media screen and (min-width: 420px) { .sm\\\\:antialias { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } + +@media screen and (min-width: 768px) { .md\\\\:antialias { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } + +@media screen and (min-width: 1024px) { .lg\\\\:antialias { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } + +.child-my-0 > *:first-child { margin-top: 0; } + +.child-my-0 > *:last-child { margin-bottom: 0; } + +.child-mx-0 > *:first-child { margin-left: 0; } + +.child-mx-0 > *:last-child { margin-right: 0; } + +.sr-only, .sr-focus:not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } + +@media screen and (min-width: 420px) { .sm\\\\:sr-only, .sm\\\\:sr-focus:not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } + +@media screen and (min-width: 768px) { .md\\\\:sr-only, .md\\\\:sr-focus:not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } + +@media screen and (min-width: 1024px) { .lg\\\\:sr-only, .lg\\\\:sr-focus:not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } + +.list-reset { list-style: none; padding: 0; } + +@media screen and (min-width: 420px) { .sm\\\\:list-reset { list-style: none; padding: 0; } } + +@media screen and (min-width: 768px) { .md\\\\:list-reset { list-style: none; padding: 0; } } + +@media screen and (min-width: 1024px) { .lg\\\\:list-reset { list-style: none; padding: 0; } } + +.bg-black { background-color: #000000; } + +.bg-shark { background-color: #252729; } + +.bg-tundora { background-color: #454647; } + +.bg-abbey { background-color: #575A5C; } + +.bg-silver { background-color: #BCBDBE; } + +.bg-alabaster { background-color: #f8f8f8; } + +.bg-white { background-color: #FFFFFF; } + +@media screen and (min-width: 420px) { .sm\\\\:bg-black { background-color: #000000; } + .sm\\\\:bg-shark { background-color: #252729; } + .sm\\\\:bg-tundora { background-color: #454647; } + .sm\\\\:bg-abbey { background-color: #575A5C; } + .sm\\\\:bg-silver { background-color: #BCBDBE; } + .sm\\\\:bg-alabaster { background-color: #f8f8f8; } + .sm\\\\:bg-white { background-color: #FFFFFF; } } + +@media screen and (min-width: 768px) { .md\\\\:bg-black { background-color: #000000; } + .md\\\\:bg-shark { background-color: #252729; } + .md\\\\:bg-tundora { background-color: #454647; } + .md\\\\:bg-abbey { background-color: #575A5C; } + .md\\\\:bg-silver { background-color: #BCBDBE; } + .md\\\\:bg-alabaster { background-color: #f8f8f8; } + .md\\\\:bg-white { background-color: #FFFFFF; } } + +@media screen and (min-width: 1024px) { .lg\\\\:bg-black { background-color: #000000; } + .lg\\\\:bg-shark { background-color: #252729; } + .lg\\\\:bg-tundora { background-color: #454647; } + .lg\\\\:bg-abbey { background-color: #575A5C; } + .lg\\\\:bg-silver { background-color: #BCBDBE; } + .lg\\\\:bg-alabaster { background-color: #f8f8f8; } + .lg\\\\:bg-white { background-color: #FFFFFF; } } + +.c-black { color: #000000; } + +.c-shark { color: #252729; } + +.c-tundora { color: #454647; } + +.c-abbey { color: #575A5C; } + +.c-silver { color: #BCBDBE; } + +.c-alabaster { color: #f8f8f8; } + +.c-white { color: #FFFFFF; } + +@media screen and (min-width: 420px) { .sm\\\\:c-black { color: #000000; } + .sm\\\\:c-shark { color: #252729; } + .sm\\\\:c-tundora { color: #454647; } + .sm\\\\:c-abbey { color: #575A5C; } + .sm\\\\:c-silver { color: #BCBDBE; } + .sm\\\\:c-alabaster { color: #f8f8f8; } + .sm\\\\:c-white { color: #FFFFFF; } } + +@media screen and (min-width: 768px) { .md\\\\:c-black { color: #000000; } + .md\\\\:c-shark { color: #252729; } + .md\\\\:c-tundora { color: #454647; } + .md\\\\:c-abbey { color: #575A5C; } + .md\\\\:c-silver { color: #BCBDBE; } + .md\\\\:c-alabaster { color: #f8f8f8; } + .md\\\\:c-white { color: #FFFFFF; } } + +@media screen and (min-width: 1024px) { .lg\\\\:c-black { color: #000000; } + .lg\\\\:c-shark { color: #252729; } + .lg\\\\:c-tundora { color: #454647; } + .lg\\\\:c-abbey { color: #575A5C; } + .lg\\\\:c-silver { color: #BCBDBE; } + .lg\\\\:c-alabaster { color: #f8f8f8; } + .lg\\\\:c-white { color: #FFFFFF; } } + +.lh-compact { line-height: 1.1; } + +.lh-default { line-height: 1.5; } + +@media screen and (min-width: 420px) { .sm\\\\:lh-compact { line-height: 1.1; } + .sm\\\\:lh-default { line-height: 1.5; } } + +@media screen and (min-width: 768px) { .md\\\\:lh-compact { line-height: 1.1; } + .md\\\\:lh-default { line-height: 1.5; } } + +@media screen and (min-width: 1024px) { .lg\\\\:lh-compact { line-height: 1.1; } + .lg\\\\:lh-default { line-height: 1.5; } } + +.ff-heading { font-family: Lora, serif; } + +.ff-body { font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; } + +@media screen and (min-width: 420px) { .sm\\\\:ff-heading { font-family: Lora, serif; } + .sm\\\\:ff-body { font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; } } + +@media screen and (min-width: 768px) { .md\\\\:ff-heading { font-family: Lora, serif; } + .md\\\\:ff-body { font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; } } + +@media screen and (min-width: 1024px) { .lg\\\\:ff-heading { font-family: Lora, serif; } + .lg\\\\:ff-body { font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; } } + +.fw-normal { font-weight: 400; } + +.fw-bold { font-weight: 700; } + +@media screen and (min-width: 420px) { .sm\\\\:fw-normal { font-weight: 400; } + .sm\\\\:fw-bold { font-weight: 700; } } + +@media screen and (min-width: 768px) { .md\\\\:fw-normal { font-weight: 400; } + .md\\\\:fw-bold { font-weight: 700; } } + +@media screen and (min-width: 1024px) { .lg\\\\:fw-normal { font-weight: 400; } + .lg\\\\:fw-bold { font-weight: 700; } } + +.z-under { z-index: -1; } + +.z-over { z-index: 1; } + +@media screen and (min-width: 420px) { .sm\\\\:z-under { z-index: -1; } + .sm\\\\:z-over { z-index: 1; } } + +@media screen and (min-width: 768px) { .md\\\\:z-under { z-index: -1; } + .md\\\\:z-over { z-index: 1; } } + +@media screen and (min-width: 1024px) { .lg\\\\:z-under { z-index: -1; } + .lg\\\\:z-over { z-index: 1; } } + +.rc-none { border-radius: 0; } + +.rc-small { border-radius: 4px; } + +.rc-round { border-radius: 50%; } + +@media screen and (min-width: 420px) { .sm\\\\:rc-none { border-radius: 0; } + .sm\\\\:rc-small { border-radius: 4px; } + .sm\\\\:rc-round { border-radius: 50%; } } + +@media screen and (min-width: 768px) { .md\\\\:rc-none { border-radius: 0; } + .md\\\\:rc-small { border-radius: 4px; } + .md\\\\:rc-round { border-radius: 50%; } } + +@media screen and (min-width: 1024px) { .lg\\\\:rc-none { border-radius: 0; } + .lg\\\\:rc-small { border-radius: 4px; } + .lg\\\\:rc-round { border-radius: 50%; } } + +.float-l { float: left; } + +.float-r { float: right; } + +.float-0 { float: none; } + +@media screen and (min-width: 420px) { .sm\\\\:float-l { float: left; } + .sm\\\\:float-r { float: right; } + .sm\\\\:float-0 { float: none; } } + +@media screen and (min-width: 768px) { .md\\\\:float-l { float: left; } + .md\\\\:float-r { float: right; } + .md\\\\:float-0 { float: none; } } + +@media screen and (min-width: 1024px) { .lg\\\\:float-l { float: left; } + .lg\\\\:float-r { float: right; } + .lg\\\\:float-0 { float: none; } } + +.align-l { text-align: left; } + +.align-r { text-align: right; } + +.align-0 { text-align: none; } + +.align-c { text-align: center; } + +.align-j { text-align: justify; } + +@media screen and (min-width: 420px) { .sm\\\\:align-l { text-align: left; } + .sm\\\\:align-r { text-align: right; } + .sm\\\\:align-0 { text-align: none; } + .sm\\\\:align-c { text-align: center; } + .sm\\\\:align-j { text-align: justify; } } + +@media screen and (min-width: 768px) { .md\\\\:align-l { text-align: left; } + .md\\\\:align-r { text-align: right; } + .md\\\\:align-0 { text-align: none; } + .md\\\\:align-c { text-align: center; } + .md\\\\:align-j { text-align: justify; } } + +@media screen and (min-width: 1024px) { .lg\\\\:align-l { text-align: left; } + .lg\\\\:align-r { text-align: right; } + .lg\\\\:align-0 { text-align: none; } + .lg\\\\:align-c { text-align: center; } + .lg\\\\:align-j { text-align: justify; } } + +.flx-0 { flex: 0; } + +.flx-1 { flex: 1; } + +.flx-g-0 { flex-grow: 0; } + +.flx-g-1 { flex-grow: 1; } + +.flx-s-0 { flex-shrink: 0; } + +.flx-s-1 { flex-shrink: 1; } + +.flx-b-0 { flex-basis: 0; } + +.flx-b-auto { flex-basis: auto; } + +.flx-b-fill { flex-basis: 100%; } + +.flx-d-c { flex-direction: column; } + +.flx-d-cr { flex-direction: column-reverse; } + +.flx-d-r { flex-direction: row; } + +.flx-d-rr { flex-direction: row-reverse; } + +.flx-a-fs { align-items: flex-start; } + +.flx-a-fe { align-items: flex-end; } + +.flx-a-c { align-items: center; } + +.flx-a-s { align-items: stretch; } + +.flx-a-sa { align-items: space-around; } + +.flx-a-sb { align-items: space-between; } + +.flx-j-fs { justify-content: flex-start; } + +.flx-j-fe { justify-content: flex-end; } + +.flx-j-c { justify-content: center; } + +.flx-j-s { justify-content: stretch; } + +.flx-j-sa { justify-content: space-around; } + +.flx-j-sb { justify-content: space-between; } + +@media screen and (min-width: 420px) { .sm\\\\:flx-0 { flex: 0; } + .sm\\\\:flx-1 { flex: 1; } + .sm\\\\:flx-g-0 { flex-grow: 0; } + .sm\\\\:flx-g-1 { flex-grow: 1; } + .sm\\\\:flx-s-0 { flex-shrink: 0; } + .sm\\\\:flx-s-1 { flex-shrink: 1; } + .sm\\\\:flx-b-0 { flex-basis: 0; } + .sm\\\\:flx-b-auto { flex-basis: auto; } + .sm\\\\:flx-b-fill { flex-basis: 100%; } + .sm\\\\:flx-d-c { flex-direction: column; } + .sm\\\\:flx-d-cr { flex-direction: column-reverse; } + .sm\\\\:flx-d-r { flex-direction: row; } + .sm\\\\:flx-d-rr { flex-direction: row-reverse; } + .sm\\\\:flx-a-fs { align-items: flex-start; } + .sm\\\\:flx-a-fe { align-items: flex-start; } + .sm\\\\:flx-a-c { align-items: center; } + .sm\\\\:flx-a-s { align-items: stretch; } + .sm\\\\:flx-a-sa { align-items: space-around; } + .sm\\\\:flx-a-sb { align-items: space-between; } + .sm\\\\:flx-j-fs { justify-content: flex-start; } + .sm\\\\:flx-j-fe { justify-content: flex-start; } + .sm\\\\:flx-j-c { justify-content: center; } + .sm\\\\:flx-j-s { justify-content: stretch; } + .sm\\\\:flx-j-sa { justify-content: space-around; } + .sm\\\\:flx-j-sb { justify-content: space-between; } } + +@media screen and (min-width: 768px) { .md\\\\:flx-0 { flex: 0; } + .md\\\\:flx-1 { flex: 1; } + .md\\\\:flx-g-0 { flex-grow: 0; } + .md\\\\:flx-g-1 { flex-grow: 1; } + .md\\\\:flx-s-0 { flex-shrink: 0; } + .md\\\\:flx-s-1 { flex-shrink: 1; } + .md\\\\:flx-b-0 { flex-basis: 0; } + .md\\\\:flx-b-auto { flex-basis: auto; } + .md\\\\:flx-b-fill { flex-basis: 100%; } + .md\\\\:flx-d-c { flex-direction: column; } + .md\\\\:flx-d-cr { flex-direction: column-reverse; } + .md\\\\:flx-d-r { flex-direction: row; } + .md\\\\:flx-d-rr { flex-direction: row-reverse; } + .md\\\\:flx-a-fs { align-items: flex-start; } + .md\\\\:flx-a-fe { align-items: flex-start; } + .md\\\\:flx-a-c { align-items: center; } + .md\\\\:flx-a-s { align-items: stretch; } + .md\\\\:flx-a-sa { align-items: space-around; } + .md\\\\:flx-a-sb { align-items: space-between; } + .md\\\\:flx-j-fs { justify-content: flex-start; } + .md\\\\:flx-j-fe { justify-content: flex-start; } + .md\\\\:flx-j-c { justify-content: center; } + .md\\\\:flx-j-s { justify-content: stretch; } + .md\\\\:flx-j-sa { justify-content: space-around; } + .md\\\\:flx-j-sb { justify-content: space-between; } } + +@media screen and (min-width: 1024px) { .lg\\\\:flx-0 { flex: 0; } + .lg\\\\:flx-1 { flex: 1; } + .lg\\\\:flx-g-0 { flex-grow: 0; } + .lg\\\\:flx-g-1 { flex-grow: 1; } + .lg\\\\:flx-s-0 { flex-shrink: 0; } + .lg\\\\:flx-s-1 { flex-shrink: 1; } + .lg\\\\:flx-b-0 { flex-basis: 0; } + .lg\\\\:flx-b-auto { flex-basis: auto; } + .lg\\\\:flx-b-fill { flex-basis: 100%; } + .lg\\\\:flx-d-c { flex-direction: column; } + .lg\\\\:flx-d-cr { flex-direction: column-reverse; } + .lg\\\\:flx-d-r { flex-direction: row; } + .lg\\\\:flx-d-rr { flex-direction: row-reverse; } + .lg\\\\:flx-a-fs { align-items: flex-start; } + .lg\\\\:flx-a-fe { align-items: flex-start; } + .lg\\\\:flx-a-c { align-items: center; } + .lg\\\\:flx-a-s { align-items: stretch; } + .lg\\\\:flx-a-sa { align-items: space-around; } + .lg\\\\:flx-a-sb { align-items: space-between; } + .lg\\\\:flx-j-fs { justify-content: flex-start; } + .lg\\\\:flx-j-fe { justify-content: flex-start; } + .lg\\\\:flx-j-c { justify-content: center; } + .lg\\\\:flx-j-s { justify-content: stretch; } + .lg\\\\:flx-j-sa { justify-content: space-around; } + .lg\\\\:flx-j-sb { justify-content: space-between; } } + +.w-auto { width: auto; } + +.w-min-auto { min-width: auto; } + +.w-max-auto { max-width: auto; } + +.h-auto { height: auto; } + +.h-min-auto { min-height: auto; } + +.h-max-auto { max-height: auto; } + +.w-none { width: none; } + +.w-min-none { min-width: none; } + +.w-max-none { max-width: none; } + +.h-none { height: none; } + +.h-min-none { min-height: none; } + +.h-max-none { max-height: none; } + +.w-fill { width: 100%; } + +.w-min-fill { min-width: 100%; } + +.w-max-fill { max-width: 100%; } + +.h-fill { height: 100%; } + +.h-min-fill { min-height: 100%; } + +.h-max-fill { max-height: 100%; } + +@media screen and (min-width: 420px) { .sm\\\\:w-auto { width: auto; } + .sm\\\\:w-min-auto { min-width: auto; } + .sm\\\\:w-max-auto { max-width: auto; } + .sm\\\\:h-auto { height: auto; } + .sm\\\\:h-min-auto { min-height: auto; } + .sm\\\\:h-max-auto { max-height: auto; } + .sm\\\\:w-none { width: none; } + .sm\\\\:w-min-none { min-width: none; } + .sm\\\\:w-max-none { max-width: none; } + .sm\\\\:h-none { height: none; } + .sm\\\\:h-min-none { min-height: none; } + .sm\\\\:h-max-none { max-height: none; } + .sm\\\\:w-fill { width: 100%; } + .sm\\\\:w-min-fill { min-width: 100%; } + .sm\\\\:w-max-fill { max-width: 100%; } + .sm\\\\:h-fill { height: 100%; } + .sm\\\\:h-min-fill { min-height: 100%; } + .sm\\\\:h-max-fill { max-height: 100%; } } + +@media screen and (min-width: 768px) { .md\\\\:w-auto { width: auto; } + .md\\\\:w-min-auto { min-width: auto; } + .md\\\\:w-max-auto { max-width: auto; } + .md\\\\:h-auto { height: auto; } + .md\\\\:h-min-auto { min-height: auto; } + .md\\\\:h-max-auto { max-height: auto; } + .md\\\\:w-none { width: none; } + .md\\\\:w-min-none { min-width: none; } + .md\\\\:w-max-none { max-width: none; } + .md\\\\:h-none { height: none; } + .md\\\\:h-min-none { min-height: none; } + .md\\\\:h-max-none { max-height: none; } + .md\\\\:w-fill { width: 100%; } + .md\\\\:w-min-fill { min-width: 100%; } + .md\\\\:w-max-fill { max-width: 100%; } + .md\\\\:h-fill { height: 100%; } + .md\\\\:h-min-fill { min-height: 100%; } + .md\\\\:h-max-fill { max-height: 100%; } } + +@media screen and (min-width: 1024px) { .lg\\\\:w-auto { width: auto; } + .lg\\\\:w-min-auto { min-width: auto; } + .lg\\\\:w-max-auto { max-width: auto; } + .lg\\\\:h-auto { height: auto; } + .lg\\\\:h-min-auto { min-height: auto; } + .lg\\\\:h-max-auto { max-height: auto; } + .lg\\\\:w-none { width: none; } + .lg\\\\:w-min-none { min-width: none; } + .lg\\\\:w-max-none { max-width: none; } + .lg\\\\:h-none { height: none; } + .lg\\\\:h-min-none { min-height: none; } + .lg\\\\:h-max-none { max-height: none; } + .lg\\\\:w-fill { width: 100%; } + .lg\\\\:w-min-fill { min-width: 100%; } + .lg\\\\:w-max-fill { max-width: 100%; } + .lg\\\\:h-fill { height: 100%; } + .lg\\\\:h-min-fill { min-height: 100%; } + .lg\\\\:h-max-fill { max-height: 100%; } } + +.d-none { display: none; } + +.d-inline { display: inline; } + +.d-inline-block { display: inline-block; } + +.d-block { display: block; } + +.d-flex { display: flex; } + +.d-inline-flex { display: inline-flex; } + +.d-grid { display: grid; } + +.d-table { display: table; } + +@media screen and (min-width: 420px) { .sm\\\\:d-none { display: none; } + .sm\\\\:d-inline { display: inline; } + .sm\\\\:d-inline-block { display: inline-block; } + .sm\\\\:d-block { display: block; } + .sm\\\\:d-flex { display: flex; } + .sm\\\\:d-inline-flex { display: inline-flex; } + .sm\\\\:d-grid { display: grid; } + .sm\\\\:d-table { display: table; } } + +@media screen and (min-width: 768px) { .md\\\\:d-none { display: none; } + .md\\\\:d-inline { display: inline; } + .md\\\\:d-inline-block { display: inline-block; } + .md\\\\:d-block { display: block; } + .md\\\\:d-flex { display: flex; } + .md\\\\:d-inline-flex { display: inline-flex; } + .md\\\\:d-grid { display: grid; } + .md\\\\:d-table { display: table; } } + +@media screen and (min-width: 1024px) { .lg\\\\:d-none { display: none; } + .lg\\\\:d-inline { display: inline; } + .lg\\\\:d-inline-block { display: inline-block; } + .lg\\\\:d-block { display: block; } + .lg\\\\:d-flex { display: flex; } + .lg\\\\:d-inline-flex { display: inline-flex; } + .lg\\\\:d-grid { display: grid; } + .lg\\\\:d-table { display: table; } } + +.container { width: 100%; box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; min-width: 320px; max-width: 1448px; } + +@media screen and (min-width: 768px) { .container { padding-left: 48px; padding-right: 48px; max-width: 1496px; } } + +.p-0 { padding: 0; } + +.p-05x { padding: 4px; } + +.p-1x { padding: 8px; } + +.p-2x { padding: 16px; } + +.p-10x { padding: 80px; } + +.px-0 { padding-left: 0; padding-right: 0; } + +.px-05x { padding-left: 4px; padding-right: 4px; } + +.px-1x { padding-left: 8px; padding-right: 8px; } + +.px-2x { padding-left: 16px; padding-right: 16px; } + +.px-10x { padding-left: 80px; padding-right: 80px; } + +.py-0 { padding-top: 0; padding-bottom: 0; } + +.py-05x { padding-top: 4px; padding-bottom: 4px; } + +.py-1x { padding-top: 8px; padding-bottom: 8px; } + +.py-2x { padding-top: 16px; padding-bottom: 16px; } + +.py-10x { padding-top: 80px; padding-bottom: 80px; } + +.pt-0 { padding-top: 0; } + +.pt-05x { padding-top: 4px; } + +.pt-1x { padding-top: 8px; } + +.pt-2x { padding-top: 16px; } + +.pt-10x { padding-top: 80px; } + +.pr-0 { padding-right: 0; } + +.pr-05x { padding-right: 4px; } + +.pr-1x { padding-right: 8px; } + +.pr-2x { padding-right: 16px; } + +.pr-10x { padding-right: 80px; } + +.pb-0 { padding-bottom: 0; } + +.pb-05x { padding-bottom: 4px; } + +.pb-1x { padding-bottom: 8px; } + +.pb-2x { padding-bottom: 16px; } + +.pb-10x { padding-bottom: 80px; } + +.pl-0 { padding-left: 0; } + +.pl-05x { padding-left: 4px; } + +.pl-1x { padding-left: 8px; } + +.pl-2x { padding-left: 16px; } + +.pl-10x { padding-left: 80px; } + +.m-0 { margin: 0; } + +.m-05x { margin: 4px; } + +.m-1x { margin: 8px; } + +.m-2x { margin: 16px; } + +.m-10x { margin: 80px; } + +.mx-0 { margin-left: 0; margin-right: 0; } + +.mx-05x { margin-left: 4px; margin-right: 4px; } + +.mx-1x { margin-left: 8px; margin-right: 8px; } + +.mx-2x { margin-left: 16px; margin-right: 16px; } + +.mx-10x { margin-left: 80px; margin-right: 80px; } + +.my-0 { margin-top: 0; margin-bottom: 0; } + +.my-05x { margin-top: 4px; margin-bottom: 4px; } + +.my-1x { margin-top: 8px; margin-bottom: 8px; } + +.my-2x { margin-top: 16px; margin-bottom: 16px; } + +.my-10x { margin-top: 80px; margin-bottom: 80px; } + +.mt-0 { margin-top: 0; } + +.mt-05x { margin-top: 4px; } + +.mt-1x { margin-top: 8px; } + +.mt-2x { margin-top: 16px; } + +.mt-10x { margin-top: 80px; } + +.mr-0 { margin-right: 0; } + +.mr-05x { margin-right: 4px; } + +.mr-1x { margin-right: 8px; } + +.mr-2x { margin-right: 16px; } + +.mr-10x { margin-right: 80px; } + +.mb-0 { margin-bottom: 0; } + +.mb-05x { margin-bottom: 4px; } + +.mb-1x { margin-bottom: 8px; } + +.mb-2x { margin-bottom: 16px; } + +.mb-10x { margin-bottom: 80px; } + +.ml-0 { margin-left: 0; } + +.ml-05x { margin-left: 4px; } + +.ml-1x { margin-left: 8px; } + +.ml-2x { margin-left: 16px; } + +.ml-10x { margin-left: 80px; } + +@media screen and (min-width: 420px) { .sm\\\\:p-0 { padding: 0; } + .sm\\\\:p-05x { padding: 4px; } + .sm\\\\:p-1x { padding: 8px; } + .sm\\\\:p-2x { padding: 16px; } + .sm\\\\:p-10x { padding: 80px; } + .sm\\\\:px-0 { padding-left: 0; padding-right: 0; } + .sm\\\\:px-05x { padding-left: 4px; padding-right: 4px; } + .sm\\\\:px-1x { padding-left: 8px; padding-right: 8px; } + .sm\\\\:px-2x { padding-left: 16px; padding-right: 16px; } + .sm\\\\:px-10x { padding-left: 80px; padding-right: 80px; } + .sm\\\\:py-0 { padding-top: 0; padding-bottom: 0; } + .sm\\\\:py-05x { padding-top: 4px; padding-bottom: 4px; } + .sm\\\\:py-1x { padding-top: 8px; padding-bottom: 8px; } + .sm\\\\:py-2x { padding-top: 16px; padding-bottom: 16px; } + .sm\\\\:py-10x { padding-top: 80px; padding-bottom: 80px; } + .sm\\\\:pt-0 { padding-top: 0; } + .sm\\\\:pt-05x { padding-top: 4px; } + .sm\\\\:pt-1x { padding-top: 8px; } + .sm\\\\:pt-2x { padding-top: 16px; } + .sm\\\\:pt-10x { padding-top: 80px; } + .sm\\\\:pr-0 { padding-right: 0; } + .sm\\\\:pr-05x { padding-right: 4px; } + .sm\\\\:pr-1x { padding-right: 8px; } + .sm\\\\:pr-2x { padding-right: 16px; } + .sm\\\\:pr-10x { padding-right: 80px; } + .sm\\\\:pb-0 { padding-bottom: 0; } + .sm\\\\:pb-05x { padding-bottom: 4px; } + .sm\\\\:pb-1x { padding-bottom: 8px; } + .sm\\\\:pb-2x { padding-bottom: 16px; } + .sm\\\\:pb-10x { padding-bottom: 80px; } + .sm\\\\:pl-0 { padding-left: 0; } + .sm\\\\:pl-05x { padding-left: 4px; } + .sm\\\\:pl-1x { padding-left: 8px; } + .sm\\\\:pl-2x { padding-left: 16px; } + .sm\\\\:pl-10x { padding-left: 80px; } + .sm\\\\:m-0 { margin: 0; } + .sm\\\\:m-05x { margin: 4px; } + .sm\\\\:m-1x { margin: 8px; } + .sm\\\\:m-2x { margin: 16px; } + .sm\\\\:m-10x { margin: 80px; } + .sm\\\\:mx-0 { margin-left: 0; margin-right: 0; } + .sm\\\\:mx-05x { margin-left: 4px; margin-right: 4px; } + .sm\\\\:mx-1x { margin-left: 8px; margin-right: 8px; } + .sm\\\\:mx-2x { margin-left: 16px; margin-right: 16px; } + .sm\\\\:mx-10x { margin-left: 80px; margin-right: 80px; } + .sm\\\\:my-0 { margin-top: 0; margin-bottom: 0; } + .sm\\\\:my-05x { margin-top: 4px; margin-bottom: 4px; } + .sm\\\\:my-1x { margin-top: 8px; margin-bottom: 8px; } + .sm\\\\:my-2x { margin-top: 16px; margin-bottom: 16px; } + .sm\\\\:my-10x { margin-top: 80px; margin-bottom: 80px; } + .sm\\\\:mt-0 { margin-top: 0; } + .sm\\\\:mt-05x { margin-top: 4px; } + .sm\\\\:mt-1x { margin-top: 8px; } + .sm\\\\:mt-2x { margin-top: 16px; } + .sm\\\\:mt-10x { margin-top: 80px; } + .sm\\\\:mr-0 { margin-right: 0; } + .sm\\\\:mr-05x { margin-right: 4px; } + .sm\\\\:mr-1x { margin-right: 8px; } + .sm\\\\:mr-2x { margin-right: 16px; } + .sm\\\\:mr-10x { margin-right: 80px; } + .sm\\\\:mb-0 { margin-bottom: 0; } + .sm\\\\:mb-05x { margin-bottom: 4px; } + .sm\\\\:mb-1x { margin-bottom: 8px; } + .sm\\\\:mb-2x { margin-bottom: 16px; } + .sm\\\\:mb-10x { margin-bottom: 80px; } + .sm\\\\:ml-0 { margin-left: 0; } + .sm\\\\:ml-05x { margin-left: 4px; } + .sm\\\\:ml-1x { margin-left: 8px; } + .sm\\\\:ml-2x { margin-left: 16px; } + .sm\\\\:ml-10x { margin-left: 80px; } } + +@media screen and (min-width: 768px) { .md\\\\:p-0 { padding: 0; } + .md\\\\:p-05x { padding: 4px; } + .md\\\\:p-1x { padding: 8px; } + .md\\\\:p-2x { padding: 16px; } + .md\\\\:p-10x { padding: 80px; } + .md\\\\:px-0 { padding-left: 0; padding-right: 0; } + .md\\\\:px-05x { padding-left: 4px; padding-right: 4px; } + .md\\\\:px-1x { padding-left: 8px; padding-right: 8px; } + .md\\\\:px-2x { padding-left: 16px; padding-right: 16px; } + .md\\\\:px-10x { padding-left: 80px; padding-right: 80px; } + .md\\\\:py-0 { padding-top: 0; padding-bottom: 0; } + .md\\\\:py-05x { padding-top: 4px; padding-bottom: 4px; } + .md\\\\:py-1x { padding-top: 8px; padding-bottom: 8px; } + .md\\\\:py-2x { padding-top: 16px; padding-bottom: 16px; } + .md\\\\:py-10x { padding-top: 80px; padding-bottom: 80px; } + .md\\\\:pt-0 { padding-top: 0; } + .md\\\\:pt-05x { padding-top: 4px; } + .md\\\\:pt-1x { padding-top: 8px; } + .md\\\\:pt-2x { padding-top: 16px; } + .md\\\\:pt-10x { padding-top: 80px; } + .md\\\\:pr-0 { padding-right: 0; } + .md\\\\:pr-05x { padding-right: 4px; } + .md\\\\:pr-1x { padding-right: 8px; } + .md\\\\:pr-2x { padding-right: 16px; } + .md\\\\:pr-10x { padding-right: 80px; } + .md\\\\:pb-0 { padding-bottom: 0; } + .md\\\\:pb-05x { padding-bottom: 4px; } + .md\\\\:pb-1x { padding-bottom: 8px; } + .md\\\\:pb-2x { padding-bottom: 16px; } + .md\\\\:pb-10x { padding-bottom: 80px; } + .md\\\\:pl-0 { padding-left: 0; } + .md\\\\:pl-05x { padding-left: 4px; } + .md\\\\:pl-1x { padding-left: 8px; } + .md\\\\:pl-2x { padding-left: 16px; } + .md\\\\:pl-10x { padding-left: 80px; } + .md\\\\:m-0 { margin: 0; } + .md\\\\:m-05x { margin: 4px; } + .md\\\\:m-1x { margin: 8px; } + .md\\\\:m-2x { margin: 16px; } + .md\\\\:m-10x { margin: 80px; } + .md\\\\:mx-0 { margin-left: 0; margin-right: 0; } + .md\\\\:mx-05x { margin-left: 4px; margin-right: 4px; } + .md\\\\:mx-1x { margin-left: 8px; margin-right: 8px; } + .md\\\\:mx-2x { margin-left: 16px; margin-right: 16px; } + .md\\\\:mx-10x { margin-left: 80px; margin-right: 80px; } + .md\\\\:my-0 { margin-top: 0; margin-bottom: 0; } + .md\\\\:my-05x { margin-top: 4px; margin-bottom: 4px; } + .md\\\\:my-1x { margin-top: 8px; margin-bottom: 8px; } + .md\\\\:my-2x { margin-top: 16px; margin-bottom: 16px; } + .md\\\\:my-10x { margin-top: 80px; margin-bottom: 80px; } + .md\\\\:mt-0 { margin-top: 0; } + .md\\\\:mt-05x { margin-top: 4px; } + .md\\\\:mt-1x { margin-top: 8px; } + .md\\\\:mt-2x { margin-top: 16px; } + .md\\\\:mt-10x { margin-top: 80px; } + .md\\\\:mr-0 { margin-right: 0; } + .md\\\\:mr-05x { margin-right: 4px; } + .md\\\\:mr-1x { margin-right: 8px; } + .md\\\\:mr-2x { margin-right: 16px; } + .md\\\\:mr-10x { margin-right: 80px; } + .md\\\\:mb-0 { margin-bottom: 0; } + .md\\\\:mb-05x { margin-bottom: 4px; } + .md\\\\:mb-1x { margin-bottom: 8px; } + .md\\\\:mb-2x { margin-bottom: 16px; } + .md\\\\:mb-10x { margin-bottom: 80px; } + .md\\\\:ml-0 { margin-left: 0; } + .md\\\\:ml-05x { margin-left: 4px; } + .md\\\\:ml-1x { margin-left: 8px; } + .md\\\\:ml-2x { margin-left: 16px; } + .md\\\\:ml-10x { margin-left: 80px; } } + +@media screen and (min-width: 1024px) { .lg\\\\:p-0 { padding: 0; } + .lg\\\\:p-05x { padding: 4px; } + .lg\\\\:p-1x { padding: 8px; } + .lg\\\\:p-2x { padding: 16px; } + .lg\\\\:p-10x { padding: 80px; } + .lg\\\\:px-0 { padding-left: 0; padding-right: 0; } + .lg\\\\:px-05x { padding-left: 4px; padding-right: 4px; } + .lg\\\\:px-1x { padding-left: 8px; padding-right: 8px; } + .lg\\\\:px-2x { padding-left: 16px; padding-right: 16px; } + .lg\\\\:px-10x { padding-left: 80px; padding-right: 80px; } + .lg\\\\:py-0 { padding-top: 0; padding-bottom: 0; } + .lg\\\\:py-05x { padding-top: 4px; padding-bottom: 4px; } + .lg\\\\:py-1x { padding-top: 8px; padding-bottom: 8px; } + .lg\\\\:py-2x { padding-top: 16px; padding-bottom: 16px; } + .lg\\\\:py-10x { padding-top: 80px; padding-bottom: 80px; } + .lg\\\\:pt-0 { padding-top: 0; } + .lg\\\\:pt-05x { padding-top: 4px; } + .lg\\\\:pt-1x { padding-top: 8px; } + .lg\\\\:pt-2x { padding-top: 16px; } + .lg\\\\:pt-10x { padding-top: 80px; } + .lg\\\\:pr-0 { padding-right: 0; } + .lg\\\\:pr-05x { padding-right: 4px; } + .lg\\\\:pr-1x { padding-right: 8px; } + .lg\\\\:pr-2x { padding-right: 16px; } + .lg\\\\:pr-10x { padding-right: 80px; } + .lg\\\\:pb-0 { padding-bottom: 0; } + .lg\\\\:pb-05x { padding-bottom: 4px; } + .lg\\\\:pb-1x { padding-bottom: 8px; } + .lg\\\\:pb-2x { padding-bottom: 16px; } + .lg\\\\:pb-10x { padding-bottom: 80px; } + .lg\\\\:pl-0 { padding-left: 0; } + .lg\\\\:pl-05x { padding-left: 4px; } + .lg\\\\:pl-1x { padding-left: 8px; } + .lg\\\\:pl-2x { padding-left: 16px; } + .lg\\\\:pl-10x { padding-left: 80px; } + .lg\\\\:m-0 { margin: 0; } + .lg\\\\:m-05x { margin: 4px; } + .lg\\\\:m-1x { margin: 8px; } + .lg\\\\:m-2x { margin: 16px; } + .lg\\\\:m-10x { margin: 80px; } + .lg\\\\:mx-0 { margin-left: 0; margin-right: 0; } + .lg\\\\:mx-05x { margin-left: 4px; margin-right: 4px; } + .lg\\\\:mx-1x { margin-left: 8px; margin-right: 8px; } + .lg\\\\:mx-2x { margin-left: 16px; margin-right: 16px; } + .lg\\\\:mx-10x { margin-left: 80px; margin-right: 80px; } + .lg\\\\:my-0 { margin-top: 0; margin-bottom: 0; } + .lg\\\\:my-05x { margin-top: 4px; margin-bottom: 4px; } + .lg\\\\:my-1x { margin-top: 8px; margin-bottom: 8px; } + .lg\\\\:my-2x { margin-top: 16px; margin-bottom: 16px; } + .lg\\\\:my-10x { margin-top: 80px; margin-bottom: 80px; } + .lg\\\\:mt-0 { margin-top: 0; } + .lg\\\\:mt-05x { margin-top: 4px; } + .lg\\\\:mt-1x { margin-top: 8px; } + .lg\\\\:mt-2x { margin-top: 16px; } + .lg\\\\:mt-10x { margin-top: 80px; } + .lg\\\\:mr-0 { margin-right: 0; } + .lg\\\\:mr-05x { margin-right: 4px; } + .lg\\\\:mr-1x { margin-right: 8px; } + .lg\\\\:mr-2x { margin-right: 16px; } + .lg\\\\:mr-10x { margin-right: 80px; } + .lg\\\\:mb-0 { margin-bottom: 0; } + .lg\\\\:mb-05x { margin-bottom: 4px; } + .lg\\\\:mb-1x { margin-bottom: 8px; } + .lg\\\\:mb-2x { margin-bottom: 16px; } + .lg\\\\:mb-10x { margin-bottom: 80px; } + .lg\\\\:ml-0 { margin-left: 0; } + .lg\\\\:ml-05x { margin-left: 4px; } + .lg\\\\:ml-1x { margin-left: 8px; } + .lg\\\\:ml-2x { margin-left: 16px; } + .lg\\\\:ml-10x { margin-left: 80px; } } " `; exports[`render() Renders main css file with default settings 1`] = ` -":root { --color-black: #000000; --color-shark: #252729; --color-tundora: #454647; --color-abbey: #575A5C; --color-silver: #BCBDBE; --color-alabaster: #f8f8f8; --color-white: #FFFFFF; --break-sm: 420px; --break-md: 768px; --break-lg: 1024px; --space-0: 0; --space-05x: 4px; --space-1x: 8px; --space-2x: 16px; --space-10x: 80px; --font-heading: Lora, serif; --font-body: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; --layer-under: -1; --layer-over: 1; --radius-none: 0; --radius-small: 4px; --radius-round: 50%; --line-compact: 1.1; --line-default: 1.5; } +":root { --break-sm: 420px; --break-md: 768px; --break-lg: 1024px; --color-black: #000000; --color-shark: #252729; --color-tundora: #454647; --color-abbey: #575A5C; --color-silver: #BCBDBE; --color-alabaster: #f8f8f8; --color-white: #FFFFFF; --font-heading: Lora, serif; --font-body: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; --layer-under: -1; --layer-over: 1; --line-compact: 1.1; --line-default: 1.5; --radius-none: 0; --radius-small: 4px; --radius-round: 50%; --space-0: 0; --space-05x: 4px; --space-1x: 8px; --space-2x: 16px; --space-10x: 80px; --weight-normal: 400; --weight-bold: 700; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -970,7 +1928,7 @@ html { box-sizing: border-box; } `; exports[`render() Renders vars-only css file with default settings 1`] = ` -":root { --color-black: #000000; --color-shark: #252729; --color-tundora: #454647; --color-abbey: #575A5C; --color-silver: #BCBDBE; --color-alabaster: #f8f8f8; --color-white: #FFFFFF; --break-sm: 420px; --break-md: 768px; --break-lg: 1024px; --space-0: 0; --space-05x: 4px; --space-1x: 8px; --space-2x: 16px; --space-10x: 80px; --font-heading: Lora, serif; --font-body: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; --layer-under: -1; --layer-over: 1; --radius-none: 0; --radius-small: 4px; --radius-round: 50%; --line-compact: 1.1; --line-default: 1.5; } +":root { --break-sm: 420px; --break-md: 768px; --break-lg: 1024px; --color-black: #000000; --color-shark: #252729; --color-tundora: #454647; --color-abbey: #575A5C; --color-silver: #BCBDBE; --color-alabaster: #f8f8f8; --color-white: #FFFFFF; --font-heading: Lora, serif; --font-body: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; --layer-under: -1; --layer-over: 1; --line-compact: 1.1; --line-default: 1.5; --radius-none: 0; --radius-small: 4px; --radius-round: 50%; --space-0: 0; --space-05x: 4px; --space-1x: 8px; --space-2x: 16px; --space-10x: 80px; --weight-normal: 400; --weight-bold: 700; } /*# sourceMappingURL=skeletor.vars.css.map */" `; diff --git a/packages/css/src/render-sass.test.js b/packages/css/src/render-sass.test.js index 7bd8323..7505835 100644 --- a/packages/css/src/render-sass.test.js +++ b/packages/css/src/render-sass.test.js @@ -24,7 +24,7 @@ describe('render()', () => { const { styles, sourceMap } = render({ src, dest, - outputStyle: 'compressed', + outputStyle: 'compact', sourceMap: false, }) expect(typeof styles).toBe('string')