@graupl/graupl 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/css/layout/flex-columns.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/layout/flex-columns/_index.scss","../../../node_modules/@graupl/core/src/scss/layout/flex-columns/_variables.scss","flex-columns.css","../../../node_modules/@graupl/core/src/scss/mixins/_container.scss","../../../node_modules/@graupl/core/src/scss/mixins/_screen.scss","../../../node_modules/@graupl/core/src/scss/mixins/_utility.scss"],"names":[],"mappings":"AASI,qBCyEF,cAIE,oEC5D0B,CDyD1B,YAAA,CACA,cAAA,CACA,+PE7EF,CFgFE,gBACE,6CAAA,CACA,oDE9EJ,CFkFE,oBACE,qCEhFJ,CFyFE,OAEE,wLAAA,CAIA,wCAAA,CAIA,oEEvFJ,CCJA,2BHgGI,OACE,+BAAA,CACA,oCEzFJ,CACF,CFuEE,OAEE,wLAAA,CAIA,yCAAA,CAIA,oEErEJ,CCtBA,2BHgGI,OACE,+BAAA,CACA,oCEvEJ,CACF,CFqDE,OAEE,wLAAA,CAIA,mCAAA,CAIA,oEEnDJ,CCxCA,2BHgGI,OACE,+BAAA,CACA,oCErDJ,CACF,CFmCE,OAEE,wLAAA,CAIA,yCAAA,CAIA,oEEjCJ,CC1DA,2BHgGI,OACE,+BAAA,CACA,oCEnCJ,CACF,CFiBE,OAEE,wLAAA,CAIA,yCAAA,CAIA,oEEfJ,CC5EA,2BHgGI,OACE,+BAAA,CACA,oCEjBJ,CACF,CFDE,OAEE,wLAAA,CAIA,mCAAA,CAIA,oEEGJ,CC9FA,2BHgGI,OACE,+BAAA,CACA,oCECJ,CACF,CFnBE,OAEE,wLAAA,CAIA,yCAAA,CAIA,oEEqBJ,CChHA,2BHgGI,OACE,+BAAA,CACA,oCEmBJ,CACF,CFrCE,OAEE,wLAAA,CAIA,yCAAA,CAIA,oEEuCJ,CClIA,2BHgGI,OACE,+BAAA,CACA,oCEqCJ,CACF,CFvDE,OAEE,wLAAA,CAIA,mCAAA,CAIA,oEEyDJ,CCpJA,2BHgGI,OACE,+BAAA,CACA,oCEuDJ,CACF,CFzEE,QAEE,yLAAA,CAIA,yCAAA,CAIA,oEE2EJ,CCtKA,2BHgGI,QACE,+BAAA,CACA,oCEyEJ,CACF,CF3FE,QAEE,yLAAA,CAIA,yCAAA,CAIA,oEE6FJ,CCxLA,2BHgGI,QACE,+BAAA,CACA,oCE2FJ,CACF,CF7GE,QAEE,yLAAA,CAIA,oCAAA,CAIA,oEE+GJ,CC1MA,2BHgGI,QACE,+BAAA,CACA,oCE6GJ,CACF,CEzNA,+BC4IE,WAjIE,sLAAA,CAAA,wCHoNF,CF1FI,gBACE,qCE4FN,CGtFA,WAjIE,sLAAA,CAAA,yCH+NF,CFrGI,gBACE,qCEuGN,CGjGA,WAjIE,sLAAA,CAAA,mCH0OF,CFhHI,gBACE,qCEkHN,CG5GA,WAjIE,sLAAA,CAAA,yCHqPF,CF3HI,gBACE,qCE6HN,CGvHA,WAjIE,sLAAA,CAAA,yCHgQF,CFtII,gBACE,qCEwIN,CGlIA,WAjIE,sLAAA,CAAA,mCH2QF,CFjJI,gBACE,qCEmJN,CG7IA,WAjIE,sLAAA,CAAA,yCHsRF,CF5JI,gBACE,qCE8JN,CGxJA,WAjIE,sLAAA,CAAA,yCHiSF,CFvKI,gBACE,qCEyKN,CGnKA,WAjIE,sLAAA,CAAA,mCH4SF,CFlLI,gBACE,qCEoLN,CG9KA,YAjIE,uLAAA,CAAA,yCHuTF,CF7LI,iBACE,qCE+LN,CGzLA,YAjIE,uLAAA,CAAA,yCHkUF,CFxMI,iBACE,qCE0MN,CGpMA,YAjIE,uLAAA,CAAA,oCH6UF,CFnNI,iBACE,qCEqNN,CAxHF,CEnOA,kCC4IE,WAjIE,sLAAA,CAAA,wCHwVF,CF9NI,gBACE,qCEgON,CG1NA,WAjIE,sLAAA,CAAA,yCHmWF,CFzOI,gBACE,qCE2ON,CGrOA,WAjIE,sLAAA,CAAA,mCH8WF,CFpPI,gBACE,qCEsPN,CGhPA,WAjIE,sLAAA,CAAA,yCHyXF,CF/PI,gBACE,qCEiQN,CG3PA,WAjIE,sLAAA,CAAA,yCHoYF,CF1QI,gBACE,qCE4QN,CGtQA,WAjIE,sLAAA,CAAA,mCH+YF,CFrRI,gBACE,qCEuRN,CGjRA,WAjIE,sLAAA,CAAA,yCH0ZF,CFhSI,gBACE,qCEkSN,CG5RA,WAjIE,sLAAA,CAAA,yCHqaF,CF3SI,gBACE,qCE6SN,CGvSA,WAjIE,sLAAA,CAAA,mCHgbF,CFtTI,gBACE,qCEwTN,CGlTA,YAjIE,uLAAA,CAAA,yCH2bF,CFjUI,iBACE,qCEmUN,CG7TA,YAjIE,uLAAA,CAAA,yCHscF,CF5UI,iBACE,qCE8UN,CGxUA,YAjIE,uLAAA,CAAA,oCHidF,CFvVI,iBACE,qCEyVN,CAxHF,CEvWA,kCC4IE,WAjIE,sLAAA,CAAA,wCH4dF,CFlWI,gBACE,qCEoWN,CG9VA,WAjIE,sLAAA,CAAA,yCHueF,CF7WI,gBACE,qCE+WN,CGzWA,WAjIE,sLAAA,CAAA,mCHkfF,CFxXI,gBACE,qCE0XN,CGpXA,WAjIE,sLAAA,CAAA,yCH6fF,CFnYI,gBACE,qCEqYN,CG/XA,WAjIE,sLAAA,CAAA,yCHwgBF,CF9YI,gBACE,qCEgZN,CG1YA,WAjIE,sLAAA,CAAA,mCHmhBF,CFzZI,gBACE,qCE2ZN,CGrZA,WAjIE,sLAAA,CAAA,yCH8hBF,CFpaI,gBACE,qCEsaN,CGhaA,WAjIE,sLAAA,CAAA,yCHyiBF,CF/aI,gBACE,qCEibN,CG3aA,WAjIE,sLAAA,CAAA,mCHojBF,CF1bI,gBACE,qCE4bN,CGtbA,YAjIE,uLAAA,CAAA,yCH+jBF,CFrcI,iBACE,qCEucN,CGjcA,YAjIE,uLAAA,CAAA,yCH0kBF,CFhdI,iBACE,qCEkdN,CG5cA,YAjIE,uLAAA,CAAA,oCHqlBF,CF3dI,iBACE,qCE6dN,CAxHF,CE3eA,mCC4IE,WAjIE,sLAAA,CAAA,wCHgmBF,CFteI,gBACE,qCEweN,CGleA,WAjIE,sLAAA,CAAA,yCH2mBF,CFjfI,gBACE,qCEmfN,CG7eA,WAjIE,sLAAA,CAAA,mCHsnBF,CF5fI,gBACE,qCE8fN,CGxfA,WAjIE,sLAAA,CAAA,yCHioBF,CFvgBI,gBACE,qCEygBN,CGngBA,WAjIE,sLAAA,CAAA,yCH4oBF,CFlhBI,gBACE,qCEohBN,CG9gBA,WAjIE,sLAAA,CAAA,mCHupBF,CF7hBI,gBACE,qCE+hBN,CGzhBA,WAjIE,sLAAA,CAAA,yCHkqBF,CFxiBI,gBACE,qCE0iBN,CGpiBA,WAjIE,sLAAA,CAAA,yCH6qBF,CFnjBI,gBACE,qCEqjBN,CG/iBA,WAjIE,sLAAA,CAAA,mCHwrBF,CF9jBI,gBACE,qCEgkBN,CG1jBA,YAjIE,uLAAA,CAAA,yCHmsBF,CFzkBI,iBACE,qCE2kBN,CGrkBA,YAjIE,uLAAA,CAAA,yCH8sBF,CFplBI,iBACE,qCEslBN,CGhlBA,YAjIE,uLAAA,CAAA,oCHytBF,CF/lBI,iBACE,qCEimBN,CAxHF,CE/mBA,mCC4IE,WAjIE,sLAAA,CAAA,wCHouBF,CF1mBI,gBACE,qCE4mBN,CGtmBA,WAjIE,sLAAA,CAAA,yCH+uBF,CFrnBI,gBACE,qCEunBN,CGjnBA,WAjIE,sLAAA,CAAA,mCH0vBF,CFhoBI,gBACE,qCEkoBN,CG5nBA,WAjIE,sLAAA,CAAA,yCHqwBF,CF3oBI,gBACE,qCE6oBN,CGvoBA,WAjIE,sLAAA,CAAA,yCHgxBF,CFtpBI,gBACE,qCEwpBN,CGlpBA,WAjIE,sLAAA,CAAA,mCH2xBF,CFjqBI,gBACE,qCEmqBN,CG7pBA,WAjIE,sLAAA,CAAA,yCHsyBF,CF5qBI,gBACE,qCE8qBN,CGxqBA,WAjIE,sLAAA,CAAA,yCHizBF,CFvrBI,gBACE,qCEyrBN,CGnrBA,WAjIE,sLAAA,CAAA,mCH4zBF,CFlsBI,gBACE,qCEosBN,CG9rBA,YAjIE,uLAAA,CAAA,yCHu0BF,CF7sBI,iBACE,qCE+sBN,CGzsBA,YAjIE,uLAAA,CAAA,yCHk1BF,CFxtBI,iBACE,qCE0tBN,CGptBA,YAjIE,uLAAA,CAAA,oCH61BF,CFnuBI,iBACE,qCEquBN,CAxHF,CCnvBA,wBE4IE,eAjIE,sLAAA,CAAA,wCHw2BF,CFjtBI,oBACE,qCEmtBN,CG1uBA,eAjIE,sLAAA,CAAA,yCHm3BF,CF5tBI,oBACE,qCE8tBN,CGrvBA,eAjIE,sLAAA,CAAA,mCH83BF,CFvuBI,oBACE,qCEyuBN,CGhwBA,eAjIE,sLAAA,CAAA,yCHy4BF,CFlvBI,oBACE,qCEovBN,CG3wBA,eAjIE,sLAAA,CAAA,yCHo5BF,CF7vBI,oBACE,qCE+vBN,CGtxBA,eAjIE,sLAAA,CAAA,mCH+5BF,CFxwBI,oBACE,qCE0wBN,CGjyBA,eAjIE,sLAAA,CAAA,yCH06BF,CFnxBI,oBACE,qCEqxBN,CG5yBA,eAjIE,sLAAA,CAAA,yCHq7BF,CF9xBI,oBACE,qCEgyBN,CGvzBA,eAjIE,sLAAA,CAAA,mCHg8BF,CFzyBI,oBACE,qCE2yBN,CGl0BA,gBAjIE,uLAAA,CAAA,yCH28BF,CFpzBI,qBACE,qCEszBN,CG70BA,gBAjIE,uLAAA,CAAA,yCHs9BF,CF/zBI,qBACE,qCEi0BN,CGx1BA,gBAjIE,uLAAA,CAAA,oCHi+BF,CF10BI,qBACE,qCE40BN,CAxHF,CCv3BA,2BE4IE,eAjIE,sLAAA,CAAA,wCH4+BF,CFr1BI,oBACE,qCEu1BN,CG92BA,eAjIE,sLAAA,CAAA,yCHu/BF,CFh2BI,oBACE,qCEk2BN,CGz3BA,eAjIE,sLAAA,CAAA,mCHkgCF,CF32BI,oBACE,qCE62BN,CGp4BA,eAjIE,sLAAA,CAAA,yCH6gCF,CFt3BI,oBACE,qCEw3BN,CG/4BA,eAjIE,sLAAA,CAAA,yCHwhCF,CFj4BI,oBACE,qCEm4BN,CG15BA,eAjIE,sLAAA,CAAA,mCHmiCF,CF54BI,oBACE,qCE84BN,CGr6BA,eAjIE,sLAAA,CAAA,yCH8iCF,CFv5BI,oBACE,qCEy5BN,CGh7BA,eAjIE,sLAAA,CAAA,yCHyjCF,CFl6BI,oBACE,qCEo6BN,CG37BA,eAjIE,sLAAA,CAAA,mCHokCF,CF76BI,oBACE,qCE+6BN,CGt8BA,gBAjIE,uLAAA,CAAA,yCH+kCF,CFx7BI,qBACE,qCE07BN,CGj9BA,gBAjIE,uLAAA,CAAA,yCH0lCF,CFn8BI,qBACE,qCEq8BN,CG59BA,gBAjIE,uLAAA,CAAA,oCHqmCF,CF98BI,qBACE,qCEg9BN,CAxHF,CC3/BA,2BE4IE,eAjIE,sLAAA,CAAA,wCHgnCF,CFz9BI,oBACE,qCE29BN,CGl/BA,eAjIE,sLAAA,CAAA,yCH2nCF,CFp+BI,oBACE,qCEs+BN,CG7/BA,eAjIE,sLAAA,CAAA,mCHsoCF,CF/+BI,oBACE,qCEi/BN,CGxgCA,eAjIE,sLAAA,CAAA,yCHipCF,CF1/BI,oBACE,qCE4/BN,CGnhCA,eAjIE,sLAAA,CAAA,yCH4pCF,CFrgCI,oBACE,qCEugCN,CG9hCA,eAjIE,sLAAA,CAAA,mCHuqCF,CFhhCI,oBACE,qCEkhCN,CGziCA,eAjIE,sLAAA,CAAA,yCHkrCF,CF3hCI,oBACE,qCE6hCN,CGpjCA,eAjIE,sLAAA,CAAA,yCH6rCF,CFtiCI,oBACE,qCEwiCN,CG/jCA,eAjIE,sLAAA,CAAA,mCHwsCF,CFjjCI,oBACE,qCEmjCN,CG1kCA,gBAjIE,uLAAA,CAAA,yCHmtCF,CF5jCI,qBACE,qCE8jCN,CGrlCA,gBAjIE,uLAAA,CAAA,yCH8tCF,CFvkCI,qBACE,qCEykCN,CGhmCA,gBAjIE,uLAAA,CAAA,oCHyuCF,CFllCI,qBACE,qCEolCN,CAxHF,CC/nCA,4BE4IE,eAjIE,sLAAA,CAAA,wCHovCF,CF7lCI,oBACE,qCE+lCN,CGtnCA,eAjIE,sLAAA,CAAA,yCH+vCF,CFxmCI,oBACE,qCE0mCN,CGjoCA,eAjIE,sLAAA,CAAA,mCH0wCF,CFnnCI,oBACE,qCEqnCN,CG5oCA,eAjIE,sLAAA,CAAA,yCHqxCF,CF9nCI,oBACE,qCEgoCN,CGvpCA,eAjIE,sLAAA,CAAA,yCHgyCF,CFzoCI,oBACE,qCE2oCN,CGlqCA,eAjIE,sLAAA,CAAA,mCH2yCF,CFppCI,oBACE,qCEspCN,CG7qCA,eAjIE,sLAAA,CAAA,yCHszCF,CF/pCI,oBACE,qCEiqCN,CGxrCA,eAjIE,sLAAA,CAAA,yCHi0CF,CF1qCI,oBACE,qCE4qCN,CGnsCA,eAjIE,sLAAA,CAAA,mCH40CF,CFrrCI,oBACE,qCEurCN,CG9sCA,gBAjIE,uLAAA,CAAA,yCHu1CF,CFhsCI,qBACE,qCEksCN,CGztCA,gBAjIE,uLAAA,CAAA,yCHk2CF,CF3sCI,qBACE,qCE6sCN,CGpuCA,gBAjIE,uLAAA,CAAA,oCH62CF,CFttCI,qBACE,qCEwtCN,CAxHF,CCnwCA,4BE4IE,eAjIE,sLAAA,CAAA,wCHw3CF,CFjuCI,oBACE,qCEmuCN,CG1vCA,eAjIE,sLAAA,CAAA,yCHm4CF,CF5uCI,oBACE,qCE8uCN,CGrwCA,eAjIE,sLAAA,CAAA,mCH84CF,CFvvCI,oBACE,qCEyvCN,CGhxCA,eAjIE,sLAAA,CAAA,yCHy5CF,CFlwCI,oBACE,qCEowCN,CG3xCA,eAjIE,sLAAA,CAAA,yCHo6CF,CF7wCI,oBACE,qCE+wCN,CGtyCA,eAjIE,sLAAA,CAAA,mCH+6CF,CFxxCI,oBACE,qCE0xCN,CGjzCA,eAjIE,sLAAA,CAAA,yCH07CF,CFnyCI,oBACE,qCEqyCN,CG5zCA,eAjIE,sLAAA,CAAA,yCHq8CF,CF9yCI,oBACE,qCEgzCN,CGv0CA,eAjIE,sLAAA,CAAA,mCHg9CF,CFzzCI,oBACE,qCE2zCN,CGl1CA,gBAjIE,uLAAA,CAAA,yCH29CF,CFp0CI,qBACE,qCEs0CN,CG71CA,gBAjIE,uLAAA,CAAA,yCHs+CF,CF/0CI,qBACE,qCEi1CN,CGx2CA,gBAjIE,uLAAA,CAAA,oCHi/CF,CF11CI,qBACE,qCE41CN,CAxHF,CA2HF","file":"flex-columns.css"}
+{"version":3,"sourceRoot":null,"mappings":"AESI,qBCiFF,4WAME,mHAMA,0DAUA,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,2SEzFF,0BFwGI,6EAfF,8SEzFF,0BFwGI,8EAfF,8SEzFF,0BFwGI,8EAfF,8SEzFF,0BFwGI,8EGjHJ,6BC4IE,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,2OJCI,uDIDJ,2OJCI,uDIDJ,2OJCI,wDG7IN,iCC4IE,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,2OJCI,uDIDJ,2OJCI,uDIDJ,2OJCI,wDG7IN,iCC4IE,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,2OJCI,uDIDJ,2OJCI,uDIDJ,2OJCI,wDG7IN,kCC4IE,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,2OJCI,uDIDJ,2OJCI,uDIDJ,2OJCI,wDG7IN,kCC4IE,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,2OJCI,uDIDJ,2OJCI,uDIDJ,2OJCI,wDG7IN,kCC4IE,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,wOJCI,sDIDJ,2OJCI,uDIDJ,2OJCI,uDIDJ,2OJCI,wDG7IN,kCC4IE,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,4OJCI,wDIDJ,4OJCI,wDIDJ,4OJCI,yDG7IN,kCC4IE,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,yOJCI,uDIDJ,4OJCI,wDIDJ,4OJCI,wDIDJ,4OJCI,yDE7IN,sBE4IE,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,4DE1KN,0BE4IE,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,4DE1KN,0BE4IE,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,4DE1KN,2BE4IE,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,4DE1KN,2BE4IE,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,4DE1KN,2BE4IE,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,4OJ8BI,0DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,2DI9BJ,+OJ8BI,4DE1KN,2BE4IE,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,gPJ8BI,4DI9BJ,gPJ8BI,4DI9BJ,gPJ8BI,6DE1KN,2BE4IE,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,6OJ8BI,2DI9BJ,gPJ8BI,4DI9BJ,gPJ8BI,4DI9BJ,gPJ8BI","sources":["dist/css/layout/flex-columns.css","var/www/html/node_modules/@graupl/core/src/scss/layout/columns/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/layout/flex-columns/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/layout/flex-columns/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_container.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_screen.scss","var/www/html/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@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}","// @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@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\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","// @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 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//\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// | `$flex-columns-selector-base`                   | The base selector for the flex columns component.                | `$selector-base` |\n// | `$flex-columns-selector`                        | The selector for the flex columns component.                     | `\"flex-columns\"` |\n// | `$flex-columns-column-selector-base`            | The base selector for the column class.                          | `$selector-base` |\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.                            | `$selector-base` |\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//\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/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","// @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@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\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","// @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  @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 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  @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  @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","// @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  @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 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  @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  @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","// @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":[]}