npm - @graupl/graupl - Versions diffs - 1.0.0-beta.41 → 1.0.0-beta.43 - Mend

@graupl/graupl 1.0.0-beta.41 → 1.0.0-beta.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/css/component/accordion.css.map +1 -1
package/dist/css/component/card.css +1 -1
package/dist/css/component/card.css.map +1 -1
package/dist/css/component.css +1 -1
package/dist/css/component.css.map +1 -1
package/dist/css/graupl.css +1 -1
package/dist/css/graupl.css.map +1 -1
package/dist/css/layout/columns.css +1 -1
package/dist/css/layout/columns.css.map +1 -1
package/dist/css/layout/container.css +1 -1
package/dist/css/layout/container.css.map +1 -1
package/dist/css/layout/flex-columns.css +1 -1
package/dist/css/layout/flex-columns.css.map +1 -1
package/dist/css/layout.css +1 -1
package/dist/css/layout.css.map +1 -1
package/package.json +1 -1

package/dist/css/layout.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":null,"mappings":"AESI,qBCiNF,+qGAkBE,2FAUA,+EAoDA,+DAKE,wFAaF,0CAKA,wCAKA,8CAOE,uHAOE,oHAYF,wHAOE,sHAYF,kHAOE,iPAkCF,uHAOE,+GAYF,uHAOE,mNAgCF,wHAOE,gHAYF,wHAOE,qNCleN,kCDigBI,44SAcE,sEAWI,kUAYF,sMA2BF,uEAWI,uUAYF,yMA2BF,wCAMF,8nNAcE,sEAWI,kUAYF,iMA2BF,6CAMF,uoNAcE,uEAWI,uUAYF,mMA2BF,+CGlrBN,ymBAKE,yDAQA,gDAOA,kCAOI,qHAPJ,kCAOI,oGAPJ,kCAOI,mFAPJ,kCAOI,kEAPJ,kCAOI,iDAPJ,kCAOI,kEC/FN,0BD+GI,wCAGE,0IEtCN,iXAME,mHAMA,0DAUA,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,wTDlGF,0BCiHI,8EAfF,wTDlGF,0BCiHI,8EAfF,wTDlGF,0BCiHI,8EJ1HJ,6BM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,iCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,iCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,sPFUI,wDEVJ,sPFUI,wDEVJ,sPFUI,yDJtJN,kCM4IE,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,sPFUI,wDEVJ,sPFUI,wDEVJ,sPFUI,yDDtJN,sBG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,0BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,0BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,0PFuCI,4DEvCJ,0PFuCI,4DEvCJ,0PFuCI,6DDnLN,2BG4IE,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,0PFuCI,4DEvCJ,0PFuCI,4DEvCJ,0PFuCI,8DNxLJ,oBC8wBF,+aGznBA,yaE8CA","sources":["dist/css/layout.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/container/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/container/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_screen.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_container.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/flex-columns/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/flex-columns/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_utility.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n/ stylelint-enable scss/operator-no-newline-after /\n/ stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n/ stylelint-enable scss/operator-no-newline-after /\n@layer graupl.layout {\n .container {\n display: grid;\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width, min(var(--graupl-container-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)), var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n }\n .container > .container {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n .container > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .contain {\n display: grid;\n grid-template-columns: subgrid;\n }\n .container .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .breakout {\n grid-column: breakout;\n }\n .container .feature {\n grid-column: feature;\n }\n .container .full-width {\n grid-column: full-width;\n }\n .container.sidebars .sidebar-left {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left) {\n grid-column: content;\n }\n .container.sidebars .sidebar-right {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars-left .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n @media screen and (1024px <= width) {\n .container.sidebars {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width, min(var(--graupl-container-sidebars-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars > .sidebar-left {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-left:not(.container),\n .container.sidebars > .sidebar-left:not(.container) .container,\n .container.sidebars > .sidebar-left:not(.container) .breakout,\n .container.sidebars > .sidebar-left:not(.container) .full-width,\n .container.sidebars > .sidebar-left:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars > .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-left .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-right {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-right:not(.container),\n .container.sidebars > .sidebar-right:not(.container) .container,\n .container.sidebars > .sidebar-right:not(.container) .breakout,\n .container.sidebars > .sidebar-right:not(.container) .full-width,\n .container.sidebars > .sidebar-right:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars > .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .sidebar-right .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .content {\n grid-row: 1;\n }\n .container.sidebars-left {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width, min(var(--graupl-container-sidebars-left-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-left > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-left > .sidebar:not(.container),\n .container.sidebars-left > .sidebar:not(.container) .container,\n .container.sidebars-left > .sidebar:not(.container) .breakout,\n .container.sidebars-left > .sidebar:not(.container) .full-width,\n .container.sidebars-left > .sidebar:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars-left > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .content {\n grid-row: 1;\n }\n .container.sidebars-right {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width, min(var(--graupl-container-sidebars-right-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-right > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-right > .sidebar:not(.container),\n .container.sidebars-right > .sidebar:not(.container) .container,\n .container.sidebars-right > .sidebar:not(.container) .breakout,\n .container.sidebars-right > .sidebar:not(.container) .full-width,\n .container.sidebars-right > .sidebar:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars-right > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .content {\n grid-row: 1;\n }\n }\n}\n@layer graupl.theme {\n .container {\n background-color: var(--graupl-container-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-container-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n}\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n/ stylelint-enable scss/operator-no-newline-after /\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .count-1 {\n --graupl-columns-count: 1;\n }\n .count-1 .span-2 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-3 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-4 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-5 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-6 {\n --graupl-columns-span: 1;\n }\n .span-1 {\n --graupl-columns-span: 1;\n }\n .count-2 {\n --graupl-columns-count: 2;\n }\n .count-2 .span-3 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-4 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-5 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-6 {\n --graupl-columns-span: 2;\n }\n .span-2 {\n --graupl-columns-span: 2;\n }\n .count-3 {\n --graupl-columns-count: 3;\n }\n .count-3 .span-4 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-5 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-6 {\n --graupl-columns-span: 3;\n }\n .span-3 {\n --graupl-columns-span: 3;\n }\n .count-4 {\n --graupl-columns-count: 4;\n }\n .count-4 .span-5 {\n --graupl-columns-span: 4;\n }\n .count-4 .span-6 {\n --graupl-columns-span: 4;\n }\n .span-4 {\n --graupl-columns-span: 4;\n }\n .count-5 {\n --graupl-columns-count: 5;\n }\n .count-5 .span-6 {\n --graupl-columns-span: 5;\n }\n .span-5 {\n --graupl-columns-span: 5;\n }\n .count-6 {\n --graupl-columns-count: 6;\n }\n .count-6 .span-7 {\n --graupl-columns-span: 6;\n }\n .count-6 .span-6 {\n --graupl-columns-span: 6;\n }\n .span-6 {\n --graupl-columns-span: 6;\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n }\n}\n@layer graupl.theme {\n .columns {\n background-color: var(--graupl-columns-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-columns-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n}\n@layer graupl.layout {\n .flex-columns {\n display: flex;\n flex-wrap: wrap;\n gap: var(--graupl-flex-columns-row-gap, var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))) var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns > * {\n flex: 1 1 var(--graupl-flex-columns-size, auto);\n max-width: var(--graupl-flex-columns-max-width, unset);\n }\n .flex-columns .fill {\n --graupl-flex-columns-max-width: unset;\n }\n .col-1 {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 1) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 1\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-1 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-2 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 2) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 2\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-2 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-3 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 3) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 3\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-3 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-4 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 4) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 4\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-4 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-5 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 5) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 5\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-5 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-6 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 6) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 6\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-6 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-7 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 7) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 7\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-7 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-8 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 8) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 8\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-8 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-9 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 9) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 9\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-9 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-10 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 10) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 10\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-10 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-11 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 11) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 11\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-11 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-12 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 12) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 12\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-12 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .xs\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .xs\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .xs\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .xs\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .xs\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .xs\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .xs\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .xs\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .xs\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .xs\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .xs\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .xs\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .sm\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .sm\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .sm\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .sm\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .sm\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .sm\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .sm\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .sm\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .sm\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .sm\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .sm\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .sm\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .md\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .md\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .md\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .md\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .md\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .md\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .md\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .md\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .md\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .md\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .md\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .md\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .lg\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .lg\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .lg\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .lg\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .lg\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .lg\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .lg\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .lg\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .lg\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .lg\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .lg\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .lg\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .xl\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .xl\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .xl\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .xl\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .xl\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .xl\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .xl\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .xl\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .xl\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .xl\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .xl\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .xl\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .hd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .hd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .hd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .hd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .hd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .hd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .hd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .hd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .hd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .hd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .hd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .hd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .qhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .qhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .qhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .qhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .qhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .qhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .qhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .qhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .qhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .qhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .qhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .qhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .uhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .uhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .uhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .uhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .uhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .uhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .uhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .uhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .uhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .uhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .uhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .uhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:xs\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:xs\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:xs\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:xs\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:xs\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:xs\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:xs\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:xs\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:xs\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:xs\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:xs\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:xs\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:sm\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:sm\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:sm\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:sm\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:sm\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:sm\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:sm\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:sm\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:sm\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:sm\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:sm\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:sm\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:md\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:md\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:md\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:md\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:md\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:md\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:md\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:md\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:md\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:md\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:md\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:md\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:lg\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:lg\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:lg\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:lg\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:lg\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:lg\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:lg\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:lg\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:lg\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:lg\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:lg\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:lg\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:xl\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:xl\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:xl\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:xl\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:xl\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:xl\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:xl\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:xl\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:xl\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:xl\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:xl\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:xl\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:hd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:hd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:hd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:hd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:hd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:hd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:hd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:hd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:hd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:hd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:hd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:hd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:qhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:qhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:qhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:qhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:qhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:qhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:qhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:qhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:qhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:qhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:qhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:qhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:uhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:uhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:uhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:uhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:uhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:uhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:uhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:uhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:uhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:uhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:uhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:uhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n}\n@layer graupl.theme {\n .flex-columns {\n background-color: var(--graupl-flex-columns-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-flex-columns-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n}","// @graupl/core container layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// \| Custom property \| Default \|\n// \| ----------------------------------------------------------- \| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ \|\n// \| --graupl-container-sidebar-width \| 26ch \|\n// \| --graupl-container-breakout-width \| 4ch \|\n// \| --graupl-container-feature-width \| 10ch \|\n// \| --graupl-container-content-max-width \| var(--graupl-content-max-width) \|\n// \| --graupl-container-breakout-max-width \| calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width)) \|\n// \| --graupl-container-feature-max-width \| calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width)) \|\n// \| --graupl-container-full-width-section-min-width \| var(--graupl-spacer-5) \|\n// \| --graupl-container-full-width-section-max-width \| 1fr \|\n// \| --graupl-container-feature-section-min-width \| 0rem \|\n// \| --graupl-container-feature-section-max-width \| calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2) \|\n// \| --graupl-container-breakout-section-min-width \| 0rem \|\n// \| --graupl-container-breakout-section-max-width \| calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2) \|\n// \| --graupl-container-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2)) \|\n// \| --graupl-container-content-section-max-width \| var(--graupl-container-content-max-width) \|\n// \| --graupl-container-full-width-section-width \| minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width)) \|\n// \| --graupl-container-feature-section-width \| minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width)) \|\n// \| --graupl-container-breakout-section-width \| minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width)) \|\n// \| --graupl-container-content-section-width \| min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width)) \|\n// \| --graupl-container-sidebar-left-section-width \| max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) \|\n// \| --graupl-container-sidebar-right-section-width \| max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) \|\n// \| --graupl-container-sidebars-breakout-section-width \| var(--graupl-container-breakout-section-max-width) \|\n// \| --graupl-container-sidebars-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width)) \|\n// \| --graupl-container-sidebars-content-section-max-width \| calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) \|\n// \| --graupl-container-sidebars-content-section-width \| min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width)) \|\n// \| --graupl-container-sidebars-right-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width)) \|\n// \| --graupl-container-sidebars-right-content-section-max-width \| calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) \|\n// \| --graupl-container-sidebars-right-content-section-width \| min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width)) \|\n// \| --graupl-container-sidebars-left-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width)) \|\n// \| --graupl-container-sidebars-left-content-section-max-width \| calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) \|\n// \| --graupl-container-sidebars-left-content-section-width \| min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width)) \|\n// \| --graupl-container-background \| var(--graupl-background) \|\n// \| --graupl-container-color \| var(--graupl-color) \|\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// --graupl-container-sidebar-width\n$container-sidebar-width: var(\n --#{root-defaults.$prefix}container-sidebar-width,\n #{defaults.$container-sidebar-width}\n);\n\n// --graupl-container-breakout-width\n$container-breakout-width: var(\n --#{root-defaults.$prefix}container-breakout-width,\n #{defaults.$container-breakout-width}\n);\n\n// --graupl-container-feature-width\n$container-feature-width: var(\n --#{root-defaults.$prefix}container-feature-width,\n #{defaults.$container-feature-width}\n);\n\n// --graupl-container-content-max-width\n$container-content-max-width: var(\n --#{root-defaults.$prefix}container-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// --graupl-container-breakout-max-width\n$container-breakout-max-width: var(\n --#{root-defaults.$prefix}container-breakout-max-width,\n calc(#{$container-content-max-width} + #{$container-breakout-width})\n);\n\n// --graupl-container-feature-max-width\n$container-feature-max-width: var(\n --#{root-defaults.$prefix}container-feature-max-width,\n calc(#{$container-breakout-max-width} + #{$container-feature-width})\n);\n\n// --graupl-container-full-width-section-min-width\n$container-full-width-section-min-width: var(\n --#{root-defaults.$prefix}container-full-width-section-min-width,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-container-full-width-section-max-width\n$container-full-width-section-max-width: var(\n --#{root-defaults.$prefix}container-full-width-section-max-width,\n 1fr\n);\n\n// --graupl-container-feature-section-min-width\n$container-feature-section-min-width: var(\n --#{root-defaults.$prefix}container-feature-section-min-width,\n 0rem\n);\n\n// --graupl-container-feature-section-max-width\n$container-feature-section-max-width: var(\n --#{root-defaults.$prefix}container-feature-section-max-width,\n calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)\n);\n\n// --graupl-container-breakout-section-min-width\n$container-breakout-section-min-width: var(\n --#{root-defaults.$prefix}container-breakout-section-min-width,\n 0rem\n);\n\n// --graupl-container-breakout-section-max-width\n$container-breakout-section-max-width: var(\n --#{root-defaults.$prefix}container-breakout-section-max-width,\n calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n// --graupl-container-content-section-min-width\n$container-content-section-min-width: var(\n --#{root-defaults.$prefix}container-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-breakout-section-min-width} * 2)\n )\n);\n/* stylelint-enable scss/operator-no-newline-after /\n// --graupl-container-content-section-max-width\n$container-content-section-max-width: var(\n --#{root-defaults.$prefix}container-content-section-max-width,\n #{$container-content-max-width}\n);\n\n// --graupl-container-full-width-section-width\n$container-full-width-section-width: var(\n --#{root-defaults.$prefix}container-full-width-section-width,\n minmax(\n #{$container-full-width-section-min-width},\n #{$container-full-width-section-max-width}\n )\n);\n\n// --graupl-container-feature-section-width\n$container-feature-section-width: var(\n --#{root-defaults.$prefix}container-feature-section-width,\n minmax(\n #{$container-feature-section-min-width},\n #{$container-feature-section-max-width}\n )\n);\n\n// --graupl-container-breakout-section-width\n$container-breakout-section-width: var(\n --#{root-defaults.$prefix}container-breakout-section-width,\n minmax(\n #{$container-breakout-section-min-width},\n #{$container-breakout-section-max-width}\n )\n);\n\n// --graupl-container-content-section-width\n$container-content-section-width: var(\n --#{root-defaults.$prefix}container-content-section-width,\n min(\n #{$container-content-section-min-width},\n #{$container-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebar-left-section-width\n$container-sidebar-left-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-left-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebar-right-section-width\n$container-sidebar-right-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-right-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebars-breakout-section-width\n$container-sidebars-breakout-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-breakout-section-width,\n #{$container-breakout-section-max-width}\n);\n/ stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n// --graupl-container-sidebars-content-section-min-width\n$container-sidebars-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-sidebars-breakout-section-width} * 2) -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-content-section-max-width\n$container-sidebars-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width) +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-content-section-width\n$container-sidebars-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-width,\n min(\n #{$container-sidebars-content-section-min-width},\n #{$container-sidebars-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-min-width\n$container-sidebars-right-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-max-width\n$container-sidebars-right-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-right-content-section-width\n$container-sidebars-right-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-width,\n min(\n $container-sidebars-right-content-section-min-width,\n $container-sidebars-right-content-section-max-width\n )\n);\n\n// --graupl-container-sidebars-left-content-section-min-width\n$container-sidebars-left-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-left-section-width}\n )\n);\n\n// --graupl-container-sidebars-left-content-section-max-width\n$container-sidebars-left-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-left-content-section-width\n$container-sidebars-left-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-width,\n min(\n $container-sidebars-left-content-section-min-width,\n $container-sidebars-left-content-section-max-width\n )\n);\n\n// --graupl-container-background\n$container-background: var(\n --#{root-defaults.$prefix}container-background,\n #{color.$background}\n);\n\n// --graupl-container-color\n$container-color: var(\n --#{root-defaults.$prefix}container-color,\n #{color.$color}\n);\n/* stylelint-enable scss/operator-no-newline-after /\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core container layout styles.\n//\n// This module provides the layout styles for the container component.\n//\n// The container component is a grid container that provides a layout for the main content of a page.\n// It is divided into four sections:\n// - Full-width: A full-width section that spans the entire width of the container.\n// - Feature: A feature section that is used for feature content.\n// - Breakout: A breakout section that is used for breakout content.\n// - Content: The main content section that contains all other content.\n//\n// Optionally, the container component can have sidebars, which divides the content section into five sections:\n// - Sidebar-left: A left sidebar section that is used for sidebar content.\n// - Sidebar-right: A right sidebar section that is used for sidebar content.\n// - Inner-content: A section that contains the main content of the page.\n// - Content-left: A section that contains the sidebar-left and inner-content sections.\n// - Content-right: A section that contains the inner-content and sidebar-right sections.\n//\n// The container layout is as follows:\n// \| full-width \| feature \| breakout \| content \| breakout \| feature \| full-width \|\n//\n// Nesting a container directly inside of another container will cause the\n// nested container to inherit the grid columns of the parent container.\n//\n// The following classes are generated by default:\n// - `.container`: The main container component.\n// - `.full-width`: A full-width container component.\n// - `.feature`: A feature container component.\n// - `.breakout`: A breakout container component.\n// - `.contain`: A utility class to contain child elements to the content section of the container grid.\n// - `.sidebars`: A utility class to enable two sidebars in the container.\n// - `.sidebars-left`: A utility class to enable a left sidebar in the container.\n// - `.sidebars-right`: A utility class to enable a right sidebar in the container.\n// - `.sidebar-left`: A left sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar-right`: A right sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar`: A sidebar container component used directly inside of a container with sidebars.\n// - `.content`: A content container component used directly inside of a container with sidebars.\n//\n// The following custom properties can be used to customize the container component:\n// \| Property \| Description \| Default Value \|\n// \| ------------------------------------------------------------- \| ----------------------------------------------------------------------------------- \| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|\n// \| `--graupl-container-sidebar-width` \| The width of the sidebar sections. \| `26ch` \|\n// \| `--graupl-container-breakout-width` \| The width that the breakout section will extend beyond the content. \| `4ch` \|\n// \| `--graupl-container-feature-width` \| The width that the feature section will extend beyond the breakout. \| `10ch` \|\n// \| `--graupl-container-content-max-width` \| The maximum width of the content section. \| `var(--graupl-content-max-width)` \|\n// \| `--graupl-container-breakout-max-width` \| The maximum width of the breakout section. \| `calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width))` \|\n// \| `--graupl-container-feature-max-width` \| The maximum width of the feature section. \| `calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width))` \|\n// \| `--graupl-container-full-width-section-min-width` \| The minimum width of one side of the full-width section. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-container-full-width-section-max-width` \| The maximum width of one side of the full-width section. \| `1fr` \|\n// \| `--graupl-container-feature-section-min-width` \| The minimum width of one side of the feature section. \| `0rem` \|\n// \| `--graupl-container-feature-section-max-width` \| The maximum width of one side of the feature section. \| `calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2)` \|\n// \| `--graupl-container-breakout-section-min-width` \| The minimum width of one side of the breakout section. \| `0rem` \|\n// \| `--graupl-container-breakout-section-max-width` \| The maximum width of one side of the breakout section. \| `calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2)` \|\n// \| `--graupl-container-content-section-min-width` \| The minimum width of the content section. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2))` \|\n// \| `--graupl-container-content-section-max-width` \| The maximum width of the content section. \| `var(--graupl-container-content-max-width)` \|\n// \| `--graupl-container-full-width-section-width` \| The calculated minmax width of the full-width section. \| `minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width))` \|\n// \| `--graupl-container-feature-section-width` \| The calculated minmax width of the feature section. \| `minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width))` \|\n// \| `--graupl-container-breakout-section-width` \| The calculated minmax width of the breakout section. \| `minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width))` \|\n// \| `--graupl-container-content-section-width` \| The calculated width of the content section. \| `min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width))` \|\n// \| `--graupl-container-sidebar-left-section-width` \| The width of the left sidebar section. \| `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` \|\n// \| `--graupl-container-sidebar-right-section-width` \| The width of the right sidebar section. \| `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` \|\n// \| `--graupl-container-sidebars-breakout-section-width` \| The breakout width when both sidebars are enabled. \| `var(--graupl-container-breakout-section-max-width)` \|\n// \| `--graupl-container-sidebars-content-section-min-width` \| The minimum width of the content section when both sidebars are enabled. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width))` \|\n// \| `--graupl-container-sidebars-content-section-max-width` \| The maximum width of the content section when both sidebars are enabled. \| `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` \|\n// \| `--graupl-container-sidebars-content-section-width` \| The calculated width of the content section when both sidebars are enabled. \| `min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width))` \|\n// \| `--graupl-container-sidebars-right-content-section-min-width` \| The minimum width of the content section when only the right sidebar is enabled. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width))` \|\n// \| `--graupl-container-sidebars-right-content-section-max-width` \| The maximum width of the content section when only the right sidebar is enabled. \| `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` \|\n// \| `--graupl-container-sidebars-right-content-section-width` \| The calculated width of the content section when only the right sidebar is enabled. \| `min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width))` \|\n// \| `--graupl-container-sidebars-left-content-section-min-width` \| The minimum width of the content section when only the left sidebar is enabled. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width))` \|\n// \| `--graupl-container-sidebars-left-content-section-max-width` \| The maximum width of the content section when only the left sidebar is enabled. \| `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` \|\n// \| `--graupl-container-sidebars-left-content-section-width` \| The calculated width of the content section when only the left sidebar is enabled. \| `min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width))` \|\n// \| `--graupl-container-background` \| The background of the container component. \| `var(--graupl-background)` \|\n// \| `--graupl-container-color` \| The text color of the container component. \| `var(--graupl-color)` \|\n//\n// The following sass variables can be used to customize the generation of the container component:\n// \| Variable \| Description \| Default Value \|\n// \| -------------------------------------- \| ---------------------------------------------------------------------------- \| ------------------------- \|\n// \| `$selector-base` \| The selector base for the component. \| `\".\"` \|\n// \| `$modifier-selector-base` \| The selector base for component modifiers. \| `\".\"` \|\n// \| `$generate-base-theme-map` \| Flag to generate the base theme map. \| `true` \|\n// \| `$themeable` \| Flag to generate theme modifiers. \| `false` \|\n// \| `$force-container-chaining` \| A flag to force container chaining in all containers. \| `false` \|\n// \| `$generate-forced-container-selectors` \| A flag to generate a set of default selectors for forced container chaining. \| `true` \|\n// \| `$show-warnings` \| A flag to show any built-in warnings that may be output during compiling. \| `true` \|\n// \| `$container-selector-base` \| The base selector for the container component. \| `\".\"` \|\n// \| `$container-selector` \| The selector for the container component. \| `\"container\"` \|\n// \| `$container-theme-selector-base` \| The selector base for container theme modifiers. \| `\".\"` \|\n// \| `$container-theme-selector-prefix` \| The container theme modifier selector prefix. \| `\"\"` \|\n// \| `$container-breakout-selector-base` \| The base selector for the breakout container component. \| `\".\"` \|\n// \| `$container-breakout-selector` \| The selector for the breakout container component. \| `\"breakout\"` \|\n// \| `$container-feature-selector-base` \| The base selector for the feature container component. \| `\".\"` \|\n// \| `$container-feature-selector` \| The selector for the feature container component. \| `\"feature\"` \|\n// \| `$container-full-width-selector-base` \| The base selector for the full-width container component. \| `\".\"` \|\n// \| `$container-full-width-selector` \| The selector for the full-width container component. \| `\"full-width\"` \|\n// \| `$container-contain-selector-base` \| The base selector for the contain utility class. \| `\".\"` \|\n// \| `$container-contain-selector` \| The selector for the contain utility class. \| `\"contain\"` \|\n// \| `$container-sidebars-selector-base` \| The base selector for the sidebars utility class. \| `\".\"` \|\n// \| `$container-sidebars-selector` \| The selector for the sidebars utility class. \| `\"sidebars\"` \|\n// \| `$container-content-selector-base` \| The base selector for the content container component. \| `\".\"` \|\n// \| `$container-content-selector` \| The selector for the content container component. \| `\"content\"` \|\n// \| `$container-sidebar-selector-base` \| The base selector for the sidebar container component. \| `\".\"` \|\n// \| `$container-sidebar-selector` \| The selector for the sidebar container component. \| `\"sidebar\"` \|\n// \| `$container-left-selector-suffix` \| The suffix for the left sidebar selector. \| `\"-left\"` \|\n// \| `$container-right-selector-suffix` \| The suffix for the right sidebar selector. \| `\"-right\"` \|\n// \| `$container-inner-selector-prefix` \| The prefix for the inner content selector. \| `\"inner-\"` \|\n// \| `$container-breakout-width` \| The width of the breakout section will extend from the content section. \| `4ch` \|\n// \| `$container-feature-width` \| The width of the feature section will extend from the breakout section. \| `10ch` \|\n// \| `$container-sidebar-width` \| The width of the sidebar sections. \| `26ch` \|\n// \| `$forced-container-selectors` \| Additional selectors included in forced container chaining. \| `()` \|\n// \| `$container-theme-mappings` \| Map of properties/shades for container themes. \| `()` \|\n// \| `$container-theme-map` \| Expanded map of properties/colors/shades. \| `()` \|\n//\n// ## What is container chaining?\n//\n// Container chaining is a structural setup in the DOM in which you make sure that if you have nested containers or container-level elements (breakouts, features, etc.), you never allow them to be contained in anything other than a container.\n//\n// What do I mean by this?\n//\n// If you have to following setup in your DOM:\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section>\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// To achieve a breakout of the content inside of the <section>, you need to make sure the section is also a container, otherwise the breakout class will have no effect.\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section class=\"container\">\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// There _is_ a feature flag (`$force-container-chaining`) which automatically set up container chaining for you.\n//\n// This works by selecting all elements between a parent and child container and making them inherit the parent's layout.\n//\n// Because you have control over how this is limited, it can result in using an unrestricted :has() selector, which can be slow.\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"full-width\">\n// Full-width content\n// </div>\n// <div class=\"feature\">\n// Feature content\n// </div>\n// <div class=\"breakout\">\n// Breakout content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"feature contain\">\n// Contained feature content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-left\">\n// <div class=\"sidebar\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Content right content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-right\">\n// <div class=\"content\">\n// Content left content\n// </div>\n// <div class=\"sidebar\">\n// Right sidebar content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars\">\n// <div class=\"sidebar-left\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Inner content content\n// </div>\n// <div class=\"sidebar-right\">\n// Right sidebar content\n// </div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as ;\n@use \"../../mixins/screen\";\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"variables\" as ;\n\n@include layer(layout) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n display: grid;\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-content-section-width\n [content-end]\n $container-breakout-section-width [breakout-end]\n $container-feature-section-width [feature-end]\n $container-full-width-section-width [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n\n // Container components should span the full width of their parent container\n // and inherit the grid columns.\n //\n // > .container\n > #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n\n // Everything in the container that isn't a container component should\n // be in the content section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n\n // Handle force chaining.\n //\n // This works by selecting all elements between a parent and child container\n // and making them inherit the parent's layout.\n //\n // Because you have control over how this is limited, it can result in using\n // an unrestricted :has() selector, which can be slow.\n @if defaults.$force-container-chaining {\n @if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn (\"You have enabled automatic container chaining. This can result in an unrestricted :has() selector if you customize $forced-container-selectors to be too broad, which can be slow. Make sure you know what you're doing with this.\");\n }\n\n // .container :is(article,aside,div,section):not(.container):has(&)\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n :is(#{defaults.$forced-container-selectors}):not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ):has(&) {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n container-type: normal;\n\n // &:not(.sidebars, .sidebars-left, .sidebars-right)\n &:not(\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-template-columns: subgrid;\n }\n }\n }\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n display: grid;\n grid-template-columns: subgrid;\n\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n }\n\n // Set up the container components to span the appropriate grid columns.\n //\n // .breakout\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {\n grid-column: breakout;\n }\n\n // .feature\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column: feature;\n }\n\n // .full-width\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {\n grid-column: full-width;\n }\n\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n // .sidebar-left\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .sidebar-right\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n @include screen.trigger(allow-sidebars) {\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-left-start feature-start] $container-sidebar-left-section-width\n [sidebar-left-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-right-start] $container-sidebar-right-section-width\n [feature-end sidebar-right-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar-left\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar-left section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-left section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n }\n }\n\n // > .sidebar-right\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar-right section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-right section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-left-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-start feature-start] $container-sidebar-left-section-width\n [sidebar-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-left-content-section-width\n [content-end] $container-breakout-section-width\n [breakout-end] $container-feature-section-width\n [feature-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-right-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-sidebars-right-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-start] $container-sidebar-right-section-width\n [feature-end sidebar-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n background-color: $container-background;\n color: $container-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$container-theme-map,\n defaults.$container-theme-selector-base,\n defaults.$container-theme-selector-prefix,\n \"container-\"\n );\n }\n }\n}\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n","// @graupl/core columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// \| Custom property \| Default \|\n// \| -------------------------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------- \|\n// \| --graupl-columns-row-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-columns-column-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-columns-count \| 3 \|\n// \| --graupl-columns-content-max-width \| var(--graupl-content-max-width) \|\n// \| --graupl-columns-min-width \| calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) \|\n// \| --graupl-columns-max-width \| 1fr \|\n// \| --graupl-columns-grid-template-columns \| repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) \|\n// \| --graupl-columns-span \| 1 \|\n// \| --graupl-columns-background \| var(--graupl-background) \|\n// \| --graupl-columns-color \| var(--graupl-color) \|\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} \n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after /\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(\n --#{root-defaults.$prefix}columns-background,\n #{color.$background}\n);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color, #{color.$color});\n","// @graupl/core columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n//\n// The following custom properties can be used to customize the columns component:\n// \| Property \| Description \| Default Value \|\n// \| ---------------------------------------- \| ---------------------------------------------------- \| ------------------------------------------------------------------------------------------------------------------------------------------------------ \|\n// \| `--graupl-columns-row-gap` \| The gap between the rows of the columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-columns-column-gap` \| The gap between the columns of the columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-columns-count` \| The maximum number of columns. \| `3` \|\n// \| `--graupl-columns-content-max-width` \| The maximum width of the content inside the columns. \| `var(--graupl-content-max-width)` \|\n// \| `--graupl-columns-min-width` \| The minimum width of each column. \| `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` \|\n// \| `--graupl-columns-max-width` \| The maximum width of each column. \| `1fr` \|\n// \| `--graupl-columns-grid-template-columns` \| The grid template columns for the columns. \| `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` \|\n// \| `--graupl-columns-span` \| The span of each column. \| `1` \|\n// \| `--graupl-columns-background` \| The background of the columns component. \| `var(--graupl-background)` \|\n// \| `--graupl-columns-color` \| The text color of the columns component. \| `var(--graupl-color)` \|\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// \| Variable \| Description \| Default Value \|\n// \| -------------------------------- \| ------------------------------------------------------------------ \| ---------------- \|\n// \| `$selector-base` \| The base selector for the component. \| `\".\"` \|\n// \| `$modifier-selector-base` \| The base selector for component modifiers. \| `\".\"` \|\n// \| `$generate-base-theme-map` \| Flag to generate the base theme map. \| `true` \|\n// \| `$themeable` \| Flag to generate theme modifiers. \| `false` \|\n// \| `$force-single-columns` \| Flag to enable forced single column layout on small screens. \| `true` \|\n// \| `$columns-selector-base` \| The base selector for the columns component. \| `\".\"` \|\n// \| `$columns-selector` \| The selector for the columns component. \| `\"columns\"` \|\n// \| `$columns-theme-selector-base` \| The selector base for columns theme modifiers. \| `\".\"` \|\n// \| `$columns-theme-selector-prefix` \| The columns theme modifier selector prefix. \| `\"\"` \|\n// \| `$columns-count-selector-base` \| The base selector for the count class. \| `\".\"` \|\n// \| `$columns-count-selector-prefix` \| The prefix for the count class. \| `\"count-\"` \|\n// \| `$columns-span-selector-base` \| The base selector for the span class. \| `\".\"` \|\n// \| `$columns-span-selector-prefix` \| The prefix for the span class. \| `\"span-\"` \|\n// \| `$columns-max-width` \| The maximum width of each column. \| `1fr` \|\n// \| `$columns-count` \| The default number of columns. \| `3` \|\n// \| `$columns-min-count` \| The minimum number of columns used to generate `.count-#` classes. \| `1` \|\n// \| `$columns-max-count` \| The maximum number of columns used to generate `.count-#` classes. \| `6` \|\n// \| `$columns-span` \| The default span of each column. \| `1` \|\n// \| `$columns-theme-mappings` \| Map of properties/shades for columns themes. \| `()` \|\n// \| `$columns-theme-map` \| Expanded map of properties/colors/shades. \| `()` \|\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as ;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as ;\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n }\n\n @for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n // .count-#{$i}\n #{defaults.$columns-count-selector-base}#{defaults.$columns-count-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-count: #{$i};\n\n // For span values bigger than the actual column count, set them to the\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // .span-#{$j}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @if defaults.$force-single-columns {\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n background-color: $columns-background;\n color: $columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$columns-theme-map,\n defaults.$columns-theme-selector-base,\n defaults.$columns-theme-selector-prefix,\n \"columns-\"\n );\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n","// @graupl/core flex columns layout styles.\n//\n// This module provides the layout styles for the flex columns component.\n//\n// The flex columns component is a flex container that provides a responsive grid layout for content.\n// The flex columns will adjust their sizes accordingly based on the classes applied to them.\n//\n// These are effectively bootstrap columns, but leaning more on the way flex natively works in the browser.\n// This means that columns will size themselves taking the gap between them into account.\n//\n// The following classes are generated by default:\n// - `.flex-columns`: The main flex columns component.\n// - `.col-1`: Sets the size of a column in the flex columns component to 1.\n// - `.col-2`: Sets the size of a column in the flex columns component to 2.\n// - `.col-3`: Sets the size of a column in the flex columns component to 3.\n// - `.col-4`: Sets the size of a column in the flex columns component to 4.\n// - `.col-5`: Sets the size of a column in the flex columns component to 5.\n// - `.col-6`: Sets the size of a column in the flex columns component to 6.\n// - `.col-7`: Sets the size of a column in the flex columns component to 7.\n// - `.col-8`: Sets the size of a column in the flex columns component to 8.\n// - `.col-9`: Sets the size of a column in the flex columns component to 9.\n// - `.col-10`: Sets the size of a column in the flex columns component to 10.\n// - `.col-11`: Sets the size of a column in the flex columns component to 11.\n// - `.col-12`: Sets the size of a column in the flex columns component to 12.\n// - `.fill`: A class to set a column to fill the remaining space.\n// - `.[screen-name]:col-#`: A class to set the size of a column at a specific screen size.\n// - `.[container-name]:col-#`: A class to set the size of a column at a specific container size.\n//\n// The following custom properties can be used to customize the flex columns component:\n// \| Property \| Description \| Default Value \|\n// \| -------------------------------------- \| --------------------------------------------------------- \| -------------------------- \|\n// \| `--graupl-flex-columns-row-gap` \| The gap between the rows of the flex columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-flex-columns-column-gap` \| The gap between the columns of the flex columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-flex-columns-size` \| The size of a column. \| `auto` \|\n// \| `--graupl-flex-columns-max-width` \| The maximum width of a column. \| `unset` \|\n// \| `--graupl-flex-columns-container-type` \| The container type applied to the flex columns component. \| `inline-size` \|\n// \| `--graupl-flex-columns-background` \| The background of the flex columns component. \| `var(--graupl-background)` \|\n// \| `--graupl-flex-columns-color` \| The text color of the flex columns component. \| `var(--graupl-color)` \|\n//\n// The following sass variables can be used to customize the generation of the flex columns component:\n// \| Variable \| Description \| Default Value \|\n// \| ----------------------------------------------- \| ---------------------------------------------------------------- \| ---------------- \|\n// \| `$selector-base` \| The base selector for the component. \| `\".\"` \|\n// \| `$modifier-selector-base` \| The base selector for component modifiers. \| `\".\"` \|\n// \| `$generate-base-theme-map` \| Flag to generate the base theme map. \| `true` \|\n// \| `$themeable` \| Flag to generate theme modifiers. \| `false` \|\n// \| `$flex-columns-selector-base` \| The base selector for the flex columns component. \| `\".\"` \|\n// \| `$flex-columns-selector` \| The selector for the flex columns component. \| `\"flex-columns\"` \|\n// \| `$flex-columns-theme-selector-base` \| The selector base for flex columns theme modifiers. \| `\".\"` \|\n// \| `$flex-columns-theme-selector-prefix` \| The flex columns theme modifier selector prefix. \| `\"\"` \|\n// \| `$flex-columns-column-selector-base` \| The base selector for the column class. \| `\".\"` \|\n// \| `$flex-columns-column-selector` \| The selector for the column class. \| `\"col-\"` \|\n// \| `$flex-columns-fill-selector-base` \| The base selector for the fill class. \| `\".\"` \|\n// \| `$flex-columns-fill-selector` \| The selector for the fill class. \| `\"fill\"` \|\n// \| `$flex-columns-screen-aware-separator` \| The separator for the screen-aware column class. \| `\"\\\\:\"` \|\n// \| `$flex-columns-container-aware-separator` \| The separator for the container-aware column class. \| `\"\\\\:\"` \|\n// \| `$flex-columns-screen-aware-selector-prefix` \| The prefix for the screen-aware column class. \| `\"\"` \|\n// \| `$flex-columns-container-aware-selector-prefix` \| The prefix for the container-aware column class. \| `\"cq\\\\:\"` \|\n// \| `$flex-columns-min-count` \| The minimum number of columns used to generate `.col-#` classes. \| `1` \|\n// \| `$flex-columns-max-count` \| The maximum number of columns used to generate `.col-#` classes. \| `12` \|\n// \| `$flex-columns-size` \| The default size of a column. \| `auto` \|\n// \| `$flex-columns-max-width` \| The default maximum width of a column. \| `unset` \|\n// \| `$flex-columns-container-type` \| The container type applied to the flex columns component. \| `\"inline-size\"` \|\n// \| `$flex-columns-theme-mappings` \| Map of properties/shades for flex columns themes. \| `()` \|\n// \| `$flex-columns-theme-map` \| Expanded map of properties/colors/shades. \| `()` \|\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-6\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-3 fill\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3 md:col-2\">Column 1</div>\n// <div class=\"col-6 md:col-8\">Column 2</div>\n// <div class=\"col-3 md:col-2\">Column 3</div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as ;\n@use \"../../mixins/screen\";\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n@use \"../../mixins/utility\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as ;\n\n@include layer(layout) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n display: flex;\n flex-wrap: wrap;\n gap: $flex-columns-row-gap $flex-columns-column-gap;\n container-type: $flex-columns-container-type;\n\n > * {\n flex: 1 1 $flex-columns-size;\n max-width: $flex-columns-max-width;\n }\n\n // `.fill`\n #{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n // e.g. `.col-1` or `.col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} #{$i}) -\n #{$flex-columns-column-gap}\n );\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: $flex-columns-container-type;\n }\n\n @include container.trigger(force-single-column) {\n // e.g. `.col-1` or `.col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {\n --#{root-defaults.$prefix}flex-columns-size: 100%;\n --#{root-defaults.$prefix}flex-columns-max-width: auto;\n }\n }\n }\n\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @include utility.create-mapped(\n // e.g. `.md:col-1` or `.xl:col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-screen-aware-selector-prefix}#{$screen-name}#{defaults.$flex-columns-screen-aware-separator}#{defaults.$flex-columns-column-selector}#{$i},\n (\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} #{$i}) -\n #{$flex-columns-column-gap}\n ),\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n )\n ),\n $screen: $screen-name\n ) {\n // `&.fill`\n &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n }\n }\n\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @include utility.create-mapped(\n // e.g. `.cq:md:col-1` or `.cq:xl:col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-container-aware-selector-prefix}#{$container-name}#{defaults.$flex-columns-container-aware-separator}#{defaults.$flex-columns-column-selector}#{$i},\n (\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} #{$i}) -\n #{$flex-columns-column-gap}\n ),\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n )\n ),\n $container: $container-name\n ) {\n // `&.fill`\n &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after */\n }\n }\n}\n\n@include layer(theme) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n background-color: $flex-columns-background;\n color: $flex-columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$flex-columns-theme-map,\n defaults.$flex-columns-theme-selector-base,\n defaults.$flex-columns-theme-selector-prefix,\n \"flex-columns-\"\n );\n }\n }\n}\n","// @graupl/core flex columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// \| Custom property \| Default \|\n// \| ------------------------------------ \| ------------------------ \|\n// \| --graupl-flex-columns-row-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-flex-columns-column-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-flex-columns-size \| auto \|\n// \| --graupl-flex-columns-max-width \| unset \|\n// \| --graupl-flex-columns-container-type \| inline-size \|\n// \| --graupl-flex-columns-background \| var(--graupl-background) \|\n// \| --graupl-flex-columns-color \| var(--graupl-color) \|\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../columns/variables\" as columns-variables;\n\n// Flex columns properties.\n// --graupl-flex-columns-row-gap\n$flex-columns-row-gap: var(\n --#{root-defaults.$prefix}flex-columns-row-gap,\n #{columns-variables.$columns-row-gap}\n);\n\n// --graupl-flex-columns-column-gap\n$flex-columns-column-gap: var(\n --#{root-defaults.$prefix}flex-columns-column-gap,\n #{columns-variables.$columns-column-gap}\n);\n\n// --graupl-flex-columns-size\n$flex-columns-size: var(\n --#{root-defaults.$prefix}flex-columns-size,\n #{defaults.$flex-columns-size}\n);\n\n// --graupl-flex-columns-max-width\n$flex-columns-max-width: var(\n --#{root-defaults.$prefix}flex-columns-max-width,\n #{defaults.$flex-columns-max-width}\n);\n\n// --graupl-flex-columns-container-type\n$flex-columns-container-type: var(\n --#{root-defaults.$prefix}flex-columns-container-type,\n #{defaults.$flex-columns-container-type}\n);\n\n// --graupl-flex-columns-background\n$flex-columns-background: var(\n --#{root-defaults.$prefix}flex-columns-background,\n #{color.$background}\n);\n\n// --graupl-flex-columns-color\n$flex-columns-color: var(\n --#{root-defaults.$prefix}flex-columns-color,\n #{color.$color}\n);\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string\|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"sourceRoot":null,"mappings":"AESI,qBCiNF,+qGAkBE,2FAUA,+EAoDA,+DAKE,wFAaF,0CAKA,wCAKA,8CAOE,uHAOE,oHAYF,wHAOE,sHAYF,kHAOE,iPAkCF,uHAOE,+GAYF,uHAOE,mNAgCF,wHAOE,gHAYF,wHAOE,qNCleN,kCDigBI,44SAcE,sEAWI,kUAYF,sMA2BF,uEAWI,uUAYF,yMA2BF,wCAMF,8nNAcE,sEAWI,kUAYF,iMA2BF,6CAMF,uoNAcE,uEAWI,uUAYF,mMA2BF,+CGlrBN,ymBAKE,yDAQA,gDAOA,kCAOI,qHAPJ,kCAOI,oGAPJ,kCAOI,mFAPJ,kCAOI,kEAPJ,kCAOI,iDAPJ,kCAOI,kEC/FN,0BD+GI,wCAGE,0IEtCN,iXAME,mHAMA,0DAUA,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,qTDlGF,0BCiHI,6EAfF,wTDlGF,0BCiHI,8EAfF,wTDlGF,0BCiHI,8EAfF,wTDlGF,0BCiHI,8EJ1HJ,6BM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,iCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,iCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,kPFUI,sDEVJ,qPFUI,uDEVJ,qPFUI,uDEVJ,qPFUI,wDJtJN,kCM4IE,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,sPFUI,wDEVJ,sPFUI,wDEVJ,sPFUI,yDJtJN,kCM4IE,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,mPFUI,uDEVJ,sPFUI,wDEVJ,sPFUI,wDEVJ,sPFUI,yDDtJN,sBG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,0BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,0BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,sPFuCI,0DEvCJ,yPFuCI,2DEvCJ,yPFuCI,2DEvCJ,yPFuCI,4DDnLN,2BG4IE,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,0PFuCI,4DEvCJ,0PFuCI,4DEvCJ,0PFuCI,6DDnLN,2BG4IE,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,uPFuCI,2DEvCJ,0PFuCI,4DEvCJ,0PFuCI,4DEvCJ,0PFuCI,8DNxLJ,oBC8wBF,6FGznBA,uFE8CA","sources":["dist/css/layout.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/container/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/container/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_screen.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_container.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/flex-columns/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/flex-columns/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_utility.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n/ stylelint-enable scss/operator-no-newline-after /\n/ stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n/ stylelint-enable scss/operator-no-newline-after /\n@layer graupl.layout {\n .container {\n display: grid;\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width, min(var(--graupl-container-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)), var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n }\n .container > .container {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n .container > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .contain {\n display: grid;\n grid-template-columns: subgrid;\n }\n .container .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .breakout {\n grid-column: breakout;\n }\n .container .feature {\n grid-column: feature;\n }\n .container .full-width {\n grid-column: full-width;\n }\n .container.sidebars .sidebar-left {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left) {\n grid-column: content;\n }\n .container.sidebars .sidebar-right {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars-left .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n @media screen and (1024px <= width) {\n .container.sidebars {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width, min(var(--graupl-container-sidebars-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars > .sidebar-left {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-left:not(.container),\n .container.sidebars > .sidebar-left:not(.container) .container,\n .container.sidebars > .sidebar-left:not(.container) .breakout,\n .container.sidebars > .sidebar-left:not(.container) .full-width,\n .container.sidebars > .sidebar-left:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars > .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-left .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-right {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-right:not(.container),\n .container.sidebars > .sidebar-right:not(.container) .container,\n .container.sidebars > .sidebar-right:not(.container) .breakout,\n .container.sidebars > .sidebar-right:not(.container) .full-width,\n .container.sidebars > .sidebar-right:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars > .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .sidebar-right .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .content {\n grid-row: 1;\n }\n .container.sidebars-left {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width, min(var(--graupl-container-sidebars-left-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-left > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-left > .sidebar:not(.container),\n .container.sidebars-left > .sidebar:not(.container) .container,\n .container.sidebars-left > .sidebar:not(.container) .breakout,\n .container.sidebars-left > .sidebar:not(.container) .full-width,\n .container.sidebars-left > .sidebar:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars-left > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .content {\n grid-row: 1;\n }\n .container.sidebars-right {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width, min(var(--graupl-container-sidebars-right-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-right > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-right > .sidebar:not(.container),\n .container.sidebars-right > .sidebar:not(.container) .container,\n .container.sidebars-right > .sidebar:not(.container) .breakout,\n .container.sidebars-right > .sidebar:not(.container) .full-width,\n .container.sidebars-right > .sidebar:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars-right > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .content {\n grid-row: 1;\n }\n }\n}\n@layer graupl.theme {\n .container {\n background: var(--graupl-container-background);\n color: var(--graupl-container-color);\n }\n}\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n/ stylelint-enable scss/operator-no-newline-after /\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .count-1 {\n --graupl-columns-count: 1;\n }\n .count-1 .span-2 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-3 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-4 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-5 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-6 {\n --graupl-columns-span: 1;\n }\n .span-1 {\n --graupl-columns-span: 1;\n }\n .count-2 {\n --graupl-columns-count: 2;\n }\n .count-2 .span-3 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-4 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-5 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-6 {\n --graupl-columns-span: 2;\n }\n .span-2 {\n --graupl-columns-span: 2;\n }\n .count-3 {\n --graupl-columns-count: 3;\n }\n .count-3 .span-4 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-5 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-6 {\n --graupl-columns-span: 3;\n }\n .span-3 {\n --graupl-columns-span: 3;\n }\n .count-4 {\n --graupl-columns-count: 4;\n }\n .count-4 .span-5 {\n --graupl-columns-span: 4;\n }\n .count-4 .span-6 {\n --graupl-columns-span: 4;\n }\n .span-4 {\n --graupl-columns-span: 4;\n }\n .count-5 {\n --graupl-columns-count: 5;\n }\n .count-5 .span-6 {\n --graupl-columns-span: 5;\n }\n .span-5 {\n --graupl-columns-span: 5;\n }\n .count-6 {\n --graupl-columns-count: 6;\n }\n .count-6 .span-7 {\n --graupl-columns-span: 6;\n }\n .count-6 .span-6 {\n --graupl-columns-span: 6;\n }\n .span-6 {\n --graupl-columns-span: 6;\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n }\n}\n@layer graupl.theme {\n .columns {\n background: var(--graupl-columns-background);\n color: var(--graupl-columns-color);\n }\n}\n@layer graupl.layout {\n .flex-columns {\n display: flex;\n flex-wrap: wrap;\n gap: var(--graupl-flex-columns-row-gap, var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))) var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n .flex-columns > * {\n flex: 1 1 var(--graupl-flex-columns-size, auto);\n max-width: var(--graupl-flex-columns-max-width, unset);\n }\n .flex-columns .fill {\n --graupl-flex-columns-max-width: unset;\n }\n .col-1 {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 1) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 1\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-1 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-2 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 2) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 2\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-2 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-3 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 3) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 3\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-3 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-4 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 4) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 4\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-4 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-5 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 5) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 5\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-5 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-6 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 6) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 6\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-6 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-7 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 7) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 7\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-7 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-8 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 8) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 8\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-8 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-9 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 9) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 9\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-9 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-10 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 10) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 10\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-10 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-11 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 11) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 11\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-11 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n .col-12 {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --graupl-flex-columns-size: calc(\n (100% / 12 12) -\n var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))))\n );\n --graupl-flex-columns-max-width: calc(\n 100% / 12 * 12\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: var(--graupl-flex-columns-container-type, inline-size);\n }\n @container (width <= 575px) {\n .col-12 {\n --graupl-flex-columns-size: 100%;\n --graupl-flex-columns-max-width: auto;\n }\n }\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .xs\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .xs\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .xs\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .xs\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .xs\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .xs\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .xs\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .xs\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .xs\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .xs\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .xs\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (0 <= width) {\n .xs\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .xs\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .sm\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .sm\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .sm\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .sm\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .sm\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .sm\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .sm\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .sm\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .sm\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .sm\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .sm\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (576px <= width) {\n .sm\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .sm\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .md\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .md\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .md\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .md\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .md\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .md\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .md\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .md\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .md\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .md\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .md\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (768px <= width) {\n .md\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .md\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .lg\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .lg\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .lg\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .lg\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .lg\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .lg\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .lg\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .lg\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .lg\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .lg\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .lg\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1024px <= width) {\n .lg\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .lg\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .xl\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .xl\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .xl\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .xl\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .xl\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .xl\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .xl\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .xl\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .xl\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .xl\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .xl\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1280px <= width) {\n .xl\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .xl\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .hd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .hd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .hd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .hd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .hd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .hd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .hd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .hd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .hd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .hd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .hd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1500px <= width) {\n .hd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .hd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .qhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .qhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .qhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .qhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .qhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .qhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .qhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .qhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .qhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .qhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .qhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (1921px <= width) {\n .qhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .qhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .uhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .uhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .uhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .uhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .uhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .uhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .uhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .uhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .uhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .uhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .uhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @media screen and (2561px <= width) {\n .uhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .uhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:xs\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:xs\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:xs\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:xs\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:xs\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:xs\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:xs\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:xs\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:xs\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:xs\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:xs\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (0 <= width) {\n .cq\\:xs\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:xs\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:sm\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:sm\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:sm\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:sm\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:sm\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:sm\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:sm\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:sm\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:sm\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:sm\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:sm\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (576px <= width) {\n .cq\\:sm\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:sm\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:md\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:md\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:md\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:md\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:md\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:md\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:md\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:md\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:md\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:md\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:md\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (768px <= width) {\n .cq\\:md\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:md\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:lg\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:lg\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:lg\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:lg\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:lg\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:lg\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:lg\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:lg\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:lg\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:lg\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:lg\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1024px <= width) {\n .cq\\:lg\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:lg\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:xl\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:xl\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:xl\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:xl\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:xl\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:xl\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:xl\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:xl\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:xl\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:xl\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:xl\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1280px <= width) {\n .cq\\:xl\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:xl\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:hd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:hd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:hd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:hd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:hd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:hd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:hd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:hd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:hd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:hd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:hd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1500px <= width) {\n .cq\\:hd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:hd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:qhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:qhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:qhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:qhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:qhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:qhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:qhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:qhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:qhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:qhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:qhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (1921px <= width) {\n .cq\\:qhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:qhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-1 {\n --graupl-flex-columns-size: calc(100% / 12 1 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 1);\n }\n .cq\\:uhd\\:col-1.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-2 {\n --graupl-flex-columns-size: calc(100% / 12 2 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 2);\n }\n .cq\\:uhd\\:col-2.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-3 {\n --graupl-flex-columns-size: calc(100% / 12 3 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 3);\n }\n .cq\\:uhd\\:col-3.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-4 {\n --graupl-flex-columns-size: calc(100% / 12 4 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 4);\n }\n .cq\\:uhd\\:col-4.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-5 {\n --graupl-flex-columns-size: calc(100% / 12 5 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 5);\n }\n .cq\\:uhd\\:col-5.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-6 {\n --graupl-flex-columns-size: calc(100% / 12 6 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 6);\n }\n .cq\\:uhd\\:col-6.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-7 {\n --graupl-flex-columns-size: calc(100% / 12 7 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 7);\n }\n .cq\\:uhd\\:col-7.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-8 {\n --graupl-flex-columns-size: calc(100% / 12 8 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 8);\n }\n .cq\\:uhd\\:col-8.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-9 {\n --graupl-flex-columns-size: calc(100% / 12 9 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 9);\n }\n .cq\\:uhd\\:col-9.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-10 {\n --graupl-flex-columns-size: calc(100% / 12 10 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 10);\n }\n .cq\\:uhd\\:col-10.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-11 {\n --graupl-flex-columns-size: calc(100% / 12 11 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 11);\n }\n .cq\\:uhd\\:col-11.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @container (2561px <= width) {\n .cq\\:uhd\\:col-12 {\n --graupl-flex-columns-size: calc(100% / 12 12 - var(--graupl-flex-columns-column-gap, var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n --graupl-flex-columns-max-width: calc(100% / 12 * 12);\n }\n .cq\\:uhd\\:col-12.fill {\n --graupl-flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n}\n@layer graupl.theme {\n .flex-columns {\n background: var(--graupl-flex-columns-background);\n color: var(--graupl-flex-columns-color);\n }\n}","// @graupl/core container layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// \| Custom property \| Default \|\n// \| ----------------------------------------------------------- \| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ \|\n// \| --graupl-container-sidebar-width \| 26ch \|\n// \| --graupl-container-breakout-width \| 4ch \|\n// \| --graupl-container-feature-width \| 10ch \|\n// \| --graupl-container-content-max-width \| var(--graupl-content-max-width) \|\n// \| --graupl-container-breakout-max-width \| calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width)) \|\n// \| --graupl-container-feature-max-width \| calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width)) \|\n// \| --graupl-container-full-width-section-min-width \| var(--graupl-spacer-5) \|\n// \| --graupl-container-full-width-section-max-width \| 1fr \|\n// \| --graupl-container-feature-section-min-width \| 0rem \|\n// \| --graupl-container-feature-section-max-width \| calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2) \|\n// \| --graupl-container-breakout-section-min-width \| 0rem \|\n// \| --graupl-container-breakout-section-max-width \| calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2) \|\n// \| --graupl-container-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2)) \|\n// \| --graupl-container-content-section-max-width \| var(--graupl-container-content-max-width) \|\n// \| --graupl-container-full-width-section-width \| minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width)) \|\n// \| --graupl-container-feature-section-width \| minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width)) \|\n// \| --graupl-container-breakout-section-width \| minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width)) \|\n// \| --graupl-container-content-section-width \| min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width)) \|\n// \| --graupl-container-sidebar-left-section-width \| max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) \|\n// \| --graupl-container-sidebar-right-section-width \| max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) \|\n// \| --graupl-container-sidebars-breakout-section-width \| var(--graupl-container-breakout-section-max-width) \|\n// \| --graupl-container-sidebars-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width)) \|\n// \| --graupl-container-sidebars-content-section-max-width \| calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) \|\n// \| --graupl-container-sidebars-content-section-width \| min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width)) \|\n// \| --graupl-container-sidebars-right-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width)) \|\n// \| --graupl-container-sidebars-right-content-section-max-width \| calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) \|\n// \| --graupl-container-sidebars-right-content-section-width \| min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width)) \|\n// \| --graupl-container-sidebars-left-content-section-min-width \| calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width)) \|\n// \| --graupl-container-sidebars-left-content-section-max-width \| calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) \|\n// \| --graupl-container-sidebars-left-content-section-width \| min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width)) \|\n// \| --graupl-container-background \| null \|\n// \| --graupl-container-color \| null \|\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// --graupl-container-sidebar-width\n$container-sidebar-width: var(\n --#{root-defaults.$prefix}container-sidebar-width,\n #{defaults.$container-sidebar-width}\n);\n\n// --graupl-container-breakout-width\n$container-breakout-width: var(\n --#{root-defaults.$prefix}container-breakout-width,\n #{defaults.$container-breakout-width}\n);\n\n// --graupl-container-feature-width\n$container-feature-width: var(\n --#{root-defaults.$prefix}container-feature-width,\n #{defaults.$container-feature-width}\n);\n\n// --graupl-container-content-max-width\n$container-content-max-width: var(\n --#{root-defaults.$prefix}container-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// --graupl-container-breakout-max-width\n$container-breakout-max-width: var(\n --#{root-defaults.$prefix}container-breakout-max-width,\n calc(#{$container-content-max-width} + #{$container-breakout-width})\n);\n\n// --graupl-container-feature-max-width\n$container-feature-max-width: var(\n --#{root-defaults.$prefix}container-feature-max-width,\n calc(#{$container-breakout-max-width} + #{$container-feature-width})\n);\n\n// --graupl-container-full-width-section-min-width\n$container-full-width-section-min-width: var(\n --#{root-defaults.$prefix}container-full-width-section-min-width,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-container-full-width-section-max-width\n$container-full-width-section-max-width: var(\n --#{root-defaults.$prefix}container-full-width-section-max-width,\n 1fr\n);\n\n// --graupl-container-feature-section-min-width\n$container-feature-section-min-width: var(\n --#{root-defaults.$prefix}container-feature-section-min-width,\n 0rem\n);\n\n// --graupl-container-feature-section-max-width\n$container-feature-section-max-width: var(\n --#{root-defaults.$prefix}container-feature-section-max-width,\n calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)\n);\n\n// --graupl-container-breakout-section-min-width\n$container-breakout-section-min-width: var(\n --#{root-defaults.$prefix}container-breakout-section-min-width,\n 0rem\n);\n\n// --graupl-container-breakout-section-max-width\n$container-breakout-section-max-width: var(\n --#{root-defaults.$prefix}container-breakout-section-max-width,\n calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n// --graupl-container-content-section-min-width\n$container-content-section-min-width: var(\n --#{root-defaults.$prefix}container-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-breakout-section-min-width} * 2)\n )\n);\n/* stylelint-enable scss/operator-no-newline-after /\n// --graupl-container-content-section-max-width\n$container-content-section-max-width: var(\n --#{root-defaults.$prefix}container-content-section-max-width,\n #{$container-content-max-width}\n);\n\n// --graupl-container-full-width-section-width\n$container-full-width-section-width: var(\n --#{root-defaults.$prefix}container-full-width-section-width,\n minmax(\n #{$container-full-width-section-min-width},\n #{$container-full-width-section-max-width}\n )\n);\n\n// --graupl-container-feature-section-width\n$container-feature-section-width: var(\n --#{root-defaults.$prefix}container-feature-section-width,\n minmax(\n #{$container-feature-section-min-width},\n #{$container-feature-section-max-width}\n )\n);\n\n// --graupl-container-breakout-section-width\n$container-breakout-section-width: var(\n --#{root-defaults.$prefix}container-breakout-section-width,\n minmax(\n #{$container-breakout-section-min-width},\n #{$container-breakout-section-max-width}\n )\n);\n\n// --graupl-container-content-section-width\n$container-content-section-width: var(\n --#{root-defaults.$prefix}container-content-section-width,\n min(\n #{$container-content-section-min-width},\n #{$container-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebar-left-section-width\n$container-sidebar-left-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-left-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebar-right-section-width\n$container-sidebar-right-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-right-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebars-breakout-section-width\n$container-sidebars-breakout-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-breakout-section-width,\n #{$container-breakout-section-max-width}\n);\n/ stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n// --graupl-container-sidebars-content-section-min-width\n$container-sidebars-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-sidebars-breakout-section-width} * 2) -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-content-section-max-width\n$container-sidebars-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width) +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-content-section-width\n$container-sidebars-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-width,\n min(\n #{$container-sidebars-content-section-min-width},\n #{$container-sidebars-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-min-width\n$container-sidebars-right-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-max-width\n$container-sidebars-right-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-right-content-section-width\n$container-sidebars-right-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-width,\n min(\n $container-sidebars-right-content-section-min-width,\n $container-sidebars-right-content-section-max-width\n )\n);\n\n// --graupl-container-sidebars-left-content-section-min-width\n$container-sidebars-left-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-left-section-width}\n )\n);\n\n// --graupl-container-sidebars-left-content-section-max-width\n$container-sidebars-left-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-left-content-section-width\n$container-sidebars-left-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-width,\n min(\n $container-sidebars-left-content-section-min-width,\n $container-sidebars-left-content-section-max-width\n )\n);\n\n// --graupl-container-background\n$container-background: var(--#{root-defaults.$prefix}container-background);\n\n// --graupl-container-color\n$container-color: var(--#{root-defaults.$prefix}container-color);\n/* stylelint-enable scss/operator-no-newline-after /\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core container layout styles.\n//\n// This module provides the layout styles for the container component.\n//\n// The container component is a grid container that provides a layout for the main content of a page.\n// It is divided into four sections:\n// - Full-width: A full-width section that spans the entire width of the container.\n// - Feature: A feature section that is used for feature content.\n// - Breakout: A breakout section that is used for breakout content.\n// - Content: The main content section that contains all other content.\n//\n// Optionally, the container component can have sidebars, which divides the content section into five sections:\n// - Sidebar-left: A left sidebar section that is used for sidebar content.\n// - Sidebar-right: A right sidebar section that is used for sidebar content.\n// - Inner-content: A section that contains the main content of the page.\n// - Content-left: A section that contains the sidebar-left and inner-content sections.\n// - Content-right: A section that contains the inner-content and sidebar-right sections.\n//\n// The container layout is as follows:\n// \| full-width \| feature \| breakout \| content \| breakout \| feature \| full-width \|\n//\n// Nesting a container directly inside of another container will cause the\n// nested container to inherit the grid columns of the parent container.\n//\n// The following classes are generated by default:\n// - `.container`: The main container component.\n// - `.full-width`: A full-width container component.\n// - `.feature`: A feature container component.\n// - `.breakout`: A breakout container component.\n// - `.contain`: A utility class to contain child elements to the content section of the container grid.\n// - `.sidebars`: A utility class to enable two sidebars in the container.\n// - `.sidebars-left`: A utility class to enable a left sidebar in the container.\n// - `.sidebars-right`: A utility class to enable a right sidebar in the container.\n// - `.sidebar-left`: A left sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar-right`: A right sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar`: A sidebar container component used directly inside of a container with sidebars.\n// - `.content`: A content container component used directly inside of a container with sidebars.\n//\n// The following custom properties can be used to customize the container component:\n// \| Property \| Description \| Default Value \|\n// \| ------------------------------------------------------------- \| ----------------------------------------------------------------------------------- \| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|\n// \| `--graupl-container-sidebar-width` \| The width of the sidebar sections. \| `26ch` \|\n// \| `--graupl-container-breakout-width` \| The width that the breakout section will extend beyond the content. \| `4ch` \|\n// \| `--graupl-container-feature-width` \| The width that the feature section will extend beyond the breakout. \| `10ch` \|\n// \| `--graupl-container-content-max-width` \| The maximum width of the content section. \| `var(--graupl-content-max-width)` \|\n// \| `--graupl-container-breakout-max-width` \| The maximum width of the breakout section. \| `calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width))` \|\n// \| `--graupl-container-feature-max-width` \| The maximum width of the feature section. \| `calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width))` \|\n// \| `--graupl-container-full-width-section-min-width` \| The minimum width of one side of the full-width section. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-container-full-width-section-max-width` \| The maximum width of one side of the full-width section. \| `1fr` \|\n// \| `--graupl-container-feature-section-min-width` \| The minimum width of one side of the feature section. \| `0rem` \|\n// \| `--graupl-container-feature-section-max-width` \| The maximum width of one side of the feature section. \| `calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2)` \|\n// \| `--graupl-container-breakout-section-min-width` \| The minimum width of one side of the breakout section. \| `0rem` \|\n// \| `--graupl-container-breakout-section-max-width` \| The maximum width of one side of the breakout section. \| `calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2)` \|\n// \| `--graupl-container-content-section-min-width` \| The minimum width of the content section. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2))` \|\n// \| `--graupl-container-content-section-max-width` \| The maximum width of the content section. \| `var(--graupl-container-content-max-width)` \|\n// \| `--graupl-container-full-width-section-width` \| The calculated minmax width of the full-width section. \| `minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width))` \|\n// \| `--graupl-container-feature-section-width` \| The calculated minmax width of the feature section. \| `minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width))` \|\n// \| `--graupl-container-breakout-section-width` \| The calculated minmax width of the breakout section. \| `minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width))` \|\n// \| `--graupl-container-content-section-width` \| The calculated width of the content section. \| `min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width))` \|\n// \| `--graupl-container-sidebar-left-section-width` \| The width of the left sidebar section. \| `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` \|\n// \| `--graupl-container-sidebar-right-section-width` \| The width of the right sidebar section. \| `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` \|\n// \| `--graupl-container-sidebars-breakout-section-width` \| The breakout width when both sidebars are enabled. \| `var(--graupl-container-breakout-section-max-width)` \|\n// \| `--graupl-container-sidebars-content-section-min-width` \| The minimum width of the content section when both sidebars are enabled. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width))` \|\n// \| `--graupl-container-sidebars-content-section-max-width` \| The maximum width of the content section when both sidebars are enabled. \| `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` \|\n// \| `--graupl-container-sidebars-content-section-width` \| The calculated width of the content section when both sidebars are enabled. \| `min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width))` \|\n// \| `--graupl-container-sidebars-right-content-section-min-width` \| The minimum width of the content section when only the right sidebar is enabled. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width))` \|\n// \| `--graupl-container-sidebars-right-content-section-max-width` \| The maximum width of the content section when only the right sidebar is enabled. \| `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` \|\n// \| `--graupl-container-sidebars-right-content-section-width` \| The calculated width of the content section when only the right sidebar is enabled. \| `min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width))` \|\n// \| `--graupl-container-sidebars-left-content-section-min-width` \| The minimum width of the content section when only the left sidebar is enabled. \| `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width))` \|\n// \| `--graupl-container-sidebars-left-content-section-max-width` \| The maximum width of the content section when only the left sidebar is enabled. \| `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` \|\n// \| `--graupl-container-sidebars-left-content-section-width` \| The calculated width of the content section when only the left sidebar is enabled. \| `min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width))` \|\n// \| `--graupl-container-background` \| The background of the container component. \| `var(--graupl-background)` \|\n// \| `--graupl-container-color` \| The text color of the container component. \| `var(--graupl-color)` \|\n//\n// The following sass variables can be used to customize the generation of the container component:\n// \| Variable \| Description \| Default Value \|\n// \| -------------------------------------- \| ---------------------------------------------------------------------------- \| ------------------------- \|\n// \| `$selector-base` \| The selector base for the component. \| `\".\"` \|\n// \| `$modifier-selector-base` \| The selector base for component modifiers. \| `\".\"` \|\n// \| `$generate-base-theme-map` \| Flag to generate the base theme map. \| `true` \|\n// \| `$themeable` \| Flag to generate theme modifiers. \| `false` \|\n// \| `$force-container-chaining` \| A flag to force container chaining in all containers. \| `false` \|\n// \| `$generate-forced-container-selectors` \| A flag to generate a set of default selectors for forced container chaining. \| `true` \|\n// \| `$show-warnings` \| A flag to show any built-in warnings that may be output during compiling. \| `true` \|\n// \| `$container-selector-base` \| The base selector for the container component. \| `\".\"` \|\n// \| `$container-selector` \| The selector for the container component. \| `\"container\"` \|\n// \| `$container-theme-selector-base` \| The selector base for container theme modifiers. \| `\".\"` \|\n// \| `$container-theme-selector-prefix` \| The container theme modifier selector prefix. \| `\"\"` \|\n// \| `$container-breakout-selector-base` \| The base selector for the breakout container component. \| `\".\"` \|\n// \| `$container-breakout-selector` \| The selector for the breakout container component. \| `\"breakout\"` \|\n// \| `$container-feature-selector-base` \| The base selector for the feature container component. \| `\".\"` \|\n// \| `$container-feature-selector` \| The selector for the feature container component. \| `\"feature\"` \|\n// \| `$container-full-width-selector-base` \| The base selector for the full-width container component. \| `\".\"` \|\n// \| `$container-full-width-selector` \| The selector for the full-width container component. \| `\"full-width\"` \|\n// \| `$container-contain-selector-base` \| The base selector for the contain utility class. \| `\".\"` \|\n// \| `$container-contain-selector` \| The selector for the contain utility class. \| `\"contain\"` \|\n// \| `$container-sidebars-selector-base` \| The base selector for the sidebars utility class. \| `\".\"` \|\n// \| `$container-sidebars-selector` \| The selector for the sidebars utility class. \| `\"sidebars\"` \|\n// \| `$container-content-selector-base` \| The base selector for the content container component. \| `\".\"` \|\n// \| `$container-content-selector` \| The selector for the content container component. \| `\"content\"` \|\n// \| `$container-sidebar-selector-base` \| The base selector for the sidebar container component. \| `\".\"` \|\n// \| `$container-sidebar-selector` \| The selector for the sidebar container component. \| `\"sidebar\"` \|\n// \| `$container-left-selector-suffix` \| The suffix for the left sidebar selector. \| `\"-left\"` \|\n// \| `$container-right-selector-suffix` \| The suffix for the right sidebar selector. \| `\"-right\"` \|\n// \| `$container-inner-selector-prefix` \| The prefix for the inner content selector. \| `\"inner-\"` \|\n// \| `$container-breakout-width` \| The width of the breakout section will extend from the content section. \| `4ch` \|\n// \| `$container-feature-width` \| The width of the feature section will extend from the breakout section. \| `10ch` \|\n// \| `$container-sidebar-width` \| The width of the sidebar sections. \| `26ch` \|\n// \| `$forced-container-selectors` \| Additional selectors included in forced container chaining. \| `()` \|\n// \| `$container-theme-mappings` \| Map of properties/shades for container themes. \| `()` \|\n// \| `$container-theme-map` \| Expanded map of properties/colors/shades. \| `()` \|\n//\n// ## What is container chaining?\n//\n// Container chaining is a structural setup in the DOM in which you make sure that if you have nested containers or container-level elements (breakouts, features, etc.), you never allow them to be contained in anything other than a container.\n//\n// What do I mean by this?\n//\n// If you have to following setup in your DOM:\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section>\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// To achieve a breakout of the content inside of the <section>, you need to make sure the section is also a container, otherwise the breakout class will have no effect.\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section class=\"container\">\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// There _is_ a feature flag (`$force-container-chaining`) which automatically set up container chaining for you.\n//\n// This works by selecting all elements between a parent and child container and making them inherit the parent's layout.\n//\n// Because you have control over how this is limited, it can result in using an unrestricted :has() selector, which can be slow.\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"full-width\">\n// Full-width content\n// </div>\n// <div class=\"feature\">\n// Feature content\n// </div>\n// <div class=\"breakout\">\n// Breakout content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"feature contain\">\n// Contained feature content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-left\">\n// <div class=\"sidebar\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Content right content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-right\">\n// <div class=\"content\">\n// Content left content\n// </div>\n// <div class=\"sidebar\">\n// Right sidebar content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars\">\n// <div class=\"sidebar-left\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Inner content content\n// </div>\n// <div class=\"sidebar-right\">\n// Right sidebar content\n// </div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as ;\n@use \"../../mixins/screen\";\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"variables\" as ;\n\n@include layer(layout) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n display: grid;\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-content-section-width\n [content-end]\n $container-breakout-section-width [breakout-end]\n $container-feature-section-width [feature-end]\n $container-full-width-section-width [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n\n // Container components should span the full width of their parent container\n // and inherit the grid columns.\n //\n // > .container\n > #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n\n // Everything in the container that isn't a container component should\n // be in the content section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n\n // Handle force chaining.\n //\n // This works by selecting all elements between a parent and child container\n // and making them inherit the parent's layout.\n //\n // Because you have control over how this is limited, it can result in using\n // an unrestricted :has() selector, which can be slow.\n @if defaults.$force-container-chaining {\n @if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn (\"You have enabled automatic container chaining. This can result in an unrestricted :has() selector if you customize $forced-container-selectors to be too broad, which can be slow. Make sure you know what you're doing with this.\");\n }\n\n // .container :is(article,aside,div,section):not(.container):has(&)\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n :is(#{defaults.$forced-container-selectors}):not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ):has(&) {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n container-type: normal;\n\n // &:not(.sidebars, .sidebars-left, .sidebars-right)\n &:not(\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-template-columns: subgrid;\n }\n }\n }\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n display: grid;\n grid-template-columns: subgrid;\n\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n }\n\n // Set up the container components to span the appropriate grid columns.\n //\n // .breakout\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {\n grid-column: breakout;\n }\n\n // .feature\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column: feature;\n }\n\n // .full-width\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {\n grid-column: full-width;\n }\n\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n // .sidebar-left\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .sidebar-right\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n @include screen.trigger(allow-sidebars) {\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-left-start feature-start] $container-sidebar-left-section-width\n [sidebar-left-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-right-start] $container-sidebar-right-section-width\n [feature-end sidebar-right-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar-left\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar-left section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-left section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n }\n }\n\n // > .sidebar-right\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar-right section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-right section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-left-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-start feature-start] $container-sidebar-left-section-width\n [sidebar-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-left-content-section-width\n [content-end] $container-breakout-section-width\n [breakout-end] $container-feature-section-width\n [feature-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-right-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-sidebars-right-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-start] $container-sidebar-right-section-width\n [feature-end sidebar-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n background: $container-background;\n color: $container-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$container-theme-map,\n defaults.$container-theme-selector-base,\n defaults.$container-theme-selector-prefix,\n \"container-\"\n );\n }\n }\n}\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n","// @graupl/core columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// \| Custom property \| Default \|\n// \| -------------------------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------- \|\n// \| --graupl-columns-row-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-columns-column-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-columns-count \| 3 \|\n// \| --graupl-columns-content-max-width \| var(--graupl-content-max-width) \|\n// \| --graupl-columns-min-width \| calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) \|\n// \| --graupl-columns-max-width \| 1fr \|\n// \| --graupl-columns-grid-template-columns \| repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) \|\n// \| --graupl-columns-span \| 1 \|\n// \| --graupl-columns-background \| null \|\n// \| --graupl-columns-color \| null \|\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} \n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after /\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(--#{root-defaults.$prefix}columns-background);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color);\n","// @graupl/core columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n//\n// The following custom properties can be used to customize the columns component:\n// \| Property \| Description \| Default Value \|\n// \| ---------------------------------------- \| ---------------------------------------------------- \| ------------------------------------------------------------------------------------------------------------------------------------------------------ \|\n// \| `--graupl-columns-row-gap` \| The gap between the rows of the columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-columns-column-gap` \| The gap between the columns of the columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-columns-count` \| The maximum number of columns. \| `3` \|\n// \| `--graupl-columns-content-max-width` \| The maximum width of the content inside the columns. \| `var(--graupl-content-max-width)` \|\n// \| `--graupl-columns-min-width` \| The minimum width of each column. \| `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` \|\n// \| `--graupl-columns-max-width` \| The maximum width of each column. \| `1fr` \|\n// \| `--graupl-columns-grid-template-columns` \| The grid template columns for the columns. \| `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` \|\n// \| `--graupl-columns-span` \| The span of each column. \| `1` \|\n// \| `--graupl-columns-background` \| The background of the columns component. \| `var(--graupl-background)` \|\n// \| `--graupl-columns-color` \| The text color of the columns component. \| `var(--graupl-color)` \|\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// \| Variable \| Description \| Default Value \|\n// \| -------------------------------- \| ------------------------------------------------------------------ \| ---------------- \|\n// \| `$selector-base` \| The base selector for the component. \| `\".\"` \|\n// \| `$modifier-selector-base` \| The base selector for component modifiers. \| `\".\"` \|\n// \| `$generate-base-theme-map` \| Flag to generate the base theme map. \| `true` \|\n// \| `$themeable` \| Flag to generate theme modifiers. \| `false` \|\n// \| `$force-single-columns` \| Flag to enable forced single column layout on small screens. \| `true` \|\n// \| `$columns-selector-base` \| The base selector for the columns component. \| `\".\"` \|\n// \| `$columns-selector` \| The selector for the columns component. \| `\"columns\"` \|\n// \| `$columns-theme-selector-base` \| The selector base for columns theme modifiers. \| `\".\"` \|\n// \| `$columns-theme-selector-prefix` \| The columns theme modifier selector prefix. \| `\"\"` \|\n// \| `$columns-count-selector-base` \| The base selector for the count class. \| `\".\"` \|\n// \| `$columns-count-selector-prefix` \| The prefix for the count class. \| `\"count-\"` \|\n// \| `$columns-span-selector-base` \| The base selector for the span class. \| `\".\"` \|\n// \| `$columns-span-selector-prefix` \| The prefix for the span class. \| `\"span-\"` \|\n// \| `$columns-max-width` \| The maximum width of each column. \| `1fr` \|\n// \| `$columns-count` \| The default number of columns. \| `3` \|\n// \| `$columns-min-count` \| The minimum number of columns used to generate `.count-#` classes. \| `1` \|\n// \| `$columns-max-count` \| The maximum number of columns used to generate `.count-#` classes. \| `6` \|\n// \| `$columns-span` \| The default span of each column. \| `1` \|\n// \| `$columns-theme-mappings` \| Map of properties/shades for columns themes. \| `()` \|\n// \| `$columns-theme-map` \| Expanded map of properties/colors/shades. \| `()` \|\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as ;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as ;\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n }\n\n @for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n // .count-#{$i}\n #{defaults.$columns-count-selector-base}#{defaults.$columns-count-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-count: #{$i};\n\n // For span values bigger than the actual column count, set them to the\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // .span-#{$j}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @if defaults.$force-single-columns {\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n background: $columns-background;\n color: $columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$columns-theme-map,\n defaults.$columns-theme-selector-base,\n defaults.$columns-theme-selector-prefix,\n \"columns-\"\n );\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n","// @graupl/core flex columns layout styles.\n//\n// This module provides the layout styles for the flex columns component.\n//\n// The flex columns component is a flex container that provides a responsive grid layout for content.\n// The flex columns will adjust their sizes accordingly based on the classes applied to them.\n//\n// These are effectively bootstrap columns, but leaning more on the way flex natively works in the browser.\n// This means that columns will size themselves taking the gap between them into account.\n//\n// The following classes are generated by default:\n// - `.flex-columns`: The main flex columns component.\n// - `.col-1`: Sets the size of a column in the flex columns component to 1.\n// - `.col-2`: Sets the size of a column in the flex columns component to 2.\n// - `.col-3`: Sets the size of a column in the flex columns component to 3.\n// - `.col-4`: Sets the size of a column in the flex columns component to 4.\n// - `.col-5`: Sets the size of a column in the flex columns component to 5.\n// - `.col-6`: Sets the size of a column in the flex columns component to 6.\n// - `.col-7`: Sets the size of a column in the flex columns component to 7.\n// - `.col-8`: Sets the size of a column in the flex columns component to 8.\n// - `.col-9`: Sets the size of a column in the flex columns component to 9.\n// - `.col-10`: Sets the size of a column in the flex columns component to 10.\n// - `.col-11`: Sets the size of a column in the flex columns component to 11.\n// - `.col-12`: Sets the size of a column in the flex columns component to 12.\n// - `.fill`: A class to set a column to fill the remaining space.\n// - `.[screen-name]:col-#`: A class to set the size of a column at a specific screen size.\n// - `.[container-name]:col-#`: A class to set the size of a column at a specific container size.\n//\n// The following custom properties can be used to customize the flex columns component:\n// \| Property \| Description \| Default Value \|\n// \| -------------------------------------- \| --------------------------------------------------------- \| -------------------------- \|\n// \| `--graupl-flex-columns-row-gap` \| The gap between the rows of the flex columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-flex-columns-column-gap` \| The gap between the columns of the flex columns. \| `var(--graupl-spacer-5)` \|\n// \| `--graupl-flex-columns-size` \| The size of a column. \| `auto` \|\n// \| `--graupl-flex-columns-max-width` \| The maximum width of a column. \| `unset` \|\n// \| `--graupl-flex-columns-container-type` \| The container type applied to the flex columns component. \| `inline-size` \|\n// \| `--graupl-flex-columns-background` \| The background of the flex columns component. \| `var(--graupl-background)` \|\n// \| `--graupl-flex-columns-color` \| The text color of the flex columns component. \| `var(--graupl-color)` \|\n//\n// The following sass variables can be used to customize the generation of the flex columns component:\n// \| Variable \| Description \| Default Value \|\n// \| ----------------------------------------------- \| ---------------------------------------------------------------- \| ---------------- \|\n// \| `$selector-base` \| The base selector for the component. \| `\".\"` \|\n// \| `$modifier-selector-base` \| The base selector for component modifiers. \| `\".\"` \|\n// \| `$generate-base-theme-map` \| Flag to generate the base theme map. \| `true` \|\n// \| `$themeable` \| Flag to generate theme modifiers. \| `false` \|\n// \| `$flex-columns-selector-base` \| The base selector for the flex columns component. \| `\".\"` \|\n// \| `$flex-columns-selector` \| The selector for the flex columns component. \| `\"flex-columns\"` \|\n// \| `$flex-columns-theme-selector-base` \| The selector base for flex columns theme modifiers. \| `\".\"` \|\n// \| `$flex-columns-theme-selector-prefix` \| The flex columns theme modifier selector prefix. \| `\"\"` \|\n// \| `$flex-columns-column-selector-base` \| The base selector for the column class. \| `\".\"` \|\n// \| `$flex-columns-column-selector` \| The selector for the column class. \| `\"col-\"` \|\n// \| `$flex-columns-fill-selector-base` \| The base selector for the fill class. \| `\".\"` \|\n// \| `$flex-columns-fill-selector` \| The selector for the fill class. \| `\"fill\"` \|\n// \| `$flex-columns-screen-aware-separator` \| The separator for the screen-aware column class. \| `\"\\\\:\"` \|\n// \| `$flex-columns-container-aware-separator` \| The separator for the container-aware column class. \| `\"\\\\:\"` \|\n// \| `$flex-columns-screen-aware-selector-prefix` \| The prefix for the screen-aware column class. \| `\"\"` \|\n// \| `$flex-columns-container-aware-selector-prefix` \| The prefix for the container-aware column class. \| `\"cq\\\\:\"` \|\n// \| `$flex-columns-min-count` \| The minimum number of columns used to generate `.col-#` classes. \| `1` \|\n// \| `$flex-columns-max-count` \| The maximum number of columns used to generate `.col-#` classes. \| `12` \|\n// \| `$flex-columns-size` \| The default size of a column. \| `auto` \|\n// \| `$flex-columns-max-width` \| The default maximum width of a column. \| `unset` \|\n// \| `$flex-columns-container-type` \| The container type applied to the flex columns component. \| `\"inline-size\"` \|\n// \| `$flex-columns-theme-mappings` \| Map of properties/shades for flex columns themes. \| `()` \|\n// \| `$flex-columns-theme-map` \| Expanded map of properties/colors/shades. \| `()` \|\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-6\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3\">Column 1</div>\n// <div class=\"col-3 fill\">Column 2</div>\n// <div class=\"col-3\">Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"flex-columns\">\n// <div class=\"col-3 md:col-2\">Column 1</div>\n// <div class=\"col-6 md:col-8\">Column 2</div>\n// <div class=\"col-3 md:col-2\">Column 3</div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as ;\n@use \"../../mixins/screen\";\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n@use \"../../mixins/utility\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as ;\n\n@include layer(layout) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n display: flex;\n flex-wrap: wrap;\n gap: $flex-columns-row-gap $flex-columns-column-gap;\n container-type: $flex-columns-container-type;\n\n > * {\n flex: 1 1 $flex-columns-size;\n max-width: $flex-columns-max-width;\n }\n\n // `.fill`\n #{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n // e.g. `.col-1` or `.col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {\n /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} #{$i}) -\n #{$flex-columns-column-gap}\n );\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n );\n /* stylelint-enable scss/operator-no-newline-after /\n container-type: $flex-columns-container-type;\n }\n\n @include container.trigger(force-single-column) {\n // e.g. `.col-1` or `.col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {\n --#{root-defaults.$prefix}flex-columns-size: 100%;\n --#{root-defaults.$prefix}flex-columns-max-width: auto;\n }\n }\n }\n\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @include utility.create-mapped(\n // e.g. `.md:col-1` or `.xl:col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-screen-aware-selector-prefix}#{$screen-name}#{defaults.$flex-columns-screen-aware-separator}#{defaults.$flex-columns-column-selector}#{$i},\n (\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} #{$i}) -\n #{$flex-columns-column-gap}\n ),\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n )\n ),\n $screen: $screen-name\n ) {\n // `&.fill`\n &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after /\n }\n }\n\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n @for $i\n from defaults.$flex-columns-min-count\n through defaults.$flex-columns-max-count\n {\n / stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. /\n @include utility.create-mapped(\n // e.g. `.cq:md:col-1` or `.cq:xl:col-12`\n #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-container-aware-selector-prefix}#{$container-name}#{defaults.$flex-columns-container-aware-separator}#{defaults.$flex-columns-column-selector}#{$i},\n (\n --#{root-defaults.$prefix}flex-columns-size: calc(\n (100% / #{defaults.$flex-columns-max-count} #{$i}) -\n #{$flex-columns-column-gap}\n ),\n --#{root-defaults.$prefix}flex-columns-max-width: calc(\n 100% / #{defaults.$flex-columns-max-count} * #{$i}\n )\n ),\n $container: $container-name\n ) {\n // `&.fill`\n &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {\n --#{root-defaults.$prefix}flex-columns-max-width: unset;\n }\n }\n /* stylelint-enable scss/operator-no-newline-after */\n }\n }\n}\n\n@include layer(theme) {\n // `.flex-columns`\n #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {\n background: $flex-columns-background;\n color: $flex-columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$flex-columns-theme-map,\n defaults.$flex-columns-theme-selector-base,\n defaults.$flex-columns-theme-selector-prefix,\n \"flex-columns-\"\n );\n }\n }\n}\n","// @graupl/core flex columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// \| Custom property \| Default \|\n// \| ------------------------------------ \| ---------------------- \|\n// \| --graupl-flex-columns-row-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-flex-columns-column-gap \| var(--graupl-spacer-5) \|\n// \| --graupl-flex-columns-size \| auto \|\n// \| --graupl-flex-columns-max-width \| unset \|\n// \| --graupl-flex-columns-container-type \| inline-size \|\n// \| --graupl-flex-columns-background \| null \|\n// \| --graupl-flex-columns-color \| null \|\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../columns/variables\" as columns-variables;\n\n// Flex columns properties.\n// --graupl-flex-columns-row-gap\n$flex-columns-row-gap: var(\n --#{root-defaults.$prefix}flex-columns-row-gap,\n #{columns-variables.$columns-row-gap}\n);\n\n// --graupl-flex-columns-column-gap\n$flex-columns-column-gap: var(\n --#{root-defaults.$prefix}flex-columns-column-gap,\n #{columns-variables.$columns-column-gap}\n);\n\n// --graupl-flex-columns-size\n$flex-columns-size: var(\n --#{root-defaults.$prefix}flex-columns-size,\n #{defaults.$flex-columns-size}\n);\n\n// --graupl-flex-columns-max-width\n$flex-columns-max-width: var(\n --#{root-defaults.$prefix}flex-columns-max-width,\n #{defaults.$flex-columns-max-width}\n);\n\n// --graupl-flex-columns-container-type\n$flex-columns-container-type: var(\n --#{root-defaults.$prefix}flex-columns-container-type,\n #{defaults.$flex-columns-container-type}\n);\n\n// --graupl-flex-columns-background\n$flex-columns-background: var(\n --#{root-defaults.$prefix}flex-columns-background\n);\n\n// --graupl-flex-columns-color\n$flex-columns-color: var(--#{root-defaults.$prefix}flex-columns-color);\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string\|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n}\n"],"names":[]}