@graupl/core 1.0.0-beta.52 → 1.0.0-beta.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/css/graupl.css +1 -1
  2. package/dist/css/graupl.css.map +1 -1
  3. package/dist/css/layout/columns.css.map +1 -1
  4. package/dist/css/layout.css +1 -1
  5. package/dist/css/layout.css.map +1 -1
  6. package/dist/css/utilities/block-size.css +1 -1
  7. package/dist/css/utilities/block-size.css.map +1 -1
  8. package/dist/css/utilities/inline-size.css +1 -1
  9. package/dist/css/utilities/inline-size.css.map +1 -1
  10. package/dist/css/utilities.css +1 -1
  11. package/dist/css/utilities.css.map +1 -1
  12. package/package.json +1 -1
  13. package/src/scss/layout/columns/_index.scss +1 -1
  14. package/src/scss/utilities/block-size/_defaults.scss +3 -3
  15. package/src/scss/utilities/block-size/_index.scss +84 -84
  16. package/src/scss/utilities/inline-size/_defaults.scss +3 -3
  17. package/src/scss/utilities/inline-size/_index.scss +84 -84
package/dist/css/layout/columns.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AGSI,qBD6QF,ymBAKE,yDAQA,gDEjHE,mUCpKJ,6BDoKI,wUCpKJ,iCDoKI,wUCpKJ,iCDoKI,wUCpKJ,kCDoKI,wUCpKJ,kCDoKI,wUCpKJ,kCDoKI,wUCpKJ,kCDoKI,yUCpKJ,kCDoKI,yUAAA,0CFqNE,8SErNF,0CFqNE,qRErNF,0CFqNE,4PErNF,0CFqNE,mOErNF,0CFqNE,0MErNF,0CFqNE,iLErNF,0CFqNE,wJErNF,0CFqNE,+HErNF,0CFqNE,sGErNF,4CFqNE,+EErNF,4CFqNE,oDErNF,4CFqNE,+EGzXN,6BDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,iCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,iCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,+CFqNE,qWErNF,+CFqNE,uUErNF,+CFqNE,ySErNF,+CFqNE,2QErNF,+CFqNE,6OErNF,+CFqNE,+MErNF,+CFqNE,iLErNF,+CFqNE,mJErNF,+CFqNE,qHErNF,iDFqNE,yFErNF,iDFqNE,yDErNF,iDFqNE,0FGzXN,kCDoKI,+CFqNE,qWErNF,+CFqNE,uUErNF,+CFqNE,ySErNF,+CFqNE,2QErNF,+CFqNE,6OErNF,+CFqNE,+MErNF,+CFqNE,iLErNF,+CFqNE,mJErNF,+CFqNE,qHErNF,iDFqNE,yFErNF,iDFqNE,yDErNF,iDFqNE,0FErNF,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,2CAAA,2CAAA,2CCpKJ,6BDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,iCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,iCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,gDAAA,gDAAA,iDCpKJ,kCDoKI,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,gDAAA,gDAAA,iDE3JJ,0BJsaI,wCAGE,oPCvbJ,oBD4cF","sources":["dist/css/layout/columns.css","var/www/html/packages/core/src/scss/layout/columns/_variables.scss","var/www/html/packages/core/src/scss/layout/columns/_index.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss","var/www/html/packages/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .columns.fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n @media screen and (0 <= width) {\n .columns.xs\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n .columns.count-1 {\n --graupl-columns-count: 1;\n }\n .columns.count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n .columns.count-2 {\n --graupl-columns-count: 2;\n }\n .columns.count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n .columns.count-3 {\n --graupl-columns-count: 3;\n }\n .columns.count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n .columns.count-4 {\n --graupl-columns-count: 4;\n }\n .columns.count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n .columns.count-5 {\n --graupl-columns-count: 5;\n }\n .columns.count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n .columns.count-6 {\n --graupl-columns-count: 6;\n }\n .columns.count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n .columns.count-7 {\n --graupl-columns-count: 7;\n }\n .columns.count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n .columns.count-8 {\n --graupl-columns-count: 8;\n }\n .columns.count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n .columns.count-9 {\n --graupl-columns-count: 9;\n }\n .columns.count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n .columns.count-10 {\n --graupl-columns-count: 10;\n }\n .columns.count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n .columns.count-11 {\n --graupl-columns-count: 11;\n }\n .columns.count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n .columns.count-12 {\n --graupl-columns-count: 12;\n }\n .columns.count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.xs\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.xs\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.xs\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.xs\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.xs\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.xs\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.xs\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.xs\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.xs\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.xs\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.xs\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.xs\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.xs\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.xs\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.xs\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.xs\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.xs\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.xs\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.xs\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.sm\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.sm\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.sm\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.sm\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.sm\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.sm\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.sm\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.sm\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.sm\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.sm\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.sm\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.sm\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.sm\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.sm\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.sm\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.sm\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.sm\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.sm\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.sm\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.md\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.md\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.md\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.md\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.md\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.md\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.md\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.md\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.md\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.md\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.md\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.md\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.md\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.md\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.md\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.md\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.md\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.md\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.md\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.lg\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.lg\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.lg\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.lg\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.lg\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.lg\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.lg\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.lg\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.lg\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.lg\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.lg\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.lg\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.lg\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.lg\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.lg\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.lg\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.lg\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.lg\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.lg\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.xl\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.xl\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.xl\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.xl\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.xl\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.xl\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.xl\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.xl\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.xl\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.xl\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.xl\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.xl\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.xl\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.xl\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.xl\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.xl\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.xl\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.xl\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.xl\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.hd\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.hd\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.hd\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.hd\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.hd\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.hd\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.hd\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.hd\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.hd\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.hd\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.hd\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.hd\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.hd\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.hd\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.hd\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.hd\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.hd\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.hd\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.hd\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.qhd\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.qhd\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.qhd\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.qhd\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.qhd\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.qhd\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.qhd\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.qhd\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.qhd\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.qhd\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.qhd\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.qhd\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.qhd\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.qhd\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.qhd\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.qhd\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.qhd\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.qhd\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.qhd\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.uhd\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.uhd\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.uhd\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.uhd\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.uhd\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.uhd\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.uhd\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.uhd\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.uhd\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.uhd\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.uhd\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.uhd\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.uhd\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.uhd\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.uhd\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.uhd\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.uhd\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.uhd\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.uhd\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 2;\n }\n .columns .span-3 {\n --graupl-columns-span: 3;\n }\n .columns .span-4 {\n --graupl-columns-span: 4;\n }\n .columns .span-5 {\n --graupl-columns-span: 5;\n }\n .columns .span-6 {\n --graupl-columns-span: 6;\n }\n .columns .span-7 {\n --graupl-columns-span: 7;\n }\n .columns .span-8 {\n --graupl-columns-span: 8;\n }\n .columns .span-9 {\n --graupl-columns-span: 9;\n }\n .columns .span-10 {\n --graupl-columns-span: 10;\n }\n .columns .span-11 {\n --graupl-columns-span: 11;\n }\n .columns .span-12 {\n --graupl-columns-span: 12;\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n .columns .span-7 {\n --graupl-columns-span: 1;\n }\n .columns .span-8 {\n --graupl-columns-span: 1;\n }\n .columns .span-9 {\n --graupl-columns-span: 1;\n }\n .columns .span-10 {\n --graupl-columns-span: 1;\n }\n .columns .span-11 {\n --graupl-columns-span: 1;\n }\n .columns .span-12 {\n --graupl-columns-span: 1;\n }\n }\n}\n@layer graupl.theme {\n .columns {\n background: var(--graupl-columns-background);\n color: var(--graupl-columns-color);\n }\n}","// @graupl/core columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// | Custom property | Default |\n// | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-count | 3 |\n// | --graupl-columns-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-columns-min-width | calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) |\n// | --graupl-columns-max-width | 1fr |\n// | --graupl-columns-grid-template-columns | repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) |\n// | --graupl-columns-span | 1 |\n// | --graupl-columns-background | null |\n// | --graupl-columns-color | null |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} *\n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(--#{root-defaults.$prefix}columns-background);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color);\n","// @graupl/core columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.count-7`: Sets the number of columns in the columns component to 7.\n// - `.count-8`: Sets the number of columns in the columns component to 8.\n// - `.count-9`: Sets the number of columns in the columns component to 9.\n// - `.count-10`: Sets the number of columns in the columns component to 10.\n// - `.count-11`: Sets the number of columns in the columns component to 11.\n// - `.count-12`: Sets the number of columns in the columns component to 12.\n// - `.fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns.\n// - `.xs:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on extra small screens.\n// - `.sm:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on small screens.\n// - `.md:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on medium screens.\n// - `.lg:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on large screens.\n// - `.xl:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on extra large screens.\n// - `.xs:count-1`: Sets the number of columns in the columns component to 1 on extra small screens.\n// - `.xs:count-2`: Sets the number of columns in the columns component to 2 on extra small screens.\n// - `.xs:count-3`: Sets the number of columns in the columns component to 3 on extra small screens.\n// - `.xs:count-4`: Sets the number of columns in the columns component to 4 on extra small screens.\n// - `.xs:count-5`: Sets the number of columns in the columns component to 5 on extra small screens.\n// - `.xs:count-6`: Sets the number of columns in the columns component to 6 on extra small screens.\n// - `.xs:count-7`: Sets the number of columns in the columns component to 7 on extra small screens.\n// - `.xs:count-8`: Sets the number of columns in the columns component to 8 on extra small screens.\n// - `.xs:count-9`: Sets the number of columns in the columns component to 9 on extra small screens.\n// - `.xs:count-10`: Sets the number of columns in the columns component to 10 on extra small screens.\n// - `.xs:count-11`: Sets the number of columns in the columns component to 11 on extra small screens.\n// - `.xs:count-12`: Sets the number of columns in the columns component to 12 on extra small screens.\n// - `.sm:count-1`: Sets the number of columns in the columns component to 1 on small screens.\n// - `.sm:count-2`: Sets the number of columns in the columns component to 2 on small screens.\n// - `.sm:count-3`: Sets the number of columns in the columns component to 3 on small screens.\n// - `.sm:count-4`: Sets the number of columns in the columns component to 4 on small screens.\n// - `.sm:count-5`: Sets the number of columns in the columns component to 5 on small screens.\n// - `.sm:count-6`: Sets the number of columns in the columns component to 6 on small screens.\n// - `.sm:count-7`: Sets the number of columns in the columns component to 7 on small screens.\n// - `.sm:count-8`: Sets the number of columns in the columns component to 8 on small screens.\n// - `.sm:count-9`: Sets the number of columns in the columns component to 9 on small screens.\n// - `.sm:count-10`: Sets the number of columns in the columns component to 10 on small screens.\n// - `.sm:count-11`: Sets the number of columns in the columns component to 11 on small screens.\n// - `.sm:count-12`: Sets the number of columns in the columns component to 12 on small screens.\n// - `.md:count-1`: Sets the number of columns in the columns component to 1 on medium screens.\n// - `.md:count-2`: Sets the number of columns in the columns component to 2 on medium screens.\n// - `.md:count-3`: Sets the number of columns in the columns component to 3 on medium screens.\n// - `.md:count-4`: Sets the number of columns in the columns component to 4 on medium screens.\n// - `.md:count-5`: Sets the number of columns in the columns component to 5 on medium screens.\n// - `.md:count-6`: Sets the number of columns in the columns component to 6 on medium screens.\n// - `.md:count-7`: Sets the number of columns in the columns component to 7 on medium screens.\n// - `.md:count-8`: Sets the number of columns in the columns component to 8 on medium screens.\n// - `.md:count-9`: Sets the number of columns in the columns component to 9 on medium screens.\n// - `.md:count-10`: Sets the number of columns in the columns component to 10 on medium screens.\n// - `.md:count-11`: Sets the number of columns in the columns component to 11 on medium screens.\n// - `.md:count-12`: Sets the number of columns in the columns component to 12 on medium screens.\n// - `.lg:count-1`: Sets the number of columns in the columns component to 1 on large screens.\n// - `.lg:count-2`: Sets the number of columns in the columns component to 2 on large screens.\n// - `.lg:count-3`: Sets the number of columns in the columns component to 3 on large screens.\n// - `.lg:count-4`: Sets the number of columns in the columns component to 4 on large screens.\n// - `.lg:count-5`: Sets the number of columns in the columns component to 5 on large screens.\n// - `.lg:count-6`: Sets the number of columns in the columns component to 6 on large screens.\n// - `.lg:count-7`: Sets the number of columns in the columns component to 7 on large screens.\n// - `.lg:count-8`: Sets the number of columns in the columns component to 8 on large screens.\n// - `.lg:count-9`: Sets the number of columns in the columns component to 9 on large screens.\n// - `.lg:count-10`: Sets the number of columns in the columns component to 10 on large screens.\n// - `.lg:count-11`: Sets the number of columns in the columns component to 11 on large screens.\n// - `.lg:count-12`: Sets the number of columns in the columns component to 12 on large screens.\n// - `.xl:count-1`: Sets the number of columns in the columns component to 1 on extra large screens.\n// - `.xl:count-2`: Sets the number of columns in the columns component to 2 on extra large screens.\n// - `.xl:count-3`: Sets the number of columns in the columns component to 3 on extra large screens.\n// - `.xl:count-4`: Sets the number of columns in the columns component to 4 on extra large screens.\n// - `.xl:count-5`: Sets the number of columns in the columns component to 5 on extra large screens.\n// - `.xl:count-6`: Sets the number of columns in the columns component to 6 on extra large screens.\n// - `.xl:count-7`: Sets the number of columns in the columns component to 7 on extra large screens.\n// - `.xl:count-8`: Sets the number of columns in the columns component to 8 on extra large screens.\n// - `.xl:count-9`: Sets the number of columns in the columns component to 9 on extra large screens.\n// - `.xl:count-10`: Sets the number of columns in the columns component to 10 on extra large screens.\n// - `.xl:count-11`: Sets the number of columns in the columns component to 11 on extra large screens.\n// - `.xl:count-12`: Sets the number of columns in the columns component to 12 on extra large screens.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n// - `.span-7`: Sets the span of a column in the columns component to 7.\n// - `.span-8`: Sets the span of a column in the columns component to 8.\n// - `.span-9`: Sets the span of a column in the columns component to 9.\n// - `.span-10`: Sets the span of a column in the columns component to 10.\n// - `.span-11`: Sets the span of a column in the columns component to 11.\n// - `.span-12`: Sets the span of a column in the columns component to 12.\n// - `.xs:span-1`: Sets the span of a column in the columns component to 1 on extra small screens.\n// - `.xs:span-2`: Sets the span of a column in the columns component to 2 on extra small screens.\n// - `.xs:span-3`: Sets the span of a column in the columns component to 3 on extra small screens.\n// - `.xs:span-4`: Sets the span of a column in the columns component to 4 on extra small screens.\n// - `.xs:span-5`: Sets the span of a column in the columns component to 5 on extra small screens.\n// - `.xs:span-6`: Sets the span of a column in the columns component to 6 on extra small screens.\n// - `.xs:span-7`: Sets the span of a column in the columns component to 7 on extra small screens.\n// - `.xs:span-8`: Sets the span of a column in the columns component to 8 on extra small screens.\n// - `.xs:span-9`: Sets the span of a column in the columns component to 9 on extra small screens.\n// - `.xs:span-10`: Sets the span of a column in the columns component to 10 on extra small screens.\n// - `.xs:span-11`: Sets the span of a column in the columns component to 11 on extra small screens.\n// - `.xs:span-12`: Sets the span of a column in the columns component to 12 on extra small screens.\n// - `.sm:span-1`: Sets the span of a column in the columns component to 1 on small screens.\n// - `.sm:span-2`: Sets the span of a column in the columns component to 2 on small screens.\n// - `.sm:span-3`: Sets the span of a column in the columns component to 3 on small screens.\n// - `.sm:span-4`: Sets the span of a column in the columns component to 4 on small screens.\n// - `.sm:span-5`: Sets the span of a column in the columns component to 5 on small screens.\n// - `.sm:span-6`: Sets the span of a column in the columns component to 6 on small screens.\n// - `.sm:span-7`: Sets the span of a column in the columns component to 7 on small screens.\n// - `.sm:span-8`: Sets the span of a column in the columns component to 8 on small screens.\n// - `.sm:span-9`: Sets the span of a column in the columns component to 9 on small screens.\n// - `.sm:span-10`: Sets the span of a column in the columns component to 10 on small screens.\n// - `.sm:span-11`: Sets the span of a column in the columns component to 11 on small screens.\n// - `.sm:span-12`: Sets the span of a column in the columns component to 12 on small screens.\n// - `.md:span-1`: Sets the span of a column in the columns component to 1 on medium screens.\n// - `.md:span-2`: Sets the span of a column in the columns component to 2 on medium screens.\n// - `.md:span-3`: Sets the span of a column in the columns component to 3 on medium screens.\n// - `.md:span-4`: Sets the span of a column in the columns component to 4 on medium screens.\n// - `.md:span-5`: Sets the span of a column in the columns component to 5 on medium screens.\n// - `.md:span-6`: Sets the span of a column in the columns component to 6 on medium screens.\n// - `.md:span-7`: Sets the span of a column in the columns component to 7 on medium screens.\n// - `.md:span-8`: Sets the span of a column in the columns component to 8 on medium screens.\n// - `.md:span-9`: Sets the span of a column in the columns component to 9 on medium screens.\n// - `.md:span-10`: Sets the span of a column in the columns component to 10 on medium screens.\n// - `.md:span-11`: Sets the span of a column in the columns component to 11 on medium screens.\n// - `.md:span-12`: Sets the span of a column in the columns component to 12 on medium screens.\n// - `.lg:span-1`: Sets the span of a column in the columns component to 1 on large screens.\n// - `.lg:span-2`: Sets the span of a column in the columns component to 2 on large screens.\n// - `.lg:span-3`: Sets the span of a column in the columns component to 3 on large screens.\n// - `.lg:span-4`: Sets the span of a column in the columns component to 4 on large screens.\n// - `.lg:span-5`: Sets the span of a column in the columns component to 5 on large screens.\n// - `.lg:span-6`: Sets the span of a column in the columns component to 6 on large screens.\n// - `.lg:span-7`: Sets the span of a column in the columns component to 7 on large screens.\n// - `.lg:span-8`: Sets the span of a column in the columns component to 8 on large screens.\n// - `.lg:span-9`: Sets the span of a column in the columns component to 9 on large screens.\n// - `.lg:span-10`: Sets the span of a column in the columns component to 10 on large screens.\n// - `.lg:span-11`: Sets the span of a column in the columns component to 11 on large screens.\n// - `.lg:span-12`: Sets the span of a column in the columns component to 12 on large screens.\n// - `.xl:span-1`: Sets the span of a column in the columns component to 1 on extra large screens.\n// - `.xl:span-2`: Sets the span of a column in the columns component to 2 on extra large screens.\n// - `.xl:span-3`: Sets the span of a column in the columns component to 3 on extra large screens.\n// - `.xl:span-4`: Sets the span of a column in the columns component to 4 on extra large screens.\n// - `.xl:span-5`: Sets the span of a column in the columns component to 5 on extra large screens.\n// - `.xl:span-6`: Sets the span of a column in the columns component to 6 on extra large screens.\n// - `.xl:span-7`: Sets the span of a column in the columns component to 7 on extra large screens.\n// - `.xl:span-8`: Sets the span of a column in the columns component to 8 on extra large screens.\n// - `.xl:span-9`: Sets the span of a column in the columns component to 9 on extra large screens.\n// - `.xl:span-10`: Sets the span of a column in the columns component to 10 on extra large screens.\n// - `.xl:span-11`: Sets the span of a column in the columns component to 11 on extra large screens.\n// - `.xl:span-12`: Sets the span of a column in the columns component to 12 on extra large screens.\n//\n// The following custom properties can be used to customize the columns component:\n// | Property | Description | Default Value |\n// | ---------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n// | `--graupl-columns-row-gap` | The gap between the rows of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-column-gap` | The gap between the columns of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-count` | The maximum number of columns. | `3` |\n// | `--graupl-columns-content-max-width` | The maximum width of the content inside the columns. | `var(--graupl-content-max-width)` |\n// | `--graupl-columns-min-width` | The minimum width of each column. | `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` |\n// | `--graupl-columns-max-width` | The maximum width of each column. | `1fr` |\n// | `--graupl-columns-grid-template-columns` | The grid template columns for the columns. | `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` |\n// | `--graupl-columns-span` | The span of each column. | `1` |\n// | `--graupl-columns-background` | The background of the columns component. | `var(--graupl-background)` |\n// | `--graupl-columns-color` | The text color of the columns component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// | Variable | Description | Default Value |\n// | --------------------------------------------- | ---------------------------------------------------------------------- | ---------------- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$screen-aware` | Enables screen-aware column variants. | `true` |\n// | `$theme-aware` | Enables theme-aware column variants. | `false` |\n// | `$scheme-aware` | Enables scheme-aware column variants. | `false` |\n// | `$state-aware` | Enables state-aware column variants. | `false` |\n// | `$container-aware` | Enables container-aware column variants. | `true` |\n// | `$force-single-columns` | Flag to enable forced single column layout on small screens. | `true` |\n// | `$columns-selector-base` | The base selector for the columns component. | `\".\"` |\n// | `$columns-selector` | The selector for the columns component. | `\"columns\"` |\n// | `$columns-theme-selector-base` | The selector base for columns theme modifiers. | `\".\"` |\n// | `$columns-theme-selector-prefix` | The columns theme modifier selector prefix. | `\"\"` |\n// | `$columns-count-selector-base` | The base selector for the count class. | `\".\"` |\n// | `$columns-count-selector-prefix` | The prefix for the count class. | `\"count-\"` |\n// | `$columns-span-selector-base` | The base selector for the span class. | `\".\"` |\n// | `$columns-span-selector-prefix` | The prefix for the span class. | `\"span-\"` |\n// | `$columns-fixed-selector-base` | The base selector for the fixed class. | `\".\"` |\n// | `$columns-fixed-selector` | The selector for the fixed class. | `\"fixed\"` |\n// | `$columns-screen-aware-selector-prefix` | Prefix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$columns-screen-aware-selector-suffix` | Suffix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$columns-screen-aware-selector-separator` | Separator inserted for screen-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-theme-aware-selector-prefix` | Prefix to the theme-aware portion of column selectors. | `\"\"` |\n// | `$columns-theme-aware-selector-suffix` | Suffix to the theme-aware portion of column selectors. | `\"-theme\"` |\n// | `$columns-theme-aware-selector-separator` | Separator inserted for theme-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-scheme-aware-selector-prefix` | Prefix to the scheme-aware portion of column selectors. | `\"\"` |\n// | `$columns-scheme-aware-selector-suffix` | Suffix to the scheme-aware portion of column selectors. | `\"-mode\"` |\n// | `$columns-scheme-aware-selector-separator` | Separator inserted for scheme-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-state-aware-selector-prefix` | Prefix to the state-aware portion of column selectors. | `\"\"` |\n// | `$columns-state-aware-selector-suffix` | Suffix to the state-aware portion of column selectors. | `\"\"` |\n// | `$columns-state-aware-selector-separator` | Separator inserted for state-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-container-aware-selector-prefix` | Prefix to the container-aware portion of column selectors. | `\"cq\\\\:\"` |\n// | `$columns-container-aware-selector-suffix` | Suffix to the container-aware portion of column selectors. | `\"\"` |\n// | `$columns-container-aware-selector-separator` | Separator inserted for container-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-max-width` | The maximum width of each column. | `1fr` |\n// | `$columns-count` | The default number of columns. | `3` |\n// | `$columns-min-count` | The minimum number of columns used to generate `.count-#` classes. | `1` |\n// | `$columns-max-count` | The maximum number of columns used to generate `.count-#` classes. | `12` |\n// | `$columns-span` | The default span of each column. | `1` |\n// | `$columns-theme-mappings` | Map of properties/shades for columns themes. | `()` |\n// | `$columns-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as *;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n@use \"../../mixins/utility\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n$columns-count-map: ();\n$columns-span-map: ();\n\n@for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n /* stylelint-disable */\n $columns-count-map: map.merge(\n $columns-count-map,\n (\n #{defaults.$columns-count-selector-prefix}#{$i}: (\n --#{root-defaults.$prefix}columns-count: #{$i}\n )\n )\n );\n $columns-span-map: map.merge(\n $columns-span-map,\n (\n #{defaults.$columns-span-selector-prefix}#{$i}: (\n --#{root-defaults.$prefix}columns-span: #{$i}\n )\n )\n );\n /* stylelint-enable */\n}\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n\n @include utility.generate(\n $map: (\n \"#{defaults.$columns-fixed-selector}\": (\n --graupl-columns-max-width: #{$columns-min-width},\n ),\n ),\n $selector-base: \"&#{defaults.$columns-fixed-selector-base}\",\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$columns-container-aware-selector-separator,\n $important: false\n );\n\n @include utility.generate(\n $map: $columns-count-map,\n $selector-base: \"&#{defaults.$columns-count-selector-base}\",\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$columns-container-aware-selector-separator,\n $important: false\n )\n using($selector, $properties, $responsive-type, $responsive-name) {\n $count-classes: map.keys($columns-count-map);\n $i: list.index($count-classes, $selector);\n\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // > .span-#{$j}\n > #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n @include utility.generate(\n $map: $columns-span-map,\n $selector-base: \"#{defaults.$columns-span-selector-base}\",\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$columns-container-aware-selector-separator,\n $important: false\n );\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @if defaults.$force-single-columns {\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // > .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n background: $columns-background;\n color: $columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$columns-theme-map,\n defaults.$columns-theme-selector-base,\n defaults.$columns-theme-selector-prefix,\n \"columns-\"\n );\n }\n }\n}\n","// @graupl/core 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 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 \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\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/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\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 to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme 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 $scheme: 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 $scheme: $scheme,\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 to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme 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 $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\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}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AGSI,qBD6QF,ymBAKE,yDAQA,gDEjHE,mUCpKJ,6BDoKI,wUCpKJ,iCDoKI,wUCpKJ,iCDoKI,wUCpKJ,kCDoKI,wUCpKJ,kCDoKI,wUCpKJ,kCDoKI,wUCpKJ,kCDoKI,yUCpKJ,kCDoKI,yUAAA,0CFqNE,8SErNF,0CFqNE,qRErNF,0CFqNE,4PErNF,0CFqNE,mOErNF,0CFqNE,0MErNF,0CFqNE,iLErNF,0CFqNE,wJErNF,0CFqNE,+HErNF,0CFqNE,sGErNF,4CFqNE,+EErNF,4CFqNE,oDErNF,4CFqNE,+EGzXN,6BDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,iCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,iCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,8CFqNE,0VErNF,8CFqNE,6TErNF,8CFqNE,gSErNF,8CFqNE,mQErNF,8CFqNE,sOErNF,8CFqNE,yMErNF,8CFqNE,4KErNF,8CFqNE,+IErNF,8CFqNE,kHErNF,gDFqNE,uFErNF,gDFqNE,wDErNF,gDFqNE,wFGzXN,kCDoKI,+CFqNE,qWErNF,+CFqNE,uUErNF,+CFqNE,ySErNF,+CFqNE,2QErNF,+CFqNE,6OErNF,+CFqNE,+MErNF,+CFqNE,iLErNF,+CFqNE,mJErNF,+CFqNE,qHErNF,iDFqNE,yFErNF,iDFqNE,yDErNF,iDFqNE,0FGzXN,kCDoKI,+CFqNE,qWErNF,+CFqNE,uUErNF,+CFqNE,ySErNF,+CFqNE,2QErNF,+CFqNE,6OErNF,+CFqNE,+MErNF,+CFqNE,iLErNF,+CFqNE,mJErNF,+CFqNE,qHErNF,iDFqNE,yFErNF,iDFqNE,yDErNF,iDFqNE,0FErNF,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,2CAAA,2CAAA,2CCpKJ,6BDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,iCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,iCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,6CAAA,+CAAA,+CAAA,gDCpKJ,kCDoKI,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,gDAAA,gDAAA,iDCpKJ,kCDoKI,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,gDAAA,gDAAA,iDE3JJ,0BJsaI,wCAGE,oPCvbJ,oBD4cF","sources":["dist/css/layout/columns.css","var/www/html/packages/core/src/scss/layout/columns/_variables.scss","var/www/html/packages/core/src/scss/layout/columns/_index.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss","var/www/html/packages/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .columns.fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n @media screen and (0 <= width) {\n .columns.xs\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:fixed {\n --graupl-columns-max-width: var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3)));\n }\n }\n .columns.count-1 {\n --graupl-columns-count: 1;\n }\n .columns.count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n .columns.count-2 {\n --graupl-columns-count: 2;\n }\n .columns.count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n .columns.count-3 {\n --graupl-columns-count: 3;\n }\n .columns.count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n .columns.count-4 {\n --graupl-columns-count: 4;\n }\n .columns.count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n .columns.count-5 {\n --graupl-columns-count: 5;\n }\n .columns.count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n .columns.count-6 {\n --graupl-columns-count: 6;\n }\n .columns.count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n .columns.count-7 {\n --graupl-columns-count: 7;\n }\n .columns.count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n .columns.count-8 {\n --graupl-columns-count: 8;\n }\n .columns.count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n .columns.count-9 {\n --graupl-columns-count: 9;\n }\n .columns.count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n .columns.count-10 {\n --graupl-columns-count: 10;\n }\n .columns.count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n .columns.count-11 {\n --graupl-columns-count: 11;\n }\n .columns.count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n .columns.count-12 {\n --graupl-columns-count: 12;\n }\n .columns.count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.xs\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.xs\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.xs\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.xs\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.xs\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.xs\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.xs\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.xs\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.xs\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.xs\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.xs\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.xs\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.xs\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.xs\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.xs\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.xs\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.xs\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.xs\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.xs\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.xs\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.xs\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.xs\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.xs\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.xs\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (0 <= width) {\n .columns.xs\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.xs\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.xs\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.sm\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.sm\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.sm\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.sm\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.sm\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.sm\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.sm\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.sm\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.sm\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.sm\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.sm\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.sm\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.sm\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.sm\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.sm\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.sm\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.sm\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.sm\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.sm\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.sm\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.sm\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.sm\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.sm\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.sm\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (576px <= width) {\n .columns.sm\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.sm\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.sm\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.md\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.md\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.md\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.md\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.md\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.md\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.md\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.md\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.md\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.md\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.md\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.md\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.md\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.md\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.md\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.md\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.md\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.md\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.md\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.md\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.md\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.md\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.md\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.md\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (768px <= width) {\n .columns.md\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.md\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.md\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.lg\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.lg\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.lg\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.lg\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.lg\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.lg\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.lg\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.lg\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.lg\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.lg\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.lg\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.lg\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.lg\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.lg\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.lg\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.lg\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.lg\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.lg\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.lg\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.lg\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.lg\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.lg\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.lg\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.lg\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1024px <= width) {\n .columns.lg\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.lg\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.lg\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.xl\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.xl\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.xl\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.xl\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.xl\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.xl\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.xl\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.xl\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.xl\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.xl\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.xl\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.xl\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.xl\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.xl\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.xl\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.xl\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.xl\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.xl\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.xl\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.xl\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.xl\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.xl\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.xl\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.xl\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1280px <= width) {\n .columns.xl\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.xl\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.xl\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.hd\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.hd\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.hd\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.hd\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.hd\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.hd\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.hd\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.hd\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.hd\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.hd\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.hd\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.hd\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.hd\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.hd\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.hd\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.hd\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.hd\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.hd\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.hd\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.hd\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.hd\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.hd\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.hd\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.hd\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1500px <= width) {\n .columns.hd\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.hd\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.hd\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.qhd\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.qhd\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.qhd\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.qhd\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.qhd\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.qhd\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.qhd\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.qhd\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.qhd\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.qhd\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.qhd\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.qhd\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.qhd\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.qhd\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.qhd\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.qhd\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.qhd\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.qhd\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.qhd\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.qhd\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.qhd\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.qhd\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.qhd\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.qhd\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1921px <= width) {\n .columns.qhd\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.qhd\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.qhd\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-1 {\n --graupl-columns-count: 1;\n }\n .columns.uhd\\:count-1 > .span-2 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-3 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-4 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-5 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-6 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-7 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-8 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-9 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-10 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-11 {\n --graupl-columns-span: 1;\n }\n .columns.uhd\\:count-1 > .span-12 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-2 {\n --graupl-columns-count: 2;\n }\n .columns.uhd\\:count-2 > .span-3 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-4 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-5 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-6 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-7 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-8 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-9 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-10 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-11 {\n --graupl-columns-span: 2;\n }\n .columns.uhd\\:count-2 > .span-12 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-3 {\n --graupl-columns-count: 3;\n }\n .columns.uhd\\:count-3 > .span-4 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-5 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-6 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-7 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-8 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-9 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-10 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-11 {\n --graupl-columns-span: 3;\n }\n .columns.uhd\\:count-3 > .span-12 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-4 {\n --graupl-columns-count: 4;\n }\n .columns.uhd\\:count-4 > .span-5 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-6 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-7 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-8 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-9 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-10 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-11 {\n --graupl-columns-span: 4;\n }\n .columns.uhd\\:count-4 > .span-12 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-5 {\n --graupl-columns-count: 5;\n }\n .columns.uhd\\:count-5 > .span-6 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-7 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-8 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-9 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-10 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-11 {\n --graupl-columns-span: 5;\n }\n .columns.uhd\\:count-5 > .span-12 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-6 {\n --graupl-columns-count: 6;\n }\n .columns.uhd\\:count-6 > .span-7 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-8 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-9 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-10 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-11 {\n --graupl-columns-span: 6;\n }\n .columns.uhd\\:count-6 > .span-12 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-7 {\n --graupl-columns-count: 7;\n }\n .columns.uhd\\:count-7 > .span-8 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-9 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-10 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-11 {\n --graupl-columns-span: 7;\n }\n .columns.uhd\\:count-7 > .span-12 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-8 {\n --graupl-columns-count: 8;\n }\n .columns.uhd\\:count-8 > .span-9 {\n --graupl-columns-span: 8;\n }\n .columns.uhd\\:count-8 > .span-10 {\n --graupl-columns-span: 8;\n }\n .columns.uhd\\:count-8 > .span-11 {\n --graupl-columns-span: 8;\n }\n .columns.uhd\\:count-8 > .span-12 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-9 {\n --graupl-columns-count: 9;\n }\n .columns.uhd\\:count-9 > .span-10 {\n --graupl-columns-span: 9;\n }\n .columns.uhd\\:count-9 > .span-11 {\n --graupl-columns-span: 9;\n }\n .columns.uhd\\:count-9 > .span-12 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-10 {\n --graupl-columns-count: 10;\n }\n .columns.uhd\\:count-10 > .span-11 {\n --graupl-columns-span: 10;\n }\n .columns.uhd\\:count-10 > .span-12 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-11 {\n --graupl-columns-count: 11;\n }\n .columns.uhd\\:count-11 > .span-12 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (2561px <= width) {\n .columns.uhd\\:count-12 {\n --graupl-columns-count: 12;\n }\n .columns.uhd\\:count-12 > .span-13 {\n --graupl-columns-span: 12;\n }\n .columns.uhd\\:count-12 > .span-12 {\n --graupl-columns-span: 12;\n }\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 2;\n }\n .columns .span-3 {\n --graupl-columns-span: 3;\n }\n .columns .span-4 {\n --graupl-columns-span: 4;\n }\n .columns .span-5 {\n --graupl-columns-span: 5;\n }\n .columns .span-6 {\n --graupl-columns-span: 6;\n }\n .columns .span-7 {\n --graupl-columns-span: 7;\n }\n .columns .span-8 {\n --graupl-columns-span: 8;\n }\n .columns .span-9 {\n --graupl-columns-span: 9;\n }\n .columns .span-10 {\n --graupl-columns-span: 10;\n }\n .columns .span-11 {\n --graupl-columns-span: 11;\n }\n .columns .span-12 {\n --graupl-columns-span: 12;\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (0 <= width) {\n .columns .xs\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (576px <= width) {\n .columns .sm\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (768px <= width) {\n .columns .md\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1024px <= width) {\n .columns .lg\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1280px <= width) {\n .columns .xl\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1500px <= width) {\n .columns .hd\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (1921px <= width) {\n .columns .qhd\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-1 {\n --graupl-columns-span: 1;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-2 {\n --graupl-columns-span: 2;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-3 {\n --graupl-columns-span: 3;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-4 {\n --graupl-columns-span: 4;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-5 {\n --graupl-columns-span: 5;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-6 {\n --graupl-columns-span: 6;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-7 {\n --graupl-columns-span: 7;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-8 {\n --graupl-columns-span: 8;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-9 {\n --graupl-columns-span: 9;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-10 {\n --graupl-columns-span: 10;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-11 {\n --graupl-columns-span: 11;\n }\n }\n @media screen and (2561px <= width) {\n .columns .uhd\\:span-12 {\n --graupl-columns-span: 12;\n }\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n .columns .span-7 {\n --graupl-columns-span: 1;\n }\n .columns .span-8 {\n --graupl-columns-span: 1;\n }\n .columns .span-9 {\n --graupl-columns-span: 1;\n }\n .columns .span-10 {\n --graupl-columns-span: 1;\n }\n .columns .span-11 {\n --graupl-columns-span: 1;\n }\n .columns .span-12 {\n --graupl-columns-span: 1;\n }\n }\n}\n@layer graupl.theme {\n .columns {\n background: var(--graupl-columns-background);\n color: var(--graupl-columns-color);\n }\n}","// @graupl/core columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// | Custom property | Default |\n// | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-count | 3 |\n// | --graupl-columns-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-columns-min-width | calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) |\n// | --graupl-columns-max-width | 1fr |\n// | --graupl-columns-grid-template-columns | repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) |\n// | --graupl-columns-span | 1 |\n// | --graupl-columns-background | null |\n// | --graupl-columns-color | null |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} *\n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(--#{root-defaults.$prefix}columns-background);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color);\n","// @graupl/core columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.count-7`: Sets the number of columns in the columns component to 7.\n// - `.count-8`: Sets the number of columns in the columns component to 8.\n// - `.count-9`: Sets the number of columns in the columns component to 9.\n// - `.count-10`: Sets the number of columns in the columns component to 10.\n// - `.count-11`: Sets the number of columns in the columns component to 11.\n// - `.count-12`: Sets the number of columns in the columns component to 12.\n// - `.fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns.\n// - `.xs:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on extra small screens.\n// - `.sm:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on small screens.\n// - `.md:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on medium screens.\n// - `.lg:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on large screens.\n// - `.xl:fixed`: Sets the min/max columns widths to be equal, forcing a fixed number of columns on extra large screens.\n// - `.xs:count-1`: Sets the number of columns in the columns component to 1 on extra small screens.\n// - `.xs:count-2`: Sets the number of columns in the columns component to 2 on extra small screens.\n// - `.xs:count-3`: Sets the number of columns in the columns component to 3 on extra small screens.\n// - `.xs:count-4`: Sets the number of columns in the columns component to 4 on extra small screens.\n// - `.xs:count-5`: Sets the number of columns in the columns component to 5 on extra small screens.\n// - `.xs:count-6`: Sets the number of columns in the columns component to 6 on extra small screens.\n// - `.xs:count-7`: Sets the number of columns in the columns component to 7 on extra small screens.\n// - `.xs:count-8`: Sets the number of columns in the columns component to 8 on extra small screens.\n// - `.xs:count-9`: Sets the number of columns in the columns component to 9 on extra small screens.\n// - `.xs:count-10`: Sets the number of columns in the columns component to 10 on extra small screens.\n// - `.xs:count-11`: Sets the number of columns in the columns component to 11 on extra small screens.\n// - `.xs:count-12`: Sets the number of columns in the columns component to 12 on extra small screens.\n// - `.sm:count-1`: Sets the number of columns in the columns component to 1 on small screens.\n// - `.sm:count-2`: Sets the number of columns in the columns component to 2 on small screens.\n// - `.sm:count-3`: Sets the number of columns in the columns component to 3 on small screens.\n// - `.sm:count-4`: Sets the number of columns in the columns component to 4 on small screens.\n// - `.sm:count-5`: Sets the number of columns in the columns component to 5 on small screens.\n// - `.sm:count-6`: Sets the number of columns in the columns component to 6 on small screens.\n// - `.sm:count-7`: Sets the number of columns in the columns component to 7 on small screens.\n// - `.sm:count-8`: Sets the number of columns in the columns component to 8 on small screens.\n// - `.sm:count-9`: Sets the number of columns in the columns component to 9 on small screens.\n// - `.sm:count-10`: Sets the number of columns in the columns component to 10 on small screens.\n// - `.sm:count-11`: Sets the number of columns in the columns component to 11 on small screens.\n// - `.sm:count-12`: Sets the number of columns in the columns component to 12 on small screens.\n// - `.md:count-1`: Sets the number of columns in the columns component to 1 on medium screens.\n// - `.md:count-2`: Sets the number of columns in the columns component to 2 on medium screens.\n// - `.md:count-3`: Sets the number of columns in the columns component to 3 on medium screens.\n// - `.md:count-4`: Sets the number of columns in the columns component to 4 on medium screens.\n// - `.md:count-5`: Sets the number of columns in the columns component to 5 on medium screens.\n// - `.md:count-6`: Sets the number of columns in the columns component to 6 on medium screens.\n// - `.md:count-7`: Sets the number of columns in the columns component to 7 on medium screens.\n// - `.md:count-8`: Sets the number of columns in the columns component to 8 on medium screens.\n// - `.md:count-9`: Sets the number of columns in the columns component to 9 on medium screens.\n// - `.md:count-10`: Sets the number of columns in the columns component to 10 on medium screens.\n// - `.md:count-11`: Sets the number of columns in the columns component to 11 on medium screens.\n// - `.md:count-12`: Sets the number of columns in the columns component to 12 on medium screens.\n// - `.lg:count-1`: Sets the number of columns in the columns component to 1 on large screens.\n// - `.lg:count-2`: Sets the number of columns in the columns component to 2 on large screens.\n// - `.lg:count-3`: Sets the number of columns in the columns component to 3 on large screens.\n// - `.lg:count-4`: Sets the number of columns in the columns component to 4 on large screens.\n// - `.lg:count-5`: Sets the number of columns in the columns component to 5 on large screens.\n// - `.lg:count-6`: Sets the number of columns in the columns component to 6 on large screens.\n// - `.lg:count-7`: Sets the number of columns in the columns component to 7 on large screens.\n// - `.lg:count-8`: Sets the number of columns in the columns component to 8 on large screens.\n// - `.lg:count-9`: Sets the number of columns in the columns component to 9 on large screens.\n// - `.lg:count-10`: Sets the number of columns in the columns component to 10 on large screens.\n// - `.lg:count-11`: Sets the number of columns in the columns component to 11 on large screens.\n// - `.lg:count-12`: Sets the number of columns in the columns component to 12 on large screens.\n// - `.xl:count-1`: Sets the number of columns in the columns component to 1 on extra large screens.\n// - `.xl:count-2`: Sets the number of columns in the columns component to 2 on extra large screens.\n// - `.xl:count-3`: Sets the number of columns in the columns component to 3 on extra large screens.\n// - `.xl:count-4`: Sets the number of columns in the columns component to 4 on extra large screens.\n// - `.xl:count-5`: Sets the number of columns in the columns component to 5 on extra large screens.\n// - `.xl:count-6`: Sets the number of columns in the columns component to 6 on extra large screens.\n// - `.xl:count-7`: Sets the number of columns in the columns component to 7 on extra large screens.\n// - `.xl:count-8`: Sets the number of columns in the columns component to 8 on extra large screens.\n// - `.xl:count-9`: Sets the number of columns in the columns component to 9 on extra large screens.\n// - `.xl:count-10`: Sets the number of columns in the columns component to 10 on extra large screens.\n// - `.xl:count-11`: Sets the number of columns in the columns component to 11 on extra large screens.\n// - `.xl:count-12`: Sets the number of columns in the columns component to 12 on extra large screens.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n// - `.span-7`: Sets the span of a column in the columns component to 7.\n// - `.span-8`: Sets the span of a column in the columns component to 8.\n// - `.span-9`: Sets the span of a column in the columns component to 9.\n// - `.span-10`: Sets the span of a column in the columns component to 10.\n// - `.span-11`: Sets the span of a column in the columns component to 11.\n// - `.span-12`: Sets the span of a column in the columns component to 12.\n// - `.xs:span-1`: Sets the span of a column in the columns component to 1 on extra small screens.\n// - `.xs:span-2`: Sets the span of a column in the columns component to 2 on extra small screens.\n// - `.xs:span-3`: Sets the span of a column in the columns component to 3 on extra small screens.\n// - `.xs:span-4`: Sets the span of a column in the columns component to 4 on extra small screens.\n// - `.xs:span-5`: Sets the span of a column in the columns component to 5 on extra small screens.\n// - `.xs:span-6`: Sets the span of a column in the columns component to 6 on extra small screens.\n// - `.xs:span-7`: Sets the span of a column in the columns component to 7 on extra small screens.\n// - `.xs:span-8`: Sets the span of a column in the columns component to 8 on extra small screens.\n// - `.xs:span-9`: Sets the span of a column in the columns component to 9 on extra small screens.\n// - `.xs:span-10`: Sets the span of a column in the columns component to 10 on extra small screens.\n// - `.xs:span-11`: Sets the span of a column in the columns component to 11 on extra small screens.\n// - `.xs:span-12`: Sets the span of a column in the columns component to 12 on extra small screens.\n// - `.sm:span-1`: Sets the span of a column in the columns component to 1 on small screens.\n// - `.sm:span-2`: Sets the span of a column in the columns component to 2 on small screens.\n// - `.sm:span-3`: Sets the span of a column in the columns component to 3 on small screens.\n// - `.sm:span-4`: Sets the span of a column in the columns component to 4 on small screens.\n// - `.sm:span-5`: Sets the span of a column in the columns component to 5 on small screens.\n// - `.sm:span-6`: Sets the span of a column in the columns component to 6 on small screens.\n// - `.sm:span-7`: Sets the span of a column in the columns component to 7 on small screens.\n// - `.sm:span-8`: Sets the span of a column in the columns component to 8 on small screens.\n// - `.sm:span-9`: Sets the span of a column in the columns component to 9 on small screens.\n// - `.sm:span-10`: Sets the span of a column in the columns component to 10 on small screens.\n// - `.sm:span-11`: Sets the span of a column in the columns component to 11 on small screens.\n// - `.sm:span-12`: Sets the span of a column in the columns component to 12 on small screens.\n// - `.md:span-1`: Sets the span of a column in the columns component to 1 on medium screens.\n// - `.md:span-2`: Sets the span of a column in the columns component to 2 on medium screens.\n// - `.md:span-3`: Sets the span of a column in the columns component to 3 on medium screens.\n// - `.md:span-4`: Sets the span of a column in the columns component to 4 on medium screens.\n// - `.md:span-5`: Sets the span of a column in the columns component to 5 on medium screens.\n// - `.md:span-6`: Sets the span of a column in the columns component to 6 on medium screens.\n// - `.md:span-7`: Sets the span of a column in the columns component to 7 on medium screens.\n// - `.md:span-8`: Sets the span of a column in the columns component to 8 on medium screens.\n// - `.md:span-9`: Sets the span of a column in the columns component to 9 on medium screens.\n// - `.md:span-10`: Sets the span of a column in the columns component to 10 on medium screens.\n// - `.md:span-11`: Sets the span of a column in the columns component to 11 on medium screens.\n// - `.md:span-12`: Sets the span of a column in the columns component to 12 on medium screens.\n// - `.lg:span-1`: Sets the span of a column in the columns component to 1 on large screens.\n// - `.lg:span-2`: Sets the span of a column in the columns component to 2 on large screens.\n// - `.lg:span-3`: Sets the span of a column in the columns component to 3 on large screens.\n// - `.lg:span-4`: Sets the span of a column in the columns component to 4 on large screens.\n// - `.lg:span-5`: Sets the span of a column in the columns component to 5 on large screens.\n// - `.lg:span-6`: Sets the span of a column in the columns component to 6 on large screens.\n// - `.lg:span-7`: Sets the span of a column in the columns component to 7 on large screens.\n// - `.lg:span-8`: Sets the span of a column in the columns component to 8 on large screens.\n// - `.lg:span-9`: Sets the span of a column in the columns component to 9 on large screens.\n// - `.lg:span-10`: Sets the span of a column in the columns component to 10 on large screens.\n// - `.lg:span-11`: Sets the span of a column in the columns component to 11 on large screens.\n// - `.lg:span-12`: Sets the span of a column in the columns component to 12 on large screens.\n// - `.xl:span-1`: Sets the span of a column in the columns component to 1 on extra large screens.\n// - `.xl:span-2`: Sets the span of a column in the columns component to 2 on extra large screens.\n// - `.xl:span-3`: Sets the span of a column in the columns component to 3 on extra large screens.\n// - `.xl:span-4`: Sets the span of a column in the columns component to 4 on extra large screens.\n// - `.xl:span-5`: Sets the span of a column in the columns component to 5 on extra large screens.\n// - `.xl:span-6`: Sets the span of a column in the columns component to 6 on extra large screens.\n// - `.xl:span-7`: Sets the span of a column in the columns component to 7 on extra large screens.\n// - `.xl:span-8`: Sets the span of a column in the columns component to 8 on extra large screens.\n// - `.xl:span-9`: Sets the span of a column in the columns component to 9 on extra large screens.\n// - `.xl:span-10`: Sets the span of a column in the columns component to 10 on extra large screens.\n// - `.xl:span-11`: Sets the span of a column in the columns component to 11 on extra large screens.\n// - `.xl:span-12`: Sets the span of a column in the columns component to 12 on extra large screens.\n//\n// The following custom properties can be used to customize the columns component:\n// | Property | Description | Default Value |\n// | ---------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n// | `--graupl-columns-row-gap` | The gap between the rows of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-column-gap` | The gap between the columns of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-count` | The maximum number of columns. | `3` |\n// | `--graupl-columns-content-max-width` | The maximum width of the content inside the columns. | `var(--graupl-content-max-width)` |\n// | `--graupl-columns-min-width` | The minimum width of each column. | `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` |\n// | `--graupl-columns-max-width` | The maximum width of each column. | `1fr` |\n// | `--graupl-columns-grid-template-columns` | The grid template columns for the columns. | `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` |\n// | `--graupl-columns-span` | The span of each column. | `1` |\n// | `--graupl-columns-background` | The background of the columns component. | `var(--graupl-background)` |\n// | `--graupl-columns-color` | The text color of the columns component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// | Variable | Description | Default Value |\n// | --------------------------------------------- | ---------------------------------------------------------------------- | ---------------- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$screen-aware` | Enables screen-aware column variants. | `true` |\n// | `$theme-aware` | Enables theme-aware column variants. | `false` |\n// | `$scheme-aware` | Enables scheme-aware column variants. | `false` |\n// | `$state-aware` | Enables state-aware column variants. | `false` |\n// | `$container-aware` | Enables container-aware column variants. | `true` |\n// | `$force-single-columns` | Flag to enable forced single column layout on small screens. | `true` |\n// | `$columns-selector-base` | The base selector for the columns component. | `\".\"` |\n// | `$columns-selector` | The selector for the columns component. | `\"columns\"` |\n// | `$columns-theme-selector-base` | The selector base for columns theme modifiers. | `\".\"` |\n// | `$columns-theme-selector-prefix` | The columns theme modifier selector prefix. | `\"\"` |\n// | `$columns-count-selector-base` | The base selector for the count class. | `\".\"` |\n// | `$columns-count-selector-prefix` | The prefix for the count class. | `\"count-\"` |\n// | `$columns-span-selector-base` | The base selector for the span class. | `\".\"` |\n// | `$columns-span-selector-prefix` | The prefix for the span class. | `\"span-\"` |\n// | `$columns-fixed-selector-base` | The base selector for the fixed class. | `\".\"` |\n// | `$columns-fixed-selector` | The selector for the fixed class. | `\"fixed\"` |\n// | `$columns-screen-aware-selector-prefix` | Prefix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$columns-screen-aware-selector-suffix` | Suffix to the screen-aware portion of column selectors. | `\"\"` |\n// | `$columns-screen-aware-selector-separator` | Separator inserted for screen-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-theme-aware-selector-prefix` | Prefix to the theme-aware portion of column selectors. | `\"\"` |\n// | `$columns-theme-aware-selector-suffix` | Suffix to the theme-aware portion of column selectors. | `\"-theme\"` |\n// | `$columns-theme-aware-selector-separator` | Separator inserted for theme-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-scheme-aware-selector-prefix` | Prefix to the scheme-aware portion of column selectors. | `\"\"` |\n// | `$columns-scheme-aware-selector-suffix` | Suffix to the scheme-aware portion of column selectors. | `\"-mode\"` |\n// | `$columns-scheme-aware-selector-separator` | Separator inserted for scheme-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-state-aware-selector-prefix` | Prefix to the state-aware portion of column selectors. | `\"\"` |\n// | `$columns-state-aware-selector-suffix` | Suffix to the state-aware portion of column selectors. | `\"\"` |\n// | `$columns-state-aware-selector-separator` | Separator inserted for state-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-container-aware-selector-prefix` | Prefix to the container-aware portion of column selectors. | `\"cq\\\\:\"` |\n// | `$columns-container-aware-selector-suffix` | Suffix to the container-aware portion of column selectors. | `\"\"` |\n// | `$columns-container-aware-selector-separator` | Separator inserted for container-aware column selectors. | `\"\\\\:\"` |\n// | `$columns-max-width` | The maximum width of each column. | `1fr` |\n// | `$columns-count` | The default number of columns. | `3` |\n// | `$columns-min-count` | The minimum number of columns used to generate `.count-#` classes. | `1` |\n// | `$columns-max-count` | The maximum number of columns used to generate `.count-#` classes. | `12` |\n// | `$columns-span` | The default span of each column. | `1` |\n// | `$columns-theme-mappings` | Map of properties/shades for columns themes. | `()` |\n// | `$columns-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as *;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n@use \"../../mixins/utility\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n$columns-count-map: ();\n$columns-span-map: ();\n\n@for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n /* stylelint-disable */\n $columns-count-map: map.merge(\n $columns-count-map,\n (\n #{defaults.$columns-count-selector-prefix}#{$i}: (\n --#{root-defaults.$prefix}columns-count: #{$i}\n )\n )\n );\n $columns-span-map: map.merge(\n $columns-span-map,\n (\n #{defaults.$columns-span-selector-prefix}#{$i}: (\n --#{root-defaults.$prefix}columns-span: #{$i}\n )\n )\n );\n /* stylelint-enable */\n}\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n\n @include utility.generate(\n $map: (\n \"#{defaults.$columns-fixed-selector}\": (\n --#{root-defaults.$prefix}columns-max-width: #{$columns-min-width},\n ),\n ),\n $selector-base: \"&#{defaults.$columns-fixed-selector-base}\",\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$columns-container-aware-selector-separator,\n $important: false\n );\n\n @include utility.generate(\n $map: $columns-count-map,\n $selector-base: \"&#{defaults.$columns-count-selector-base}\",\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$columns-container-aware-selector-separator,\n $important: false\n )\n using($selector, $properties, $responsive-type, $responsive-name) {\n $count-classes: map.keys($columns-count-map);\n $i: list.index($count-classes, $selector);\n\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // > .span-#{$j}\n > #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n @include utility.generate(\n $map: $columns-span-map,\n $selector-base: \"#{defaults.$columns-span-selector-base}\",\n $selector-prefix: \"\",\n $selector-suffix: \"\",\n $screen-aware: defaults.$screen-aware,\n $screen-aware-selector-prefix:\n defaults.$columns-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n defaults.$columns-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n defaults.$columns-screen-aware-selector-separator,\n $theme-aware: defaults.$theme-aware,\n $theme-aware-selector-prefix:\n defaults.$columns-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n defaults.$columns-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n defaults.$columns-theme-aware-selector-separator,\n $scheme-aware: defaults.$scheme-aware,\n $scheme-aware-selector-prefix:\n defaults.$columns-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n defaults.$columns-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n defaults.$columns-scheme-aware-selector-separator,\n $state-aware: defaults.$state-aware,\n $state-aware-selector-prefix:\n defaults.$columns-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n defaults.$columns-state-aware-selector-suffix,\n $state-aware-selector-separator:\n defaults.$columns-state-aware-selector-separator,\n $container-aware: defaults.$container-aware,\n $container-aware-selector-prefix:\n defaults.$columns-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n defaults.$columns-container-aware-selector-suffix,\n $container-aware-selector-separator:\n defaults.$columns-container-aware-selector-separator,\n $important: false\n );\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @if defaults.$force-single-columns {\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // > .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n background: $columns-background;\n color: $columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$columns-theme-map,\n defaults.$columns-theme-selector-base,\n defaults.$columns-theme-selector-prefix,\n \"columns-\"\n );\n }\n }\n}\n","// @graupl/core 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 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 \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\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/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\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 to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme 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 $scheme: 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 $scheme: $scheme,\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 to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme 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 $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\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}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n"],"names":[]}