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

package/dist/css/init.css

@@ -1,2 +1,2 @@
-@layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;
-/*# sourceMappingURL=init.css.map */
+@layer graupl.normalize,graupl.base,graupl.layout,graupl.component,graupl.theme,graupl.utilities,graupl.state;
+/*# sourceMappingURL=init.css.map */

package/dist/css/init.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scss/_init.scss"],"names":[],"mappings":"AAKA,mHAAA","file":"init.css"}
+{"version":3,"sourceRoot":null,"mappings":"ACKA","sources":["dist/css/init.css","var/www/html/packages/core/src/scss/_init.scss"],"sourcesContent":["@layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;","// @graupl/core layer initialization styles.\n\n@use \"defaults\" as root-defaults;\n\n// Layer initialization.\n@layer #{root-defaults.$id}.normalize, #{root-defaults.$id}.base, #{root-defaults.$id}.layout, #{root-defaults.$id}.component, #{root-defaults.$id}.theme, #{root-defaults.$id}.utilities, #{root-defaults.$id}.state;\n"],"names":[]}

package/dist/css/layout/columns.css

@@ -1,2 +1,2 @@
-@layer graupl.layout{.columns{display:grid;gap:var(--graupl-columns-row-gap,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))) var(--graupl-columns-column-gap,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)));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))))}.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-6,.count-6 .span-7,.span-6{--graupl-columns-span:6}@container (width <= 47ch){.columns{--graupl-columns-min-width:1fr}.columns .span-1,.columns .span-2,.columns .span-3,.columns .span-4,.columns .span-5,.columns .span-6,.columns>*{--graupl-columns-span:1}}}
-/*# sourceMappingURL=columns.css.map */
+@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}}}
+/*# sourceMappingURL=columns.css.map */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/layout/columns/_index.scss","columns.css","../../../src/scss/mixins/_container.scss"],"names":[],"mappings":"AASI,qBCkEF,SACE,YAAA,CAEA,sLAAA,CADA,8ZCtEF,CDyEE,WACE,6CCvEJ,CD8EE,kBACE,6BC5EJ,CDkFE,SACE,wBChFJ,CD6FE,6FACE,uBC5EJ,CD6DE,SACE,wBC3DJ,CDwEE,4EACE,uBC1DJ,CD2CE,SACE,wBCzCJ,CDsDE,2DACE,uBC3CJ,CD4BE,SACE,wBC1BJ,CDuCE,0CACE,uBC/BJ,CDgBE,SACE,wBCdJ,CD2BE,yBACE,uBCtBJ,CDOE,SACE,wBCLJ,CDkBE,0CACE,uBCVJ,CC7EA,2BF8FE,SACE,8BCdF,CD0BI,iHACE,uBCNN,CACF,CACF","file":"columns.css"}
+{"version":3,"sourceRoot":null,"mappings":"AESI,qBCwEF,4lBAKE,yDAQA,gDAOA,kCAOI,qHAPJ,kCAOI,oGAPJ,kCAOI,mFAPJ,kCAOI,kEAPJ,kCAOI,iDAPJ,kCAOI,kECrFN,0BDoGE,wCAGE","sources":["dist/css/layout/columns.css","var/www/html/packages/core/src/scss/layout/columns/_variables.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/layout/columns/_index.scss","var/www/html/packages/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable  scss/operator-no-newline-after */\n@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}","// @graupl/core columns layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n  --#{root-defaults.$prefix}columns-row-gap,\n  #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n  --#{root-defaults.$prefix}columns-column-gap,\n  #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n  --#{root-defaults.$prefix}columns-count,\n  #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n  --#{root-defaults.$prefix}columns-content-max-width,\n  #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n  --#{root-defaults.$prefix}columns-min-width,\n  calc(\n    (\n        #{$columns-content-max-width} - #{$columns-column-gap} *\n          (#{$columns-count} - 1)\n      ) /\n      #{$columns-count}\n  )\n);\n/* stylelint-enable  scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n  --#{root-defaults.$prefix}columns-max-width,\n  #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n  --#{root-defaults.$prefix}columns-grid-template-columns,\n  repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n  --#{root-defaults.$prefix}columns-span,\n  #{defaults.$columns-span}\n);\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core 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//\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// | `$columns-selector-base`         | The base selector for the columns component.                       | `$selector-base` |\n// | `$columns-selector`              | The selector for the columns component.                            | `\"columns\"`      |\n// | `$columns-count-selector-base`   | The base selector for the count class.                             | `$selector-base` |\n// | `$columns-count-selector-prefix` | The prefix for the count class.                                    | `\"count-\"`       |\n// | `$columns-span-selector-base`    | The base selector for the span class.                              | `$selector-base` |\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//\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\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  @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","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n  $container-size: container.min($size);\n\n  @container (#{$container-size} <= width) {\n    @content;\n  }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n  $container-size: container.max($size);\n\n  @container (width <= #{$container-size}) {\n    @content;\n  }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n  $container-size: container.range($min, $max);\n  $min: map.get($container-size, \"min\");\n  $max: map.get($container-size, \"max\");\n\n  @container (#{$min} <= width <= #{$max}) {\n    @content;\n  }\n}\n\n@mixin only($size) {\n  @include between($size, $size) {\n    @content;\n  }\n}\n\n@mixin trigger($trigger) {\n  @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n    @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n  }\n\n  $container-size-trigger: map.get(\n    root-defaults.$container-size-triggers,\n    $trigger\n  );\n\n  @if not map.has-key($container-size-trigger, \"mixin\") {\n    @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n  }\n\n  @if not map.has-key($container-size-trigger, \"args\") {\n    @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n  }\n\n  $mixin-name: map.get($container-size-trigger, \"mixin\");\n  $mixin-args: map.get($container-size-trigger, \"args\");\n\n  @if not meta.mixin-exists($mixin-name) {\n    @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n  }\n\n  $mixin: meta.get-mixin($mixin-name);\n\n  @if meta.accepts-content($mixin) {\n    @include meta.apply($mixin, $mixin-args...) {\n      @content;\n    }\n  } @else {\n    @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n  }\n}\n"],"names":[]}

package/dist/css/layout/container.css

@@ -1,2 +1,2 @@
-@layer graupl.layout{.container{container-type:inline-size;display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),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)) + 15ch)) - 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-container-gap, 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,0),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)) + 15ch)) - 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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container>.container{container-type:normal;grid-column:1/-1;grid-template-columns:subgrid}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .contain{display:grid;grid-template-columns:subgrid}.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{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left){grid-column:content}.container.sidebars .sidebar-right{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content-right{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .content-right .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-right),.container.sidebars .content-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content-left{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .content-left .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .content-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}.container.sidebars .inner-content{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .inner-content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .inner-content>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}@media screen and (108ch <= width){.container.sidebars{grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),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)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start sidebar-left-start content-left-start] var(--graupl-container-sidebar-left-section-width,var(--graupl-container-sidebar-width,20ch)) [sidebar-left-end inner-content-start content-right-start] var(--graupl-container-inner-content-section-width,calc(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-container-gap, 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))))) - var(--graupl-container-sidebar-left-section-width, var(--graupl-container-sidebar-width, 20ch)) - var(--graupl-container-sidebar-right-section-width, var(--graupl-container-sidebar-width, 20ch)))) [content-left-end inner-content-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width,var(--graupl-container-sidebar-width,20ch)) [content-right-end sidebar-right-end content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),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)) + 15ch)) - 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,0),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)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,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}.container.sidebars .sidebar-left:not(.container),.container.sidebars .sidebar-left:not(.container) .breakout,.container.sidebars .sidebar-left:not(.container) .container,.container.sidebars .sidebar-left:not(.container) .feature,.container.sidebars .sidebar-left:not(.container) .full-width{grid-column-end:sidebar-left-end}.container.sidebars .sidebar-left .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-left}.container.sidebars .sidebar-right{grid-row:1}.container.sidebars .sidebar-right:not(.container),.container.sidebars .sidebar-right:not(.container) .breakout,.container.sidebars .sidebar-right:not(.container) .container,.container.sidebars .sidebar-right:not(.container) .feature,.container.sidebars .sidebar-right:not(.container) .full-width{grid-column-start:sidebar-right-start}.container.sidebars .sidebar-right .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-right}.container.sidebars .content-right{grid-row:1}.container.sidebars .content-right:not(.container),.container.sidebars .content-right:not(.container) .breakout,.container.sidebars .content-right:not(.container) .container,.container.sidebars .content-right:not(.container) .feature,.container.sidebars .content-right:not(.container) .full-width{grid-column-start:content-right-start}.container.sidebars .content-right .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .content-right>:not(.container,.breakout,.full-width,.feature){grid-column:content-right}.container.sidebars .content-left{grid-row:1}.container.sidebars .content-left:not(.container),.container.sidebars .content-left:not(.container) .breakout,.container.sidebars .content-left:not(.container) .container,.container.sidebars .content-left:not(.container) .feature,.container.sidebars .content-left:not(.container) .full-width{grid-column-end:content-left-end}.container.sidebars .content-left .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .content-left>:not(.container,.breakout,.full-width,.feature){grid-column:content-left}.container.sidebars .inner-content{grid-row:1}.container.sidebars .inner-content .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .inner-content:not(.container),.container.sidebars .inner-content:not(.container) .breakout,.container.sidebars .inner-content:not(.container) .container,.container.sidebars .inner-content:not(.container) .feature,.container.sidebars .inner-content:not(.container) .full-width,.container.sidebars .inner-content>:not(.container,.breakout,.full-width,.feature){grid-column:inner-content}}}
-/*# sourceMappingURL=container.css.map */
+@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{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>.content{grid-row:1}.container.sidebars-left{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{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}}}
+/*# sourceMappingURL=container.css.map */

package/dist/css/layout/container.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/layout/container/_index.scss","container.css","../../../src/scss/mixins/_screen.scss"],"names":[],"mappings":"AASI,qBCwIF,WAWE,0BAAA,CAVA,YAAA,CACA,m5FC1IF,CDyJE,sBAGE,qBAAA,CAFA,gBAAA,CACA,6BCtJJ,CD8JE,2DAME,mBC9JJ,CDqKE,oBACE,YAAA,CACA,6BCnKJ,CDsKI,oEAME,mBCtKN,CD6KE,qBACE,oBC3KJ,CD+KE,oBACE,mBC7KJ,CDiLE,uBACE,sBC/KJ,CDqLI,kCACE,YAAA,CACA,gBAAA,CACA,6BCnLN,CDsLM,gGAOE,mBCtLR,CD2LI,mCACE,YAAA,CACA,gBAAA,CACA,6BCzLN,CD4LM,kGAOE,mBC5LR,CDiMI,mCACE,YAAA,CACA,gBAAA,CACA,6BC/LN,CDkNQ,6MAOE,mBC3MV,CDiNI,kCACE,YAAA,CACA,gBAAA,CACA,6BC/MN,CDmOQ,uOAQE,mBC3NV,CDiOI,mCACE,YAAA,CACA,gBAAA,CACA,6BC/NN,CDmPQ,yOAQE,mBC3OV,CC9GA,mCFiWI,oBACE,mhHChPJ,CD6PI,kCACE,UC3PN,CDoQQ,oSAKE,gCClQV,CDwRQ,6KAME,wBClRV,CDwRI,mCACE,UCtRN,CD+RQ,ySAKE,qCC7RV,CDmTQ,+KAME,yBC7SV,CDmTI,mCACE,UCjTN,CD0TQ,ySAKE,qCCxTV,CD8UQ,+KAME,yBCxUV,CD8UI,kCACE,UC5UN,CDqVQ,oSAKE,gCCnVV,CDyWQ,6KAME,wBCnWV,CDyWI,mCACE,UCvWN,CD2YQ,wdAME,yBC9XV,CACF,CACF","file":"container.css"}
+{"version":3,"sourceRoot":null,"mappings":"AESI,qBCuMF,soGAkBE,2FAUA,+EAoDA,+DAKE,wFAaF,0CAKA,wCAKA,8CAOE,uHAOE,oHAYF,wHAOE,sHAYF,kHAOE,iPAkCF,uHAOE,+GAYF,uHAOE,mNAgCF,wHAOE,gHAYF,wHAOE,qNCxdN,kCDufI,61NAYE,sEAWI,kUAYF,sMA2BF,uEAWI,uUAYF,yMA0BF,iDAOF,4tKAYE,sEAWI,kUAYF,iMA2BF,6CAMF,muKAYE,uEAWI,uUAYF,mMA2BF","sources":["dist/css/layout/container.css","var/www/html/packages/core/src/scss/layout/container/_variables.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/layout/container/_index.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable  scss/operator-no-newline-after */\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable  scss/operator-no-newline-after */\n@layer graupl.layout {\n  .container {\n    display: grid;\n    grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width, min(var(--graupl-container-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)), var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n    container-type: inline-size;\n    overflow-wrap: break-word;\n  }\n  .container > .container {\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    container-type: normal;\n  }\n  .container > :not(.container,\n  .breakout,\n  .full-width,\n  .feature) {\n    grid-column: content;\n  }\n  .container .contain {\n    display: grid;\n    grid-template-columns: subgrid;\n  }\n  .container .contain > :not(.container,\n  .breakout,\n  .full-width,\n  .feature) {\n    grid-column: content;\n  }\n  .container .breakout {\n    grid-column: breakout;\n  }\n  .container .feature {\n    grid-column: feature;\n  }\n  .container .full-width {\n    grid-column: full-width;\n  }\n  .container.sidebars .sidebar-left {\n    display: grid;\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    align-content: flex-start;\n  }\n  .container.sidebars .sidebar-left > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar-left) {\n    grid-column: content;\n  }\n  .container.sidebars .sidebar-right {\n    display: grid;\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    align-content: flex-start;\n  }\n  .container.sidebars .sidebar-right > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar-right) {\n    grid-column: content;\n  }\n  .container.sidebars .content {\n    display: grid;\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    align-content: flex-start;\n  }\n  .container.sidebars .content > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar-left,\n  .sidebar-right) {\n    grid-column: content;\n  }\n  .container.sidebars .content .contain > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar-left,\n  .sidebar-right) {\n    grid-column: content;\n  }\n  .container.sidebars-left .sidebar {\n    display: grid;\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    align-content: flex-start;\n  }\n  .container.sidebars-left .sidebar > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar) {\n    grid-column: content;\n  }\n  .container.sidebars-left .content {\n    display: grid;\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    align-content: flex-start;\n  }\n  .container.sidebars-left .content > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar) {\n    grid-column: content;\n  }\n  .container.sidebars-left .content .contain > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar) {\n    grid-column: content;\n  }\n  .container.sidebars-right .sidebar {\n    display: grid;\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    align-content: flex-start;\n  }\n  .container.sidebars-right .sidebar > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar) {\n    grid-column: content;\n  }\n  .container.sidebars-right .content {\n    display: grid;\n    grid-column: 1/-1;\n    grid-template-columns: subgrid;\n    align-content: flex-start;\n  }\n  .container.sidebars-right .content > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar) {\n    grid-column: content;\n  }\n  .container.sidebars-right .content .contain > :not(.container,\n  .breakout,\n  .full-width,\n  .feature,\n  .sidebar) {\n    grid-column: content;\n  }\n  @media screen and (1024px <= width) {\n    .container.sidebars {\n      grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width, min(var(--graupl-container-sidebars-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n    }\n    .container.sidebars > .sidebar-left {\n      grid-row: 1/-1;\n      grid-template: subgrid;\n    }\n    .container.sidebars > .sidebar-left:not(.container),\n    .container.sidebars > .sidebar-left:not(.container) .container,\n    .container.sidebars > .sidebar-left:not(.container) .breakout,\n    .container.sidebars > .sidebar-left:not(.container) .full-width,\n    .container.sidebars > .sidebar-left:not(.container) .feature {\n      grid-column-end: content-start;\n    }\n    .container.sidebars > .sidebar-left > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar-left;\n    }\n    .container.sidebars > .sidebar-left .contain > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar-left;\n    }\n    .container.sidebars > .sidebar-right {\n      grid-row: 1/-1;\n      grid-template: subgrid;\n    }\n    .container.sidebars > .sidebar-right:not(.container),\n    .container.sidebars > .sidebar-right:not(.container) .container,\n    .container.sidebars > .sidebar-right:not(.container) .breakout,\n    .container.sidebars > .sidebar-right:not(.container) .full-width,\n    .container.sidebars > .sidebar-right:not(.container) .feature {\n      grid-column-start: content-end;\n    }\n    .container.sidebars > .sidebar-right > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar-right;\n    }\n    .container.sidebars > .sidebar-right .contain > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar-right;\n    }\n    .container.sidebars > .content > .content {\n      grid-row: 1;\n    }\n    .container.sidebars-left {\n      grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width, min(var(--graupl-container-sidebars-left-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n    }\n    .container.sidebars-left > .sidebar {\n      grid-row: 1/-1;\n      grid-template: subgrid;\n    }\n    .container.sidebars-left > .sidebar:not(.container),\n    .container.sidebars-left > .sidebar:not(.container) .container,\n    .container.sidebars-left > .sidebar:not(.container) .breakout,\n    .container.sidebars-left > .sidebar:not(.container) .full-width,\n    .container.sidebars-left > .sidebar:not(.container) .feature {\n      grid-column-end: content-start;\n    }\n    .container.sidebars-left > .sidebar > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar;\n    }\n    .container.sidebars-left > .sidebar .contain > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar;\n    }\n    .container.sidebars-left > .content {\n      grid-row: 1;\n    }\n    .container.sidebars-right {\n      grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width, min(var(--graupl-container-sidebars-right-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n    }\n    .container.sidebars-right > .sidebar {\n      grid-row: 1/-1;\n      grid-template: subgrid;\n    }\n    .container.sidebars-right > .sidebar:not(.container),\n    .container.sidebars-right > .sidebar:not(.container) .container,\n    .container.sidebars-right > .sidebar:not(.container) .breakout,\n    .container.sidebars-right > .sidebar:not(.container) .full-width,\n    .container.sidebars-right > .sidebar:not(.container) .feature {\n      grid-column-start: content-end;\n    }\n    .container.sidebars-right > .sidebar > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar;\n    }\n    .container.sidebars-right > .sidebar .contain > :not(.container,\n    .breakout,\n    .full-width,\n    .feature) {\n      grid-column: sidebar;\n    }\n    .container.sidebars-right > .content {\n      grid-row: 1;\n    }\n  }\n}","// @graupl/core container layout variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// --graupl-container-sidebar-width\n$container-sidebar-width: var(\n  --#{root-defaults.$prefix}container-sidebar-width,\n  #{defaults.$container-sidebar-width}\n);\n\n// --graupl-container-breakout-width\n$container-breakout-width: var(\n  --#{root-defaults.$prefix}container-breakout-width,\n  #{defaults.$container-breakout-width}\n);\n\n// --graupl-container-feature-width\n$container-feature-width: var(\n  --#{root-defaults.$prefix}container-feature-width,\n  #{defaults.$container-feature-width}\n);\n\n// --graupl-container-content-max-width\n$container-content-max-width: var(\n  --#{root-defaults.$prefix}container-content-max-width,\n  #{root-variables.$content-max-width}\n);\n\n// --graupl-container-breakout-max-width\n$container-breakout-max-width: var(\n  --#{root-defaults.$prefix}container-breakout-max-width,\n  calc(#{$container-content-max-width} + #{$container-breakout-width})\n);\n\n// --graupl-container-feature-max-width\n$container-feature-max-width: var(\n  --#{root-defaults.$prefix}container-feature-max-width,\n  calc(#{$container-breakout-max-width} + #{$container-feature-width})\n);\n\n// --graupl-container-full-width-section-min-width\n$container-full-width-section-min-width: var(\n  --#{root-defaults.$prefix}container-full-width-section-min-width,\n  #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-container-full-width-section-max-width\n$container-full-width-section-max-width: var(\n  --#{root-defaults.$prefix}container-full-width-section-max-width,\n  1fr\n);\n\n// --graupl-container-feature-section-min-width\n$container-feature-section-min-width: var(\n  --#{root-defaults.$prefix}container-feature-section-min-width,\n  0rem\n);\n\n// --graupl-container-feature-section-max-width\n$container-feature-section-max-width: var(\n  --#{root-defaults.$prefix}container-feature-section-max-width,\n  calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)\n);\n\n// --graupl-container-breakout-section-min-width\n$container-breakout-section-min-width: var(\n  --#{root-defaults.$prefix}container-breakout-section-min-width,\n  0rem\n);\n\n// --graupl-container-breakout-section-max-width\n$container-breakout-section-max-width: var(\n  --#{root-defaults.$prefix}container-breakout-section-max-width,\n  calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-content-section-min-width\n$container-content-section-min-width: var(\n  --#{root-defaults.$prefix}container-content-section-min-width,\n  calc(\n    100% - (#{$container-full-width-section-min-width} * 2) -\n      (#{$container-feature-section-min-width} * 2) -\n      (#{$container-breakout-section-min-width} * 2)\n  )\n);\n/* stylelint-enable  scss/operator-no-newline-after */\n// --graupl-container-content-section-max-width\n$container-content-section-max-width: var(\n  --#{root-defaults.$prefix}container-content-section-max-width,\n  #{$container-content-max-width}\n);\n\n// --graupl-container-full-width-section-width\n$container-full-width-section-width: var(\n  --#{root-defaults.$prefix}container-full-width-section-width,\n  minmax(\n    #{$container-full-width-section-min-width},\n    #{$container-full-width-section-max-width}\n  )\n);\n\n// --graupl-container-feature-section-width\n$container-feature-section-width: var(\n  --#{root-defaults.$prefix}container-feature-section-width,\n  minmax(\n    #{$container-feature-section-min-width},\n    #{$container-feature-section-max-width}\n  )\n);\n\n// --graupl-container-breakout-section-width\n$container-breakout-section-width: var(\n  --#{root-defaults.$prefix}container-breakout-section-width,\n  minmax(\n    #{$container-breakout-section-min-width},\n    #{$container-breakout-section-max-width}\n  )\n);\n\n// --graupl-container-content-section-width\n$container-content-section-width: var(\n  --#{root-defaults.$prefix}container-content-section-width,\n  min(\n    #{$container-content-section-min-width},\n    #{$container-content-section-max-width}\n  )\n);\n\n// --graupl-container-sidebar-left-section-width\n$container-sidebar-left-section-width: var(\n  --#{root-defaults.$prefix}container-sidebar-left-section-width,\n  max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebar-right-section-width\n$container-sidebar-right-section-width: var(\n  --#{root-defaults.$prefix}container-sidebar-right-section-width,\n  max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebars-breakout-section-width\n$container-sidebars-breakout-section-width: var(\n  --#{root-defaults.$prefix}container-sidebars-breakout-section-width,\n  #{$container-breakout-section-max-width}\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-sidebars-content-section-min-width\n$container-sidebars-content-section-min-width: var(\n  --#{root-defaults.$prefix}container-sidebars-content-section-min-width,\n  calc(\n    100% - (#{$container-full-width-section-min-width} * 2) -\n      (#{$container-feature-section-min-width} * 2) -\n      (#{$container-sidebars-breakout-section-width} * 2) -\n      #{$container-sidebar-left-section-width} -\n      #{$container-sidebar-right-section-width}\n  )\n);\n\n// --graupl-container-sidebars-content-section-max-width\n$container-sidebars-content-section-max-width: var(\n  --#{root-defaults.$prefix}container-sidebars-content-section-max-width,\n  calc(\n    #{$container-content-section-max-width} -\n      #{$container-sidebar-left-section-width} -\n      #{$container-sidebar-right-section-width} +\n      min($container-sidebar-width, $container-feature-section-max-width) +\n      min($container-sidebar-width, $container-feature-section-max-width)\n  )\n);\n\n// --graupl-container-sidebars-content-section-width\n$container-sidebars-content-section-width: var(\n  --#{root-defaults.$prefix}container-sidebars-content-section-width,\n  min(\n    #{$container-sidebars-content-section-min-width},\n    #{$container-sidebars-content-section-max-width}\n  )\n);\n\n// --graupl-container-sidebars-right-content-section-min-width\n$container-sidebars-right-content-section-min-width: var(\n  --#{root-defaults.$prefix}container-sidebars-right-content-section-min-width,\n  calc(\n    100% - (#{$container-full-width-section-min-width} * 2) -\n      (#{$container-feature-section-min-width} * 2) -\n      #{$container-breakout-section-min-width} -\n      #{$container-sidebars-breakout-section-width} -\n      #{$container-sidebar-right-section-width}\n  )\n);\n\n// --graupl-container-sidebars-right-content-section-max-width\n$container-sidebars-right-content-section-max-width: var(\n  --#{root-defaults.$prefix}container-sidebars-right-content-section-max-width,\n  calc(\n    #{$container-content-section-max-width} -\n      #{$container-sidebar-right-section-width} +\n      min($container-sidebar-width, $container-feature-section-max-width)\n  )\n);\n\n// --graupl-container-sidebars-right-content-section-width\n$container-sidebars-right-content-section-width: var(\n  --#{root-defaults.$prefix}container-sidebars-right-content-section-width,\n  min(\n    $container-sidebars-right-content-section-min-width,\n    $container-sidebars-right-content-section-max-width\n  )\n);\n\n// --graupl-container-sidebars-left-content-section-min-width\n$container-sidebars-left-content-section-min-width: var(\n  --#{root-defaults.$prefix}container-sidebars-left-content-section-min-width,\n  calc(\n    100% - (#{$container-full-width-section-min-width} * 2) -\n      (#{$container-feature-section-min-width} * 2) -\n      #{$container-breakout-section-min-width} -\n      #{$container-sidebars-breakout-section-width} -\n      #{$container-sidebar-left-section-width}\n  )\n);\n\n// --graupl-container-sidebars-left-content-section-max-width\n$container-sidebars-left-content-section-max-width: var(\n  --#{root-defaults.$prefix}container-sidebars-left-content-section-max-width,\n  calc(\n    #{$container-content-section-max-width} -\n      #{$container-sidebar-left-section-width} +\n      min($container-sidebar-width, $container-feature-section-max-width)\n  )\n);\n\n// --graupl-container-sidebars-left-content-section-width\n$container-sidebars-left-content-section-width: var(\n  --#{root-defaults.$prefix}container-sidebars-left-content-section-width,\n  min(\n    $container-sidebars-left-content-section-min-width,\n    $container-sidebars-left-content-section-max-width\n  )\n);\n/* stylelint-enable  scss/operator-no-newline-after */\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core container layout styles.\n//\n// This module provides the layout styles for the container component.\n//\n// The container component is a grid container that provides a layout for the main content of a page.\n// It is divided into four sections:\n// - Full-width: A full-width section that spans the entire width of the container.\n// - Feature: A feature section that is used for feature content.\n// - Breakout: A breakout section that is used for breakout content.\n// - Content: The main content section that contains all other content.\n//\n// Optionally, the container component can have sidebars, which divides the content section into five sections:\n// - Sidebar-left: A left sidebar section that is used for sidebar content.\n// - Sidebar-right: A right sidebar section that is used for sidebar content.\n// - Inner-content: A section that contains the main content of the page.\n// - Content-left: A section that contains the sidebar-left and inner-content sections.\n// - Content-right: A section that contains the inner-content and sidebar-right sections.\n//\n// The container layout is as follows:\n// | full-width | feature | breakout | content | breakout | feature | full-width |\n//\n// Nesting a container directly inside of another container will cause the\n// nested container to inherit the grid columns of the parent container.\n//\n// The following classes are generated by default:\n// - `.container`: The main container component.\n// - `.full-width`: A full-width container component.\n// - `.feature`: A feature container component.\n// - `.breakout`: A breakout container component.\n// - `.contain`: A utility class to contain child elements to the content section of the container grid.\n// - `.sidebars`: A utility class to enable two sidebars in the container.\n// - `.sidebars-left`: A utility class to enable a left sidebar in the container.\n// - `.sidebars-right`: A utility class to enable a right sidebar in the container.\n// - `.sidebar-left`: A left sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar-right`: A right sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar`: A sidebar container component used directly inside of a container with sidebars.\n// - `.content`: A content container component used directly inside of a container with sidebars.\n//\n// The following custom properties can be used to customize the container component:\n// | Property                                                      | Description                                                                         | Default Value                                                                                                                                                                                                                                                                                                                                                        |\n// | ---                                                           | ---                                                                                 | ---                                                                                                                                                                                                                                                                                                                                                                  |\n// | `--graupl-container-sidebar-width`                            | The width of the sidebar sections.                                                  | `26ch`                                                                                                                                                                                                                                                                                                                                                               |\n// | `--graupl-container-breakout-width`                           | The width that the breakout section will extend beyond the content.                 | `4ch`                                                                                                                                                                                                                                                                                                                                                                |\n// | `--graupl-container-feature-width`                            | The width that the feature section will extend beyond the breakout.                 | `10ch`                                                                                                                                                                                                                                                                                                                                                               |\n// | `--graupl-container-content-max-width`                        | The maximum width of the content section.                                           | `var(--graupl-content-max-width)`                                                                                                                                                                                                                                                                                                                                    |\n// | `--graupl-container-breakout-max-width`                       | The maximum width of the breakout section.                                          | `calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width))`                                                                                                                                                                                                                                                                           |\n// | `--graupl-container-feature-max-width`                        | The maximum width of the feature section.                                           | `calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width))`                                                                                                                                                                                                                                                                           |\n// | `--graupl-container-full-width-section-min-width`             | The minimum width of one side of the full-width section.                            | `var(--graupl-spacer-5)`                                                                                                                                                                                                                                                                                                                                             |\n// | `--graupl-container-full-width-section-max-width`             | The maximum width of one side of the full-width section.                            | `1fr`                                                                                                                                                                                                                                                                                                                                                                |\n// | `--graupl-container-feature-section-min-width`                | The minimum width of one side of the feature section.                               | `0rem`                                                                                                                                                                                                                                                                                                                                                               |\n// | `--graupl-container-feature-section-max-width`                | The maximum width of one side of the feature section.                               | `calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2)`                                                                                                                                                                                                                                                                 |\n// | `--graupl-container-breakout-section-min-width`               | The minimum width of one side of the breakout section.                              | `0rem`                                                                                                                                                                                                                                                                                                                                                               |\n// | `--graupl-container-breakout-section-max-width`               | The maximum width of one side of the breakout section.                              | `calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2)`                                                                                                                                                                                                                                                                 |\n// | `--graupl-container-content-section-min-width`                | The minimum width of the content section.                                           | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2))`                                                                                                                                                                       |\n// | `--graupl-container-content-section-max-width`                | The maximum width of the content section.                                           | `var(--graupl-container-content-max-width)`                                                                                                                                                                                                                                                                                                                          |\n// | `--graupl-container-full-width-section-width`                 | The calculated minmax width of the full-width section.                              | `minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width))`                                                                                                                                                                                                                                                 |\n// | `--graupl-container-feature-section-width`                    | The calculated minmax width of the feature section.                                 | `minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width))`                                                                                                                                                                                                                                                       |\n// | `--graupl-container-breakout-section-width`                   | The calculated minmax width of the breakout section.                                | `minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width))`                                                                                                                                                                                                                                                     |\n// | `--graupl-container-content-section-width`                    | The calculated width of the content section.                                        | `min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width))`                                                                                                                                                                                                                                                          |\n// | `--graupl-container-sidebar-left-section-width`               | The width of the left sidebar section.                                              | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))`                                                                                                                                                                                                                                                                      |\n// | `--graupl-container-sidebar-right-section-width`              | The width of the right sidebar section.                                             | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))`                                                                                                                                                                                                                                                                      |\n// | `--graupl-container-sidebars-breakout-section-width`          | The breakout width when both sidebars are enabled.                                  | `var(--graupl-container-breakout-section-max-width)`                                                                                                                                                                                                                                                                                                                 |\n// | `--graupl-container-sidebars-content-section-min-width`       | The minimum width of the content section when both sidebars are enabled.            | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width))`                                                       |\n// | `--graupl-container-sidebars-content-section-max-width`       | The maximum width of the content section when both sidebars are enabled.            | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-content-section-width`           | The calculated width of the content section when both sidebars are enabled.         | `min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width))`                                                                                                                                                                                                                                        |\n// | `--graupl-container-sidebars-right-content-section-min-width` | The minimum width of the content section when only the right sidebar is enabled.    | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width))`                                                             |\n// | `--graupl-container-sidebars-right-content-section-max-width` | The maximum width of the content section when only the right sidebar is enabled.    | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))`                                                                                                                                                      |\n// | `--graupl-container-sidebars-right-content-section-width`     | The calculated width of the content section when only the right sidebar is enabled. | `min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width))`                                                                                                                                                                                                                            |\n// | `--graupl-container-sidebars-left-content-section-min-width`  | The minimum width of the content section when only the left sidebar is enabled.     | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width))`                                                              |\n// | `--graupl-container-sidebars-left-content-section-max-width`  | The maximum width of the content section when only the left sidebar is enabled.     | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))`                                                                                                                                                       |\n// | `--graupl-container-sidebars-left-content-section-width`      | The calculated width of the content section when only the left sidebar is enabled.  | `min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width))`                                                                                                                                                                                                                              |\n//\n// The following sass variables can be used to customize the generation of the container component:\n// | Variable                              | Description                                                                  | Default Value             |\n// | ---                                   | ---                                                                          | ---                       |\n// | `$selector-base`                      | The selector base for the component.                                         | `.`                       |\n// | `$modifier-selector-base`             | The selector base for component modifiers.                                   | `.`                       |\n// | `$force-container-chaining`           | A flag to force container chaining in all containers.                        | `false`                   |\n// | `$generate-forced-container-selectors | A flag to generate a set of default selectors for forced container chaining. | `true`                    |\n// | `$show-warnings`                      | A flag to show any built-in warnings that may be output during compiling.    | `true`                    |\n// | `$container-selector-base`            | The base selector for the container component.                               | `$selector-base`          |\n// | `$container-selector`                 | The selector for the container component.                                    | `container`               |\n// | `$container-breakout-selector-base`   | The base selector for the breakout container component.                      | `$selector-base`          |\n// | `$container-breakout-selector`        | The selector for the breakout container component.                           | `breakout`                |\n// | `$container-feature-selector-base`    | The base selector for the feature container component.                       | `$selector-base`          |\n// | `$container-feature-selector`         | The selector for the feature container component.                            | `feature`                 |\n// | `$container-full-width-selector-base` | The base selector for the full-width container component.                    | `$selector-base`          |\n// | `$container-full-width-selector`      | The selector for the full-width container component.                         | `full-width`              |\n// | `$container-contain-selector-base`    | The base selector for the contain utility class.                             | `$modifier-selector-base` |\n// | `$container-contain-selector`         | The selector for the contain utility class.                                  | `contain`                 |\n// | `$container-sidebars-selector-base`   | The base selector for the sidebars utility class.                            | `$modifier-selector-base` |\n// | `$container-sidebars-selector`        | The selector for the sidebars utility class.                                 | `sidebars`                |\n// | `$container-content-selector-base`    | The base selector for the content container component.                       | `$selector-base`          |\n// | `$container-content-selector`         | The selector for the content container component.                            | `content`                 |\n// | `$container-sidebar-selector-base`    | The base selector for the sidebar container component.                       | `$selector-base`          |\n// | `$container-sidebar-selector`         | The selector for the sidebar container component.                            | `sidebar`                 |\n// | `$container-left-selector-suffix`     | The suffix for the left sidebar selector.                                    | `-left`                   |\n// | `$container-right-selector-suffix`    | The suffix for the right sidebar selector.                                   | `-right`                  |\n// | `$container-inner-selector-prefix`    | The prefix for the inner content selector.                                   | `inner-`                  |\n// | `$container-breakout-width`           | The width of the breakout section will extend from the content section.      | `4ch`                     |\n// | `$container-feature-width`            | The width of the feature section will extend from the breakout section.      | `10ch`                    |\n// | `$container-sidebar-width`            | The width of the sidebar sections.                                           | `26ch`                    |\n//\n// ## What is container chaining?\n//\n// Container chaining is a structural setup in the DOM in which you make sure that if you have nested containers or container-level elements (breakouts, features, etc.), you never allow them to be contained in anything other than a container.\n//\n// What do I mean by this?\n//\n// If you have to following setup in your DOM:\n//\n// ```\n//   <div class=\"container\">\n//     <p>Some content here...</p>\n//     <section>\n//       <p>Some content here...</p>\n//       <div class=\"breakout\">\n//         <p>Some content here that I would like to breakout...</p>\n//       </div>\n//       <p>Some content here...</p>\n//     </section>\n//   </div>\n// ```\n//\n//  To achieve a breakout of the content inside of the <section>, you need to make sure the section is also a container, otherwise the breakout class will have no effect.\n//\n// ```\n//   <div class=\"container\">\n//     <p>Some content here...</p>\n//     <section class=\"container\">\n//       <p>Some content here...</p>\n//       <div class=\"breakout\">\n//         <p>Some content here that I would like to breakout...</p>\n//       </div>\n//       <p>Some content here...</p>\n//     </section>\n//   </div>\n// ```\n//\n// There _is_ a feature flag (`$force-container-chaining`) which automatically set up container chaining for you.\n//\n// This works by selecting all elements between a parent and child container and making them inherit the parent's layout.\n//\n// Because you have control over how this is limited, it can result in using an unrestricted :has() selector, which can be slow.\n//\n// @example\n//   <div class=\"container\">\n//     Regular content\n//     <div class=\"full-width\">\n//       Full-width content\n//     </div>\n//     <div class=\"feature\">\n//       Feature content\n//     </div>\n//     <div class=\"breakout\">\n//       Breakout content\n//     </div>\n//   </div>\n//\n// @example\n//   <div class=\"container\">\n//     Regular content\n//     <div class=\"feature contain\">\n//       Contained feature content\n//     </div>\n//   </div>\n//\n// @example\n//   <div class=\"container sidebars-left\">\n//     <div class=\"sidebar\">\n//       Left sidebar content\n//     </div>\n//     <div class=\"content\">\n//       Content right content\n//     </div>\n//   </div>\n//\n// @example\n//   <div class=\"container sidebars-right\">\n//     <div class=\"content\">\n//       Content left content\n//     </div>\n//     <div class=\"sidebar\">\n//       Right sidebar content\n//     </div>\n//   </div>\n//\n// @example\n//   <div class=\"container sidebars\">\n//     <div class=\"sidebar-left\">\n//       Left sidebar content\n//     </div>\n//     <div class=\"content\">\n//       Inner content content\n//     </div>\n//     <div class=\"sidebar-right\">\n//       Right sidebar content\n//     </div>\n//   </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"defaults\";\n@use \"variables\" as *;\n\n@include layer(layout) {\n  // .container\n  #{defaults.$container-selector-base}#{defaults.$container-selector} {\n    display: grid;\n    grid-template-columns:\n      [full-width-start] $container-full-width-section-width\n      [feature-start] $container-feature-section-width\n      [breakout-start] $container-breakout-section-width\n      [content-start] $container-content-section-width\n      [content-end]\n      $container-breakout-section-width [breakout-end]\n      $container-feature-section-width [feature-end]\n      $container-full-width-section-width [full-width-end];\n    container-type: inline-size;\n    overflow-wrap: break-word;\n\n    // Container components should span the full width of their parent container\n    // and inherit the grid columns.\n    //\n    // > .container\n    > #{defaults.$container-selector-base}#{defaults.$container-selector} {\n      grid-column: 1/-1;\n      grid-template-columns: subgrid;\n      container-type: normal;\n    }\n\n    // Everything in the container that isn't a container component should\n    // be in the content section.\n    //\n    // > :not(.container, .breakout, .feature, .full-width)\n    > :not(\n      #{defaults.$container-selector-base}#{defaults.$container-selector},\n      #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n      #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n      #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n    ) {\n      grid-column: content;\n    }\n\n    // Handle force chaining.\n    //\n    // This works by selecting all elements between a parent and child container\n    // and making them inherit the parent's layout.\n    //\n    // Because you have control over how this is limited, it can result in using\n    // an unrestricted :has() selector, which can be slow.\n    @if defaults.$force-container-chaining {\n      @if defaults.$show-warnings and root-defaults.$show-warnings {\n        @warn (\"You have enabled automatic container chaining. This can result in an unrestricted :has() selector if you customize $forced-container-selectors to be too broad, which can be slow. Make sure you know what you're doing with this.\");\n      }\n\n      // .container :is(article,aside,div,section):not(.container):has(&)\n      #{defaults.$container-selector-base}#{defaults.$container-selector}\n        :is(#{defaults.$forced-container-selectors}):not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector}\n        ):has(&) {\n        display: grid;\n        grid-column: 1/-1;\n        grid-template-columns: subgrid;\n        container-type: normal;\n\n        // .container\n        #{defaults.$container-selector-base}#{defaults.$container-selector} {\n          grid-column: 1/-1;\n          container-type: normal;\n\n          // &:not(.sidebars, .sidebars-left, .sidebars-right)\n          &:not(\n            #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector},\n            #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix},\n            #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix}\n          ) {\n            grid-template-columns: subgrid;\n          }\n        }\n      }\n    }\n\n    // Contain components should inherit the container's grid columns and\n    // force all children to be in the content section.\n    //\n    // > .contain\n    #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n      display: grid;\n      grid-template-columns: subgrid;\n\n      // > :not(.container, .breakout, .feature, .full-width)\n      > :not(\n        #{defaults.$container-selector-base}#{defaults.$container-selector},\n        #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n        #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n        #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n      ) {\n        grid-column: content;\n      }\n    }\n\n    // Set up the container components to span the appropriate grid columns.\n    //\n    // .breakout\n    #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {\n      grid-column: breakout;\n    }\n\n    // .feature\n    #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n      grid-column: feature;\n    }\n\n    // .full-width\n    #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {\n      grid-column: full-width;\n    }\n\n    // &.sidebars\n    &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n      // .sidebar-left\n      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n        display: grid;\n        grid-column: 1 / -1;\n        grid-template-columns: subgrid;\n        align-content: flex-start;\n\n        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)\n        > :not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector},\n          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}\n        ) {\n          grid-column: content;\n        }\n      }\n\n      // .sidebar-right\n      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n        display: grid;\n        grid-column: 1 / -1;\n        grid-template-columns: subgrid;\n        align-content: flex-start;\n\n        // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)\n        > :not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector},\n          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n        ) {\n          grid-column: content;\n        }\n      }\n\n      // .content\n      #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n        display: grid;\n        grid-column: 1 / -1;\n        grid-template-columns: subgrid;\n        align-content: flex-start;\n\n        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n        > :not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector},\n          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n        ) {\n          grid-column: content;\n        }\n\n        // Contain components should inherit the container's grid columns and\n        // force all children to be in the content section.\n        //\n        // .contain\n        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n          // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n          > :not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n          ) {\n            grid-column: content;\n          }\n        }\n      }\n    }\n\n    // &.sidebars-left\n    &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n      // .sidebar\n      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n        display: grid;\n        grid-column: 1 / -1;\n        grid-template-columns: subgrid;\n        align-content: flex-start;\n\n        // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n        > :not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector},\n          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n        ) {\n          grid-column: content;\n        }\n      }\n\n      // .content\n      #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n        display: grid;\n        grid-column: 1 / -1;\n        grid-template-columns: subgrid;\n        align-content: flex-start;\n\n        // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n        > :not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector},\n          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n        ) {\n          grid-column: content;\n        }\n\n        // Contain components should inherit the container's grid columns and\n        // force all children to be in the content section.\n        //\n        // .contain\n        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n          // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n          > :not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n          ) {\n            grid-column: content;\n          }\n        }\n      }\n    }\n\n    // &.sidebars-right\n    &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n      // .sidebar\n      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n        display: grid;\n        grid-column: 1 / -1;\n        grid-template-columns: subgrid;\n        align-content: flex-start;\n\n        // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n        > :not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector},\n          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n        ) {\n          grid-column: content;\n        }\n      }\n\n      // .content\n      #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n        display: grid;\n        grid-column: 1 / -1;\n        grid-template-columns: subgrid;\n        align-content: flex-start;\n\n        // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n        > :not(\n          #{defaults.$container-selector-base}#{defaults.$container-selector},\n          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n          #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n        ) {\n          grid-column: content;\n        }\n\n        // Contain components should inherit the container's grid columns and\n        // force all children to be in the content section.\n        //\n        // .contain\n        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n          // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n          > :not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n          ) {\n            grid-column: content;\n          }\n        }\n      }\n    }\n\n    @include screen.trigger(allow-sidebars) {\n      // &.sidebars\n      &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n        grid-template-columns:\n          [full-width-start] $container-full-width-section-width\n          [sidebar-left-start feature-start] $container-sidebar-left-section-width\n          [sidebar-left-end breakout-start] $container-sidebars-breakout-section-width\n          [content-start] $container-sidebars-content-section-width\n          [content-end] $container-sidebars-breakout-section-width\n          [breakout-end sidebar-right-start] $container-sidebar-right-section-width\n          [feature-end sidebar-right-end] $container-full-width-section-width\n          [full-width-end];\n\n        // > .sidebar-left\n        > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n          grid-row: 1 / -1;\n          grid-template: subgrid;\n\n          // Make sure other container classes do not break the layout inside of the sidebar.\n          //\n          // &:not(.container)\n          &:not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector}\n          ) {\n            // &, .container, .breakout, .feature, .full-width\n            &,\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n              grid-column-end: content-start;\n            }\n          }\n\n          // Lock content to the sidebar-left section.\n          //\n          // > :not(.container, .breakout, .feature, .full-width)\n          > :not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n          ) {\n            grid-column: sidebar-left;\n          }\n\n          // Contain components should inherit the container's grid columns and\n          // force all children to be in the sidebar-left section.\n          //\n          // > .contain\n          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n            // > :not(.container, .breakout, .feature, .full-width)\n            > :not(\n              #{defaults.$container-selector-base}#{defaults.$container-selector},\n              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n            ) {\n              grid-column: sidebar-left;\n            }\n          }\n        }\n\n        // > .sidebar-right\n        > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n          grid-row: 1 / -1;\n          grid-template: subgrid;\n\n          // Make sure other container classes do not break the layout inside of the sidebar.\n          //\n          // &:not(.container)\n          &:not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector}\n          ) {\n            // &, .container, .breakout, .feature, .full-width\n            &,\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n              grid-column-start: content-end;\n            }\n          }\n\n          // Lock content to the sidebar-right section.\n          //\n          // > :not(.container, .breakout, .feature, .full-width)\n          > :not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n          ) {\n            grid-column: sidebar-right;\n          }\n\n          // Contain components should inherit the container's grid columns and\n          // force all children to be in the sidebar-right section.\n          //\n          // > .contain\n          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n            // > :not(.container, .breakout, .feature, .full-width)\n            > :not(\n              #{defaults.$container-selector-base}#{defaults.$container-selector},\n              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n            ) {\n              grid-column: sidebar-right;\n            }\n          }\n        }\n\n        > .content\n          > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n          grid-row: 1;\n        }\n      }\n\n      // &.sidebars-left\n      &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n        grid-template-columns:\n          [full-width-start] $container-full-width-section-width\n          [sidebar-start feature-start] $container-sidebar-left-section-width\n          [sidebar-end breakout-start] $container-sidebars-breakout-section-width\n          [content-start] $container-sidebars-left-content-section-width\n          [content-end] $container-breakout-section-width\n          [breakout-end] $container-feature-section-width\n          [feature-end] $container-full-width-section-width\n          [full-width-end];\n\n        // > .sidebar\n        > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n          grid-row: 1 / -1;\n          grid-template: subgrid;\n\n          // Make sure other container classes do not break the layout inside of the sidebar.\n          //\n          // &:not(.container)\n          &:not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector}\n          ) {\n            // &, .container, .breakout, .feature, .full-width\n            &,\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n              grid-column-end: content-start;\n            }\n          }\n\n          // Lock content to the sidebar section.\n          //\n          // > :not(.container, .breakout, .feature, .full-width)\n          > :not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n          ) {\n            grid-column: sidebar;\n          }\n\n          // Contain components should inherit the container's grid columns and\n          // force all children to be in the sidebar section.\n          //\n          // > .contain\n          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n            // > :not(.container, .breakout, .feature, .full-width)\n            > :not(\n              #{defaults.$container-selector-base}#{defaults.$container-selector},\n              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n            ) {\n              grid-column: sidebar;\n            }\n          }\n        }\n\n        // > .content\n        > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n          grid-row: 1;\n        }\n      }\n\n      // &.sidebars-right\n      &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n        grid-template-columns:\n          [full-width-start] $container-full-width-section-width\n          [feature-start] $container-feature-section-width\n          [breakout-start] $container-breakout-section-width\n          [content-start] $container-sidebars-right-content-section-width\n          [content-end] $container-sidebars-breakout-section-width\n          [breakout-end sidebar-start] $container-sidebar-right-section-width\n          [feature-end sidebar-end] $container-full-width-section-width\n          [full-width-end];\n\n        // > .sidebar\n        > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n          grid-row: 1 / -1;\n          grid-template: subgrid;\n\n          // Make sure other container classes do not break the layout inside of the sidebar.\n          //\n          // &:not(.container)\n          &:not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector}\n          ) {\n            // &, .container, .breakout, .feature, .full-width\n            &,\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n              grid-column-start: content-end;\n            }\n          }\n\n          // Lock content to the sidebar section.\n          //\n          // > :not(.container, .breakout, .feature, .full-width)\n          > :not(\n            #{defaults.$container-selector-base}#{defaults.$container-selector},\n            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n          ) {\n            grid-column: sidebar;\n          }\n\n          // Contain components should inherit the container's grid columns and\n          // force all children to be in the sidebar section.\n          //\n          // > .contain\n          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n            // > :not(.container, .breakout, .feature, .full-width)\n            > :not(\n              #{defaults.$container-selector-base}#{defaults.$container-selector},\n              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n            ) {\n              grid-column: sidebar;\n            }\n          }\n        }\n\n        // > .content\n        > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n          grid-row: 1;\n        }\n      }\n    }\n  }\n}\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n  $screen-size: screen.min($size);\n\n  @media screen and (#{$screen-size} <= width) {\n    @content;\n  }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n  $screen-size: screen.max($size);\n\n  @media screen and (width <= #{$screen-size}) {\n    @content;\n  }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n  $screen-size: screen.range($min, $max);\n  $min: map.get($screen-size, \"min\");\n  $max: map.get($screen-size, \"max\");\n\n  @media screen and (#{$min} <= width <= #{$max}) {\n    @content;\n  }\n}\n\n@mixin only($size) {\n  @include between($size, $size) {\n    @content;\n  }\n}\n\n@mixin trigger($trigger) {\n  @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n    @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n  }\n\n  $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n  @if not map.has-key($screen-size-trigger, \"mixin\") {\n    @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n  }\n\n  @if not map.has-key($screen-size-trigger, \"args\") {\n    @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n  }\n\n  $mixin-name: map.get($screen-size-trigger, \"mixin\");\n  $mixin-args: map.get($screen-size-trigger, \"args\");\n\n  @if not meta.mixin-exists($mixin-name) {\n    @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n  }\n\n  $mixin: meta.get-mixin($mixin-name);\n\n  @if meta.accepts-content($mixin) {\n    @include meta.apply($mixin, $mixin-args...) {\n      @content;\n    }\n  } @else {\n    @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n  }\n}\n"],"names":[]}