@graupl/graupl 1.0.0-beta.41 → 1.0.0-beta.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/component/accordion.css.map +1 -1
- package/dist/css/component/card.css +1 -1
- package/dist/css/component/card.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/css/layout/columns.css +1 -1
- package/dist/css/layout/columns.css.map +1 -1
- package/dist/css/layout/container.css +1 -1
- package/dist/css/layout/container.css.map +1 -1
- package/dist/css/layout/flex-columns.css +1 -1
- package/dist/css/layout/flex-columns.css.map +1 -1
- package/dist/css/layout.css +1 -1
- package/dist/css/layout.css.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.layout{.columns{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))));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))));display:grid}.columns>*{grid-column:span var(--graupl-columns-span,1)}.columns .columns{grid-template-columns:subgrid}.count-1{--graupl-columns-count:1}.count-1 .span-2,.count-1 .span-3,.count-1 .span-4,.count-1 .span-5,.count-1 .span-6,.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.count-2 .span-3,.count-2 .span-4,.count-2 .span-5,.count-2 .span-6,.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.count-3 .span-4,.count-3 .span-5,.count-3 .span-6,.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.count-4 .span-5,.count-4 .span-6,.span-4{--graupl-columns-span:4}.count-5{--graupl-columns-count:5}.count-5 .span-6,.span-5{--graupl-columns-span:5}.count-6{--graupl-columns-count:6}.count-6 .span-7,.count-6 .span-6,.span-6{--graupl-columns-span:6}@container (width<=575px){.columns{--graupl-columns-min-width:1fr}.columns>*,.columns .span-1,.columns .span-2,.columns .span-3,.columns .span-4,.columns .span-5,.columns .span-6{--graupl-columns-span:1}}}@layer graupl.theme{.columns{background
|
|
1
|
+
@layer graupl.layout{.columns{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))));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))));display:grid}.columns>*{grid-column:span var(--graupl-columns-span,1)}.columns .columns{grid-template-columns:subgrid}.count-1{--graupl-columns-count:1}.count-1 .span-2,.count-1 .span-3,.count-1 .span-4,.count-1 .span-5,.count-1 .span-6,.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.count-2 .span-3,.count-2 .span-4,.count-2 .span-5,.count-2 .span-6,.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.count-3 .span-4,.count-3 .span-5,.count-3 .span-6,.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.count-4 .span-5,.count-4 .span-6,.span-4{--graupl-columns-span:4}.count-5{--graupl-columns-count:5}.count-5 .span-6,.span-5{--graupl-columns-span:5}.count-6{--graupl-columns-count:6}.count-6 .span-7,.count-6 .span-6,.span-6{--graupl-columns-span:6}@container (width<=575px){.columns{--graupl-columns-min-width:1fr}.columns>*,.columns .span-1,.columns .span-2,.columns .span-3,.columns .span-4,.columns .span-5,.columns .span-6{--graupl-columns-span:1}}}@layer graupl.theme{.columns{background:var(--graupl-columns-background);color:var(--graupl-columns-color)}}
|
|
2
2
|
/*# sourceMappingURL=columns.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"AESI,qBCkFF,ymBAKE,yDAQA,gDAOA,kCAOI,qHAPJ,kCAOI,oGAPJ,kCAOI,mFAPJ,kCAOI,kEAPJ,kCAOI,iDAPJ,kCAOI,kEC/FN,0BD+GI,wCAGE,2IDhIJ,oBCqJF","sources":["dist/css/layout/columns.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .count-1 {\n --graupl-columns-count: 1;\n }\n .count-1 .span-2 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-3 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-4 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-5 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-6 {\n --graupl-columns-span: 1;\n }\n .span-1 {\n --graupl-columns-span: 1;\n }\n .count-2 {\n --graupl-columns-count: 2;\n }\n .count-2 .span-3 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-4 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-5 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-6 {\n --graupl-columns-span: 2;\n }\n .span-2 {\n --graupl-columns-span: 2;\n }\n .count-3 {\n --graupl-columns-count: 3;\n }\n .count-3 .span-4 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-5 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-6 {\n --graupl-columns-span: 3;\n }\n .span-3 {\n --graupl-columns-span: 3;\n }\n .count-4 {\n --graupl-columns-count: 4;\n }\n .count-4 .span-5 {\n --graupl-columns-span: 4;\n }\n .count-4 .span-6 {\n --graupl-columns-span: 4;\n }\n .span-4 {\n --graupl-columns-span: 4;\n }\n .count-5 {\n --graupl-columns-count: 5;\n }\n .count-5 .span-6 {\n --graupl-columns-span: 5;\n }\n .span-5 {\n --graupl-columns-span: 5;\n }\n .count-6 {\n --graupl-columns-count: 6;\n }\n .count-6 .span-7 {\n --graupl-columns-span: 6;\n }\n .count-6 .span-6 {\n --graupl-columns-span: 6;\n }\n .span-6 {\n --graupl-columns-span: 6;\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n }\n}\n@layer graupl.theme {\n .columns {\n background-color: var(--graupl-columns-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-columns-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n}","// @graupl/core columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n//\n// Custom property defaults:\n// | Custom property | Default |\n// | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-count | 3 |\n// | --graupl-columns-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-columns-min-width | calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) |\n// | --graupl-columns-max-width | 1fr |\n// | --graupl-columns-grid-template-columns | repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) |\n// | --graupl-columns-span | 1 |\n// | --graupl-columns-background | var(--graupl-background) |\n// | --graupl-columns-color | var(--graupl-color) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} *\n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(\n --#{root-defaults.$prefix}columns-background,\n #{color.$background}\n);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color, #{color.$color});\n","// @graupl/core 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 columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n//\n// The following custom properties can be used to customize the columns component:\n// | Property | Description | Default Value |\n// | ---------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n// | `--graupl-columns-row-gap` | The gap between the rows of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-column-gap` | The gap between the columns of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-count` | The maximum number of columns. | `3` |\n// | `--graupl-columns-content-max-width` | The maximum width of the content inside the columns. | `var(--graupl-content-max-width)` |\n// | `--graupl-columns-min-width` | The minimum width of each column. | `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` |\n// | `--graupl-columns-max-width` | The maximum width of each column. | `1fr` |\n// | `--graupl-columns-grid-template-columns` | The grid template columns for the columns. | `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` |\n// | `--graupl-columns-span` | The span of each column. | `1` |\n// | `--graupl-columns-background` | The background of the columns component. | `var(--graupl-background)` |\n// | `--graupl-columns-color` | The text color of the columns component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// | Variable | Description | Default Value |\n// | -------------------------------- | ------------------------------------------------------------------ | ---------------- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$force-single-columns` | Flag to enable forced single column layout on small screens. | `true` |\n// | `$columns-selector-base` | The base selector for the columns component. | `\".\"` |\n// | `$columns-selector` | The selector for the columns component. | `\"columns\"` |\n// | `$columns-theme-selector-base` | The selector base for columns theme modifiers. | `\".\"` |\n// | `$columns-theme-selector-prefix` | The columns theme modifier selector prefix. | `\"\"` |\n// | `$columns-count-selector-base` | The base selector for the count class. | `\".\"` |\n// | `$columns-count-selector-prefix` | The prefix for the count class. | `\"count-\"` |\n// | `$columns-span-selector-base` | The base selector for the span class. | `\".\"` |\n// | `$columns-span-selector-prefix` | The prefix for the span class. | `\"span-\"` |\n// | `$columns-max-width` | The maximum width of each column. | `1fr` |\n// | `$columns-count` | The default number of columns. | `3` |\n// | `$columns-min-count` | The minimum number of columns used to generate `.count-#` classes. | `1` |\n// | `$columns-max-count` | The maximum number of columns used to generate `.count-#` classes. | `6` |\n// | `$columns-span` | The default span of each column. | `1` |\n// | `$columns-theme-mappings` | Map of properties/shades for columns themes. | `()` |\n// | `$columns-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as *;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n }\n\n @for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n // .count-#{$i}\n #{defaults.$columns-count-selector-base}#{defaults.$columns-count-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-count: #{$i};\n\n // For span values bigger than the actual column count, set them to the\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // .span-#{$j}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @if defaults.$force-single-columns {\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n background-color: $columns-background;\n color: $columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$columns-theme-map,\n defaults.$columns-theme-selector-base,\n defaults.$columns-theme-selector-prefix,\n \"columns-\"\n );\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AESI,qBCkFF,ymBAKE,yDAQA,gDAOA,kCAOI,qHAPJ,kCAOI,oGAPJ,kCAOI,mFAPJ,kCAOI,kEAPJ,kCAOI,iDAPJ,kCAOI,kEC/FN,0BD+GI,wCAGE,2IDhIJ,oBCqJF","sources":["dist/css/layout/columns.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .count-1 {\n --graupl-columns-count: 1;\n }\n .count-1 .span-2 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-3 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-4 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-5 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-6 {\n --graupl-columns-span: 1;\n }\n .span-1 {\n --graupl-columns-span: 1;\n }\n .count-2 {\n --graupl-columns-count: 2;\n }\n .count-2 .span-3 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-4 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-5 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-6 {\n --graupl-columns-span: 2;\n }\n .span-2 {\n --graupl-columns-span: 2;\n }\n .count-3 {\n --graupl-columns-count: 3;\n }\n .count-3 .span-4 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-5 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-6 {\n --graupl-columns-span: 3;\n }\n .span-3 {\n --graupl-columns-span: 3;\n }\n .count-4 {\n --graupl-columns-count: 4;\n }\n .count-4 .span-5 {\n --graupl-columns-span: 4;\n }\n .count-4 .span-6 {\n --graupl-columns-span: 4;\n }\n .span-4 {\n --graupl-columns-span: 4;\n }\n .count-5 {\n --graupl-columns-count: 5;\n }\n .count-5 .span-6 {\n --graupl-columns-span: 5;\n }\n .span-5 {\n --graupl-columns-span: 5;\n }\n .count-6 {\n --graupl-columns-count: 6;\n }\n .count-6 .span-7 {\n --graupl-columns-span: 6;\n }\n .count-6 .span-6 {\n --graupl-columns-span: 6;\n }\n .span-6 {\n --graupl-columns-span: 6;\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n }\n}\n@layer graupl.theme {\n .columns {\n background: var(--graupl-columns-background);\n color: var(--graupl-columns-color);\n }\n}","// @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 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 columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n//\n// The following custom properties can be used to customize the columns component:\n// | Property | Description | Default Value |\n// | ---------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n// | `--graupl-columns-row-gap` | The gap between the rows of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-column-gap` | The gap between the columns of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-count` | The maximum number of columns. | `3` |\n// | `--graupl-columns-content-max-width` | The maximum width of the content inside the columns. | `var(--graupl-content-max-width)` |\n// | `--graupl-columns-min-width` | The minimum width of each column. | `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` |\n// | `--graupl-columns-max-width` | The maximum width of each column. | `1fr` |\n// | `--graupl-columns-grid-template-columns` | The grid template columns for the columns. | `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` |\n// | `--graupl-columns-span` | The span of each column. | `1` |\n// | `--graupl-columns-background` | The background of the columns component. | `var(--graupl-background)` |\n// | `--graupl-columns-color` | The text color of the columns component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// | Variable | Description | Default Value |\n// | -------------------------------- | ------------------------------------------------------------------ | ---------------- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$force-single-columns` | Flag to enable forced single column layout on small screens. | `true` |\n// | `$columns-selector-base` | The base selector for the columns component. | `\".\"` |\n// | `$columns-selector` | The selector for the columns component. | `\"columns\"` |\n// | `$columns-theme-selector-base` | The selector base for columns theme modifiers. | `\".\"` |\n// | `$columns-theme-selector-prefix` | The columns theme modifier selector prefix. | `\"\"` |\n// | `$columns-count-selector-base` | The base selector for the count class. | `\".\"` |\n// | `$columns-count-selector-prefix` | The prefix for the count class. | `\"count-\"` |\n// | `$columns-span-selector-base` | The base selector for the span class. | `\".\"` |\n// | `$columns-span-selector-prefix` | The prefix for the span class. | `\"span-\"` |\n// | `$columns-max-width` | The maximum width of each column. | `1fr` |\n// | `$columns-count` | The default number of columns. | `3` |\n// | `$columns-min-count` | The minimum number of columns used to generate `.count-#` classes. | `1` |\n// | `$columns-max-count` | The maximum number of columns used to generate `.count-#` classes. | `6` |\n// | `$columns-span` | The default span of each column. | `1` |\n// | `$columns-theme-mappings` | Map of properties/shades for columns themes. | `()` |\n// | `$columns-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as *;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n }\n\n @for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n // .count-#{$i}\n #{defaults.$columns-count-selector-base}#{defaults.$columns-count-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-count: #{$i};\n\n // For span values bigger than the actual column count, set them to the\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // .span-#{$j}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @if defaults.$force-single-columns {\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n background: $columns-background;\n color: $columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$columns-theme-map,\n defaults.$columns-theme-selector-base,\n defaults.$columns-theme-selector-prefix,\n \"columns-\"\n );\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.layout{.container{grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width,min(var(--graupl-container-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) * 2)), var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end];overflow-wrap:break-word;display:grid;container-type:inline-size}.container>.container{grid-column:1/-1;grid-template-columns:subgrid;container-type:normal}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .contain{grid-template-columns:subgrid;display:grid}.container .contain>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .breakout{grid-column:breakout}.container .feature{grid-column:feature}.container .full-width{grid-column:full-width}.container.sidebars .sidebar-left{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left){grid-column:content}.container.sidebars .sidebar-right{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .content>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}.container.sidebars-left .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-left .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-left .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-right .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}@media screen and (width>=1024px){.container.sidebars{--graupl-columns-content-max-width:var(--graupl-container-sidebars-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width,min(var(--graupl-container-sidebars-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars>.sidebar-left{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-left:not(.container),.container.sidebars>.sidebar-left:not(.container) .container,.container.sidebars>.sidebar-left:not(.container) .breakout,.container.sidebars>.sidebar-left:not(.container) .full-width,.container.sidebars>.sidebar-left:not(.container) .feature{grid-column-end:content-start}.container.sidebars>.sidebar-left>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-left .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-left}.container.sidebars>.sidebar-right{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-right:not(.container),.container.sidebars>.sidebar-right:not(.container) .container,.container.sidebars>.sidebar-right:not(.container) .breakout,.container.sidebars>.sidebar-right:not(.container) .full-width,.container.sidebars>.sidebar-right:not(.container) .feature{grid-column-start:content-end}.container.sidebars>.sidebar-right>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-right .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-right}.container.sidebars>.content{grid-row:1}.container.sidebars-left{--graupl-columns-content-max-width:var(--graupl-container-sidebars-left-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width,min(var(--graupl-container-sidebars-left-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars-left>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-left>.sidebar:not(.container),.container.sidebars-left>.sidebar:not(.container) .container,.container.sidebars-left>.sidebar:not(.container) .breakout,.container.sidebars-left>.sidebar:not(.container) .full-width,.container.sidebars-left>.sidebar:not(.container) .feature{grid-column-end:content-start}.container.sidebars-left>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-left>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-left>.content{grid-row:1}.container.sidebars-right{--graupl-columns-content-max-width:var(--graupl-container-sidebars-right-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width,min(var(--graupl-container-sidebars-right-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars-right>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-right>.sidebar:not(.container),.container.sidebars-right>.sidebar:not(.container) .container,.container.sidebars-right>.sidebar:not(.container) .breakout,.container.sidebars-right>.sidebar:not(.container) .full-width,.container.sidebars-right>.sidebar:not(.container) .feature{grid-column-start:content-end}.container.sidebars-right>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-right>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-right>.content{grid-row:1}}}@layer graupl.theme{.container{background-color:var(--graupl-container-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-container-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}}
|
|
1
|
+
@layer graupl.layout{.container{grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width,min(var(--graupl-container-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) * 2)), var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end];overflow-wrap:break-word;display:grid;container-type:inline-size}.container>.container{grid-column:1/-1;grid-template-columns:subgrid;container-type:normal}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .contain{grid-template-columns:subgrid;display:grid}.container .contain>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .breakout{grid-column:breakout}.container .feature{grid-column:feature}.container .full-width{grid-column:full-width}.container.sidebars .sidebar-left{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left){grid-column:content}.container.sidebars .sidebar-right{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .content>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}.container.sidebars-left .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-left .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-left .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-right .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}@media screen and (width>=1024px){.container.sidebars{--graupl-columns-content-max-width:var(--graupl-container-sidebars-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width,min(var(--graupl-container-sidebars-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars>.sidebar-left{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-left:not(.container),.container.sidebars>.sidebar-left:not(.container) .container,.container.sidebars>.sidebar-left:not(.container) .breakout,.container.sidebars>.sidebar-left:not(.container) .full-width,.container.sidebars>.sidebar-left:not(.container) .feature{grid-column-end:content-start}.container.sidebars>.sidebar-left>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-left .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-left}.container.sidebars>.sidebar-right{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-right:not(.container),.container.sidebars>.sidebar-right:not(.container) .container,.container.sidebars>.sidebar-right:not(.container) .breakout,.container.sidebars>.sidebar-right:not(.container) .full-width,.container.sidebars>.sidebar-right:not(.container) .feature{grid-column-start:content-end}.container.sidebars>.sidebar-right>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-right .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-right}.container.sidebars>.content{grid-row:1}.container.sidebars-left{--graupl-columns-content-max-width:var(--graupl-container-sidebars-left-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width,min(var(--graupl-container-sidebars-left-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars-left>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-left>.sidebar:not(.container),.container.sidebars-left>.sidebar:not(.container) .container,.container.sidebars-left>.sidebar:not(.container) .breakout,.container.sidebars-left>.sidebar:not(.container) .full-width,.container.sidebars-left>.sidebar:not(.container) .feature{grid-column-end:content-start}.container.sidebars-left>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-left>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-left>.content{grid-row:1}.container.sidebars-right{--graupl-columns-content-max-width:var(--graupl-container-sidebars-right-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width,min(var(--graupl-container-sidebars-right-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars-right>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-right>.sidebar:not(.container),.container.sidebars-right>.sidebar:not(.container) .container,.container.sidebars-right>.sidebar:not(.container) .breakout,.container.sidebars-right>.sidebar:not(.container) .full-width,.container.sidebars-right>.sidebar:not(.container) .feature{grid-column-start:content-end}.container.sidebars-right>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-right>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-right>.content{grid-row:1}}}@layer graupl.theme{.container{background:var(--graupl-container-background);color:var(--graupl-container-color)}}
|
|
2
2
|
/*# sourceMappingURL=container.css.map */
|