@charset "UTF-8";
/*
  @function str-replace

  Replace item in string with new string

  Parameters:
  $string - string
  $search - item to replace
  $replace - what to replace with
*/
/*
  @function map-deep-get

  Returns item from nested map

  Parameters:
  $map - initial map
  $keys - list of keys to follow
*/
/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @function process-breakpoints

  Returns a breakpoints array
*/
/*
  @function get-smallest-breakpoint

  Returns the name of the smallest breakpoint
*/
/*
  @function isColorVariable

  Checks to see if a passed value appears to be a CSS variable or
  CSS color

  Parameters:
  $value - value to check
*/
/*

  colspan

  $n - number of columns to span
  $bump - some arbitrary value to add

  NB: if you're doing a column thats wider than 100%, say because you're negative margin lefting it:

  ```
  .foo {
    --max-width: calc(100% - var(--inner-gutter));
    display: flex;
    flex-flow: row wrap;
    margin-left: calc(var(--inner-gutter) * -1);
  }

  .bar {
    flex: 0 0 auto;
    width: colspan(2);
  }
  ```

  Then you should set a `--max-width` CSS variable so that the calc uses this value and not 100% to base its calculation on.

  If your container isn't all of your grid columns wide, say for example you have a 12 column grid, and your container is 9 columns wide, set a `--grid-columns` variable:

  ```
  .foo {
    --grid-columns: 9;
  }

  .bar {
    width: colspan(2);
  }
  ```

  or

  ```
  .foo {
    --grid-columns: 9;
    width: colspan(2);
  }
  ```

  or

  ```
  .foo {
    @include colspan(2);
  }
  ```

  will set both child --grid-columns, and width of colspan
*/
/*
  @function get-max

  Looks at a map of values and returns the largest value in that map

  Parameters:
  $map - map to check
*/
/*
  @mixin processStructure

  Sets up the structural `:root` vars used by other utilities.
  Most utilities point to these variables, either directly or within `calc()`'s.
  These variables are then updated with media queries so the individual utilities
  don't require their own media queries.
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xs, sm, md, lg, xl, xxl  - *just* that breakpoint
  sm-, md-, lg-, xl-, xxl-  - that breakpoint *and* below
  xs+, sm+, md+, lg+, xl+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to target browsers with mouse cursors

  ```scss
  @include breakpoint('md+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint('md+','(min-height: 680px)') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('md+','hover') {
    // styles to be given to browsers at `medium` and above that have mouse pointers
  }
  @include breakpoint('md+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @mixin processColors

  Sets up the color tokens, color `:root` variables and
  the associated `%placeholder` and CSS classes.
*/
/*
  @mixin processTypography

  Processes the typography tokens, sets up the mixins, placeholders and CSS classes.
*/
/*
  @mixin typeAttribute

  Outputs CSS attributes

*/
/*
  @mixin typeStyle

  Loops a typeset to generate styles objects
  and then generates CSS as required

*/
/*
  @mixin typeStyles

  Loops typesets,
  makes placeholder and class for each,
  populates with styles

*/
/* outputs a specified typeset */
/*
  @mixin processGrid

  Generates design grid placeholder and CSS classes
  (`colspan-X` and `col-X`)

*/
/*
  @mixin setColspan

  Adds a `colspan-` class with a given index
  (to span number of columns equal to index)

*/
/*
  @mixin setBreakpointColspan

  Adds a `colspan-` class with a given index, with a breakpoint helper
  (to span number of columns equal to index)

*/
/*
  @mixin setGridCol

  Adds a `col-` class with a given index
  (to span number of columns equal to index)

*/
/*
  @mixin setBreakpointGridCol

  Adds a `colspan-` class with a given index, with a breakpoint helper
  (to span number of columns equal to index)

*/
/*
  @mixin processSpacing

  Generates spacing utilities for gutters and responsive spacing groups

*/
/*
  @mixin setupDevTools

  Generates dev tools classes for design grid overlay

*/
.container {
  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
  margin-left: auto;
  margin-right: auto; }

/*
  @mixin font-smoothing

  Enable or disable font-smoothing : this controls the application
  of anti-aliasing when fonts are rendered.
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.float-clear::after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden; }

.background-fill {
  position: relative; }
  .background-fill::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    margin-left: -50vw;
    background-color: inherit;
    pointer-events: none; }

html {
  box-sizing: border-box; }

*,
*::before,
*::after {
  box-sizing: inherit; }

[hidden] {
  display: none; }

:root {
  --COLOR-TOKENS: '↓';
  --white: #fff;
  --black: #000;
  --yellow-10: #ffffcc;
  --yellow-20: #ffff99;
  --yellow-50: yellow;
  --yellow-55: #ffff1a;
  --yellow-60: #cccc00;
  --yellow-65: #b3b300;
  --yellow-70: #999900;
  --yellow-75: olive;
  --yellow-80: #666600;
  --yellow-85: #4d4d00;
  --yellow-90: #333300;
  --red-10: #ffccd5;
  --red-20: #ff99aa;
  --red-50: #ff002b;
  --red-55: #e60026;
  --red-60: #cc0022;
  --red-65: #b3001e;
  --red-70: #99001a;
  --red-75: #800015;
  --red-80: #660011;
  --red-85: #4d000d;
  --red-90: #330009;
  --blue-10: #ccd9ff;
  --blue-20: #99b3ff;
  --blue-50: #0040ff;
  --blue-55: #0039e6;
  --blue-60: #0033cc;
  --blue-65: #002db3;
  --blue-70: #002699;
  --blue-75: #002080;
  --blue-80: #001a66;
  --blue-85: #00134d;
  --blue-90: #000d33;
  --green-10: #ccffea;
  --green-20: #99ffd5;
  --green-50: #00ff95;
  --green-55: #00e686;
  --green-60: #00cc77;
  --green-65: #00b368;
  --green-70: #009959;
  --green-75: #00804a;
  --green-80: #00663c;
  --green-85: #004d2d;
  --green-90: #00331e;
  --antracite-80: #111222; }

:root {
  --COLOR-BORDER: 'for usage ↓';
  --border-primary: var(--black);
  --border-secondary: var(--grey-15);
  --border-tertiary: var(--grey-54);
  --border-code-example-filename: var(--blue-05); }

:root {
  --COLOR-BACKGROUND: 'for usage ↓';
  --bg-design-grid: rgba(127, 255, 255, 0.25);
  --bg-primary: var(--white);
  --bg-blue: var(--blue-50);
  --bg-blue-light: var(--blue-5); }

:root {
  --COLOR-TEXT: 'for usage ↓';
  --text-title: var(--antracite-50);
  --text-primary: var(--antracite-50);
  --text-inverse: var(--white); }

:root {
  --THEMES: 'for usage ↓';
  --theme-yellow-bg: var(--yellow-50);
  --theme-yellow-accent: var(--red-50);
  --theme-yellow-text: var(--blue-50);
  --theme-blue-bg: var(--blue-50);
  --theme-blue-accent: var(--red-50);
  --theme-blue-text: var(--yellow-50);
  --theme-green-bg: var(--green-50);
  --theme-green-bg-contrast: var(--blue-50);
  --theme-green-accent: var(--red-50);
  --theme-green-text: var(--blue-50); }

.border-primary {
  border-color: var(--black); }

.border-secondary {
  border-color: var(--grey-15); }

.border-tertiary {
  border-color: var(--grey-54); }

.border-code-example-filename {
  border-color: var(--blue-05); }

.bg-design-grid {
  background-color: rgba(127, 255, 255, 0.25); }

.bg-primary {
  background-color: var(--white); }

.bg-blue {
  background-color: var(--blue-50); }

.bg-blue-light {
  background-color: var(--blue-5); }

.text-title {
  color: var(--antracite-50); }

.text-primary {
  color: var(--antracite-50); }

.text-inverse {
  color: var(--white); }

.theme-yellow-bg {
  color: var(--yellow-50); }

.theme-yellow-accent {
  color: var(--red-50); }

.theme-yellow-text {
  color: var(--blue-50); }

.theme-blue-bg {
  color: var(--blue-50); }

.theme-blue-accent {
  color: var(--red-50); }

.theme-blue-text {
  color: var(--yellow-50); }

.theme-green-bg {
  color: var(--green-50); }

.theme-green-bg-contrast {
  color: var(--blue-50); }

.theme-green-accent {
  color: var(--red-50); }

.theme-green-text {
  color: var(--blue-50); }

:root {
  --safe-area-inset-bottom: 0px; }

@supports (padding-top: constant(safe-area-inset-bottom)) {
  :root {
    --safe-area-inset-bottom: constant(safe-area-inset-bottom); } }
@supports (padding-top: env(safe-area-inset-bottom)) {
  :root {
    --safe-area-inset-bottom: env(safe-area-inset-bottom); } }
:root {
  --breakpoint: 'xs';
  --inner-gutter: 16px;
  --outer-gutter: 24px;
  --grid-columns: 4;
  --container-width: unset; }

@media screen and (min-width: 429px) {
  :root {
    --breakpoint: 'sm';
    --inner-gutter: 16px;
    --outer-gutter: 24px;
    --grid-columns: 4;
    --container-width: unset; } }
@media screen and (min-width: 744px) {
  :root {
    --breakpoint: 'md';
    --inner-gutter: 16px;
    --outer-gutter: 36px;
    --grid-columns: 6;
    --container-width: unset; } }
@media screen and (min-width: 1280px) {
  :root {
    --breakpoint: 'lg';
    --inner-gutter: 24px;
    --outer-gutter: 36px;
    --grid-columns: 6;
    --container-width: unset; } }
@media screen and (min-width: 1440px) {
  :root {
    --breakpoint: 'xl';
    --inner-gutter: 24px;
    --outer-gutter: 42px;
    --grid-columns: 12;
    --container-width: unset; } }
@media screen and (min-width: 1920px) {
  :root {
    --breakpoint: 'xxl';
    --inner-gutter: 36px;
    --outer-gutter: 48px;
    --grid-columns: 12;
    --container-width: 1440px; } }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ colspan */
[class*='colspan-'] {
  width: 100%; }

.colspan-1 {
  width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-1 > * {
  --grid-columns: 1; }

.colspan-2 {
  width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-2 > * {
  --grid-columns: 2; }

.colspan-3 {
  width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-3 > * {
  --grid-columns: 3; }

.colspan-4 {
  width: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-4 > * {
  --grid-columns: 4; }

.colspan-5 {
  width: calc(((5 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (5 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-5 > * {
  --grid-columns: 5; }

.colspan-6 {
  width: calc(((6 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (6 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-6 > * {
  --grid-columns: 6; }

.colspan-7 {
  width: calc(((7 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (7 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-7 > * {
  --grid-columns: 7; }

.colspan-8 {
  width: calc(((8 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (8 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-8 > * {
  --grid-columns: 8; }

.colspan-9 {
  width: calc(((9 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (9 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-9 > * {
  --grid-columns: 9; }

.colspan-10 {
  width: calc(((10 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (10 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-10 > * {
  --grid-columns: 10; }

.colspan-11 {
  width: calc(((11 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (11 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-11 > * {
  --grid-columns: 11; }

.colspan-12 {
  width: calc(((12 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (12 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-12 > * {
  --grid-columns: 12; }

.colspan-1\@xs {
  width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-1\@xs > * {
  --grid-columns: 1; }

.colspan-2\@xs {
  width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-2\@xs > * {
  --grid-columns: 2; }

.colspan-3\@xs {
  width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-3\@xs > * {
  --grid-columns: 3; }

.colspan-4\@xs {
  width: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter)))); }

.colspan-4\@xs > * {
  --grid-columns: 4; }

@media screen and (min-width: 429px) {
  .colspan-1\@sm {
    width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-1\@sm > * {
    --grid-columns: 1; }

  .colspan-2\@sm {
    width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-2\@sm > * {
    --grid-columns: 2; }

  .colspan-3\@sm {
    width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-3\@sm > * {
    --grid-columns: 3; }

  .colspan-4\@sm {
    width: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-4\@sm > * {
    --grid-columns: 4; } }
@media screen and (min-width: 744px) {
  .colspan-1\@md {
    width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-1\@md > * {
    --grid-columns: 1; }

  .colspan-2\@md {
    width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-2\@md > * {
    --grid-columns: 2; }

  .colspan-3\@md {
    width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-3\@md > * {
    --grid-columns: 3; }

  .colspan-4\@md {
    width: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-4\@md > * {
    --grid-columns: 4; }

  .colspan-5\@md {
    width: calc(((5 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (5 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-5\@md > * {
    --grid-columns: 5; }

  .colspan-6\@md {
    width: calc(((6 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (6 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-6\@md > * {
    --grid-columns: 6; } }
@media screen and (min-width: 1280px) {
  .colspan-1\@lg {
    width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-1\@lg > * {
    --grid-columns: 1; }

  .colspan-2\@lg {
    width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-2\@lg > * {
    --grid-columns: 2; }

  .colspan-3\@lg {
    width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-3\@lg > * {
    --grid-columns: 3; }

  .colspan-4\@lg {
    width: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-4\@lg > * {
    --grid-columns: 4; }

  .colspan-5\@lg {
    width: calc(((5 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (5 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-5\@lg > * {
    --grid-columns: 5; }

  .colspan-6\@lg {
    width: calc(((6 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (6 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-6\@lg > * {
    --grid-columns: 6; } }
@media screen and (min-width: 1440px) {
  .colspan-1\@xl {
    width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-1\@xl > * {
    --grid-columns: 1; }

  .colspan-2\@xl {
    width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-2\@xl > * {
    --grid-columns: 2; }

  .colspan-3\@xl {
    width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-3\@xl > * {
    --grid-columns: 3; }

  .colspan-4\@xl {
    width: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-4\@xl > * {
    --grid-columns: 4; }

  .colspan-5\@xl {
    width: calc(((5 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (5 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-5\@xl > * {
    --grid-columns: 5; }

  .colspan-6\@xl {
    width: calc(((6 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (6 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-6\@xl > * {
    --grid-columns: 6; }

  .colspan-7\@xl {
    width: calc(((7 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (7 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-7\@xl > * {
    --grid-columns: 7; }

  .colspan-8\@xl {
    width: calc(((8 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (8 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-8\@xl > * {
    --grid-columns: 8; }

  .colspan-9\@xl {
    width: calc(((9 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (9 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-9\@xl > * {
    --grid-columns: 9; }

  .colspan-10\@xl {
    width: calc(((10 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (10 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-10\@xl > * {
    --grid-columns: 10; }

  .colspan-11\@xl {
    width: calc(((11 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (11 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-11\@xl > * {
    --grid-columns: 11; }

  .colspan-12\@xl {
    width: calc(((12 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (12 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-12\@xl > * {
    --grid-columns: 12; } }
@media screen and (min-width: 1920px) {
  .colspan-1\@xxl {
    width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-1\@xxl > * {
    --grid-columns: 1; }

  .colspan-2\@xxl {
    width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-2\@xxl > * {
    --grid-columns: 2; }

  .colspan-3\@xxl {
    width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-3\@xxl > * {
    --grid-columns: 3; }

  .colspan-4\@xxl {
    width: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-4\@xxl > * {
    --grid-columns: 4; }

  .colspan-5\@xxl {
    width: calc(((5 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (5 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-5\@xxl > * {
    --grid-columns: 5; }

  .colspan-6\@xxl {
    width: calc(((6 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (6 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-6\@xxl > * {
    --grid-columns: 6; }

  .colspan-7\@xxl {
    width: calc(((7 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (7 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-7\@xxl > * {
    --grid-columns: 7; }

  .colspan-8\@xxl {
    width: calc(((8 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (8 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-8\@xxl > * {
    --grid-columns: 8; }

  .colspan-9\@xxl {
    width: calc(((9 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (9 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-9\@xxl > * {
    --grid-columns: 9; }

  .colspan-10\@xxl {
    width: calc(((10 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (10 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-10\@xxl > * {
    --grid-columns: 10; }

  .colspan-11\@xxl {
    width: calc(((11 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (11 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-11\@xxl > * {
    --grid-columns: 11; }

  .colspan-12\@xxl {
    width: calc(((12 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (12 / var(--grid-columns) * var(--inner-gutter)))); }

  .colspan-12\@xxl > * {
    --grid-columns: 12; } }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ grid/col-*/
.grid {
  display: grid;
  column-gap: var(--inner-gutter);
  grid-template-columns: repeat(var(--grid-columns), 1fr); }

.col,
[class*='col-'] {
  grid-column: span var(--grid-columns); }

.col-1 {
  --grid-columns: 1;
  grid-column: span 1; }

.col-start-1 {
  grid-column-start: 1; }

.col-end-2 {
  grid-column-end: 3; }

.col-2 {
  --grid-columns: 2;
  grid-column: span 2; }

.col-start-2 {
  grid-column-start: 2; }

.col-end-3 {
  grid-column-end: 4; }

.col-3 {
  --grid-columns: 3;
  grid-column: span 3; }

.col-start-3 {
  grid-column-start: 3; }

.col-end-4 {
  grid-column-end: 5; }

.col-4 {
  --grid-columns: 4;
  grid-column: span 4; }

.col-start-4 {
  grid-column-start: 4; }

.col-end-5 {
  grid-column-end: 6; }

.col-5 {
  --grid-columns: 5;
  grid-column: span 5; }

.col-start-5 {
  grid-column-start: 5; }

.col-end-6 {
  grid-column-end: 7; }

.col-6 {
  --grid-columns: 6;
  grid-column: span 6; }

.col-start-6 {
  grid-column-start: 6; }

.col-end-7 {
  grid-column-end: 8; }

.col-7 {
  --grid-columns: 7;
  grid-column: span 7; }

.col-start-7 {
  grid-column-start: 7; }

.col-end-8 {
  grid-column-end: 9; }

.col-8 {
  --grid-columns: 8;
  grid-column: span 8; }

.col-start-8 {
  grid-column-start: 8; }

.col-end-9 {
  grid-column-end: 10; }

.col-9 {
  --grid-columns: 9;
  grid-column: span 9; }

.col-start-9 {
  grid-column-start: 9; }

.col-end-10 {
  grid-column-end: 11; }

.col-10 {
  --grid-columns: 10;
  grid-column: span 10; }

.col-start-10 {
  grid-column-start: 10; }

.col-end-11 {
  grid-column-end: 12; }

.col-11 {
  --grid-columns: 11;
  grid-column: span 11; }

.col-start-11 {
  grid-column-start: 11; }

.col-end-12 {
  grid-column-end: 13; }

.col-12 {
  --grid-columns: 12;
  grid-column: span 12; }

.col-start-12 {
  grid-column-start: 12; }

.col-end-13 {
  grid-column-end: 14; }

.col-1\@xs {
  --grid-columns: 1;
  grid-column: span 1; }

.col-start-1\@xs {
  grid-column-start: 1; }

.col-end-2\@xs {
  grid-column-end: 3; }

.col-start-1.col-1\@xs,
.col-start-1\@xs.col-1\@xs {
  grid-column: 1 / span 1; }

.col-start-1.col-2\@xs,
.col-start-1\@xs.col-2\@xs {
  grid-column: 1 / span 2; }

.col-start-1.col-3\@xs,
.col-start-1\@xs.col-3\@xs {
  grid-column: 1 / span 3; }

.col-start-1.col-4\@xs,
.col-start-1\@xs.col-4\@xs {
  grid-column: 1 / span 4; }

.col-2\@xs {
  --grid-columns: 2;
  grid-column: span 2; }

.col-start-2\@xs {
  grid-column-start: 2; }

.col-end-3\@xs {
  grid-column-end: 4; }

.col-start-2.col-1\@xs,
.col-start-2\@xs.col-1\@xs {
  grid-column: 2 / span 1; }

.col-start-2.col-2\@xs,
.col-start-2\@xs.col-2\@xs {
  grid-column: 2 / span 2; }

.col-start-2.col-3\@xs,
.col-start-2\@xs.col-3\@xs {
  grid-column: 2 / span 3; }

.col-start-2.col-4\@xs,
.col-start-2\@xs.col-4\@xs {
  grid-column: 2 / span 4; }

.col-3\@xs {
  --grid-columns: 3;
  grid-column: span 3; }

.col-start-3\@xs {
  grid-column-start: 3; }

.col-end-4\@xs {
  grid-column-end: 5; }

.col-start-3.col-1\@xs,
.col-start-3\@xs.col-1\@xs {
  grid-column: 3 / span 1; }

.col-start-3.col-2\@xs,
.col-start-3\@xs.col-2\@xs {
  grid-column: 3 / span 2; }

.col-start-3.col-3\@xs,
.col-start-3\@xs.col-3\@xs {
  grid-column: 3 / span 3; }

.col-start-3.col-4\@xs,
.col-start-3\@xs.col-4\@xs {
  grid-column: 3 / span 4; }

.col-4\@xs {
  --grid-columns: 4;
  grid-column: span 4; }

.col-start-4\@xs {
  grid-column-start: 4; }

.col-end-5\@xs {
  grid-column-end: 6; }

.col-start-4.col-1\@xs,
.col-start-4\@xs.col-1\@xs {
  grid-column: 4 / span 1; }

.col-start-4.col-2\@xs,
.col-start-4\@xs.col-2\@xs {
  grid-column: 4 / span 2; }

.col-start-4.col-3\@xs,
.col-start-4\@xs.col-3\@xs {
  grid-column: 4 / span 3; }

.col-start-4.col-4\@xs,
.col-start-4\@xs.col-4\@xs {
  grid-column: 4 / span 4; }

@media screen and (min-width: 429px) {
  .col-1\@sm {
    --grid-columns: 1;
    grid-column: span 1; }

  .col-start-1\@sm {
    grid-column-start: 1; }

  .col-end-2\@sm {
    grid-column-end: 3; }

  .col-start-1.col-1\@sm,
  .col-start-1\@sm.col-1\@sm {
    grid-column: 1 / span 1; }

  .col-start-1.col-2\@sm,
  .col-start-1\@sm.col-2\@sm {
    grid-column: 1 / span 2; }

  .col-start-1.col-3\@sm,
  .col-start-1\@sm.col-3\@sm {
    grid-column: 1 / span 3; }

  .col-start-1.col-4\@sm,
  .col-start-1\@sm.col-4\@sm {
    grid-column: 1 / span 4; }

  .col-2\@sm {
    --grid-columns: 2;
    grid-column: span 2; }

  .col-start-2\@sm {
    grid-column-start: 2; }

  .col-end-3\@sm {
    grid-column-end: 4; }

  .col-start-2.col-1\@sm,
  .col-start-2\@sm.col-1\@sm {
    grid-column: 2 / span 1; }

  .col-start-2.col-2\@sm,
  .col-start-2\@sm.col-2\@sm {
    grid-column: 2 / span 2; }

  .col-start-2.col-3\@sm,
  .col-start-2\@sm.col-3\@sm {
    grid-column: 2 / span 3; }

  .col-start-2.col-4\@sm,
  .col-start-2\@sm.col-4\@sm {
    grid-column: 2 / span 4; }

  .col-3\@sm {
    --grid-columns: 3;
    grid-column: span 3; }

  .col-start-3\@sm {
    grid-column-start: 3; }

  .col-end-4\@sm {
    grid-column-end: 5; }

  .col-start-3.col-1\@sm,
  .col-start-3\@sm.col-1\@sm {
    grid-column: 3 / span 1; }

  .col-start-3.col-2\@sm,
  .col-start-3\@sm.col-2\@sm {
    grid-column: 3 / span 2; }

  .col-start-3.col-3\@sm,
  .col-start-3\@sm.col-3\@sm {
    grid-column: 3 / span 3; }

  .col-start-3.col-4\@sm,
  .col-start-3\@sm.col-4\@sm {
    grid-column: 3 / span 4; }

  .col-4\@sm {
    --grid-columns: 4;
    grid-column: span 4; }

  .col-start-4\@sm {
    grid-column-start: 4; }

  .col-end-5\@sm {
    grid-column-end: 6; }

  .col-start-4.col-1\@sm,
  .col-start-4\@sm.col-1\@sm {
    grid-column: 4 / span 1; }

  .col-start-4.col-2\@sm,
  .col-start-4\@sm.col-2\@sm {
    grid-column: 4 / span 2; }

  .col-start-4.col-3\@sm,
  .col-start-4\@sm.col-3\@sm {
    grid-column: 4 / span 3; }

  .col-start-4.col-4\@sm,
  .col-start-4\@sm.col-4\@sm {
    grid-column: 4 / span 4; } }
@media screen and (min-width: 744px) {
  .col-1\@md {
    --grid-columns: 1;
    grid-column: span 1; }

  .col-start-1\@md {
    grid-column-start: 1; }

  .col-end-2\@md {
    grid-column-end: 3; }

  .col-start-1.col-1\@md,
  .col-start-1\@md.col-1\@md {
    grid-column: 1 / span 1; }

  .col-start-1.col-2\@md,
  .col-start-1\@md.col-2\@md {
    grid-column: 1 / span 2; }

  .col-start-1.col-3\@md,
  .col-start-1\@md.col-3\@md {
    grid-column: 1 / span 3; }

  .col-start-1.col-4\@md,
  .col-start-1\@md.col-4\@md {
    grid-column: 1 / span 4; }

  .col-start-1.col-5\@md,
  .col-start-1\@md.col-5\@md {
    grid-column: 1 / span 5; }

  .col-start-1.col-6\@md,
  .col-start-1\@md.col-6\@md {
    grid-column: 1 / span 6; }

  .col-2\@md {
    --grid-columns: 2;
    grid-column: span 2; }

  .col-start-2\@md {
    grid-column-start: 2; }

  .col-end-3\@md {
    grid-column-end: 4; }

  .col-start-2.col-1\@md,
  .col-start-2\@md.col-1\@md {
    grid-column: 2 / span 1; }

  .col-start-2.col-2\@md,
  .col-start-2\@md.col-2\@md {
    grid-column: 2 / span 2; }

  .col-start-2.col-3\@md,
  .col-start-2\@md.col-3\@md {
    grid-column: 2 / span 3; }

  .col-start-2.col-4\@md,
  .col-start-2\@md.col-4\@md {
    grid-column: 2 / span 4; }

  .col-start-2.col-5\@md,
  .col-start-2\@md.col-5\@md {
    grid-column: 2 / span 5; }

  .col-start-2.col-6\@md,
  .col-start-2\@md.col-6\@md {
    grid-column: 2 / span 6; }

  .col-3\@md {
    --grid-columns: 3;
    grid-column: span 3; }

  .col-start-3\@md {
    grid-column-start: 3; }

  .col-end-4\@md {
    grid-column-end: 5; }

  .col-start-3.col-1\@md,
  .col-start-3\@md.col-1\@md {
    grid-column: 3 / span 1; }

  .col-start-3.col-2\@md,
  .col-start-3\@md.col-2\@md {
    grid-column: 3 / span 2; }

  .col-start-3.col-3\@md,
  .col-start-3\@md.col-3\@md {
    grid-column: 3 / span 3; }

  .col-start-3.col-4\@md,
  .col-start-3\@md.col-4\@md {
    grid-column: 3 / span 4; }

  .col-start-3.col-5\@md,
  .col-start-3\@md.col-5\@md {
    grid-column: 3 / span 5; }

  .col-start-3.col-6\@md,
  .col-start-3\@md.col-6\@md {
    grid-column: 3 / span 6; }

  .col-4\@md {
    --grid-columns: 4;
    grid-column: span 4; }

  .col-start-4\@md {
    grid-column-start: 4; }

  .col-end-5\@md {
    grid-column-end: 6; }

  .col-start-4.col-1\@md,
  .col-start-4\@md.col-1\@md {
    grid-column: 4 / span 1; }

  .col-start-4.col-2\@md,
  .col-start-4\@md.col-2\@md {
    grid-column: 4 / span 2; }

  .col-start-4.col-3\@md,
  .col-start-4\@md.col-3\@md {
    grid-column: 4 / span 3; }

  .col-start-4.col-4\@md,
  .col-start-4\@md.col-4\@md {
    grid-column: 4 / span 4; }

  .col-start-4.col-5\@md,
  .col-start-4\@md.col-5\@md {
    grid-column: 4 / span 5; }

  .col-start-4.col-6\@md,
  .col-start-4\@md.col-6\@md {
    grid-column: 4 / span 6; }

  .col-5\@md {
    --grid-columns: 5;
    grid-column: span 5; }

  .col-start-5\@md {
    grid-column-start: 5; }

  .col-end-6\@md {
    grid-column-end: 7; }

  .col-start-5.col-1\@md,
  .col-start-5\@md.col-1\@md {
    grid-column: 5 / span 1; }

  .col-start-5.col-2\@md,
  .col-start-5\@md.col-2\@md {
    grid-column: 5 / span 2; }

  .col-start-5.col-3\@md,
  .col-start-5\@md.col-3\@md {
    grid-column: 5 / span 3; }

  .col-start-5.col-4\@md,
  .col-start-5\@md.col-4\@md {
    grid-column: 5 / span 4; }

  .col-start-5.col-5\@md,
  .col-start-5\@md.col-5\@md {
    grid-column: 5 / span 5; }

  .col-start-5.col-6\@md,
  .col-start-5\@md.col-6\@md {
    grid-column: 5 / span 6; }

  .col-6\@md {
    --grid-columns: 6;
    grid-column: span 6; }

  .col-start-6\@md {
    grid-column-start: 6; }

  .col-end-7\@md {
    grid-column-end: 8; }

  .col-start-6.col-1\@md,
  .col-start-6\@md.col-1\@md {
    grid-column: 6 / span 1; }

  .col-start-6.col-2\@md,
  .col-start-6\@md.col-2\@md {
    grid-column: 6 / span 2; }

  .col-start-6.col-3\@md,
  .col-start-6\@md.col-3\@md {
    grid-column: 6 / span 3; }

  .col-start-6.col-4\@md,
  .col-start-6\@md.col-4\@md {
    grid-column: 6 / span 4; }

  .col-start-6.col-5\@md,
  .col-start-6\@md.col-5\@md {
    grid-column: 6 / span 5; }

  .col-start-6.col-6\@md,
  .col-start-6\@md.col-6\@md {
    grid-column: 6 / span 6; } }
@media screen and (min-width: 1280px) {
  .col-1\@lg {
    --grid-columns: 1;
    grid-column: span 1; }

  .col-start-1\@lg {
    grid-column-start: 1; }

  .col-end-2\@lg {
    grid-column-end: 3; }

  .col-start-1.col-1\@lg,
  .col-start-1\@lg.col-1\@lg {
    grid-column: 1 / span 1; }

  .col-start-1.col-2\@lg,
  .col-start-1\@lg.col-2\@lg {
    grid-column: 1 / span 2; }

  .col-start-1.col-3\@lg,
  .col-start-1\@lg.col-3\@lg {
    grid-column: 1 / span 3; }

  .col-start-1.col-4\@lg,
  .col-start-1\@lg.col-4\@lg {
    grid-column: 1 / span 4; }

  .col-start-1.col-5\@lg,
  .col-start-1\@lg.col-5\@lg {
    grid-column: 1 / span 5; }

  .col-start-1.col-6\@lg,
  .col-start-1\@lg.col-6\@lg {
    grid-column: 1 / span 6; }

  .col-2\@lg {
    --grid-columns: 2;
    grid-column: span 2; }

  .col-start-2\@lg {
    grid-column-start: 2; }

  .col-end-3\@lg {
    grid-column-end: 4; }

  .col-start-2.col-1\@lg,
  .col-start-2\@lg.col-1\@lg {
    grid-column: 2 / span 1; }

  .col-start-2.col-2\@lg,
  .col-start-2\@lg.col-2\@lg {
    grid-column: 2 / span 2; }

  .col-start-2.col-3\@lg,
  .col-start-2\@lg.col-3\@lg {
    grid-column: 2 / span 3; }

  .col-start-2.col-4\@lg,
  .col-start-2\@lg.col-4\@lg {
    grid-column: 2 / span 4; }

  .col-start-2.col-5\@lg,
  .col-start-2\@lg.col-5\@lg {
    grid-column: 2 / span 5; }

  .col-start-2.col-6\@lg,
  .col-start-2\@lg.col-6\@lg {
    grid-column: 2 / span 6; }

  .col-3\@lg {
    --grid-columns: 3;
    grid-column: span 3; }

  .col-start-3\@lg {
    grid-column-start: 3; }

  .col-end-4\@lg {
    grid-column-end: 5; }

  .col-start-3.col-1\@lg,
  .col-start-3\@lg.col-1\@lg {
    grid-column: 3 / span 1; }

  .col-start-3.col-2\@lg,
  .col-start-3\@lg.col-2\@lg {
    grid-column: 3 / span 2; }

  .col-start-3.col-3\@lg,
  .col-start-3\@lg.col-3\@lg {
    grid-column: 3 / span 3; }

  .col-start-3.col-4\@lg,
  .col-start-3\@lg.col-4\@lg {
    grid-column: 3 / span 4; }

  .col-start-3.col-5\@lg,
  .col-start-3\@lg.col-5\@lg {
    grid-column: 3 / span 5; }

  .col-start-3.col-6\@lg,
  .col-start-3\@lg.col-6\@lg {
    grid-column: 3 / span 6; }

  .col-4\@lg {
    --grid-columns: 4;
    grid-column: span 4; }

  .col-start-4\@lg {
    grid-column-start: 4; }

  .col-end-5\@lg {
    grid-column-end: 6; }

  .col-start-4.col-1\@lg,
  .col-start-4\@lg.col-1\@lg {
    grid-column: 4 / span 1; }

  .col-start-4.col-2\@lg,
  .col-start-4\@lg.col-2\@lg {
    grid-column: 4 / span 2; }

  .col-start-4.col-3\@lg,
  .col-start-4\@lg.col-3\@lg {
    grid-column: 4 / span 3; }

  .col-start-4.col-4\@lg,
  .col-start-4\@lg.col-4\@lg {
    grid-column: 4 / span 4; }

  .col-start-4.col-5\@lg,
  .col-start-4\@lg.col-5\@lg {
    grid-column: 4 / span 5; }

  .col-start-4.col-6\@lg,
  .col-start-4\@lg.col-6\@lg {
    grid-column: 4 / span 6; }

  .col-5\@lg {
    --grid-columns: 5;
    grid-column: span 5; }

  .col-start-5\@lg {
    grid-column-start: 5; }

  .col-end-6\@lg {
    grid-column-end: 7; }

  .col-start-5.col-1\@lg,
  .col-start-5\@lg.col-1\@lg {
    grid-column: 5 / span 1; }

  .col-start-5.col-2\@lg,
  .col-start-5\@lg.col-2\@lg {
    grid-column: 5 / span 2; }

  .col-start-5.col-3\@lg,
  .col-start-5\@lg.col-3\@lg {
    grid-column: 5 / span 3; }

  .col-start-5.col-4\@lg,
  .col-start-5\@lg.col-4\@lg {
    grid-column: 5 / span 4; }

  .col-start-5.col-5\@lg,
  .col-start-5\@lg.col-5\@lg {
    grid-column: 5 / span 5; }

  .col-start-5.col-6\@lg,
  .col-start-5\@lg.col-6\@lg {
    grid-column: 5 / span 6; }

  .col-6\@lg {
    --grid-columns: 6;
    grid-column: span 6; }

  .col-start-6\@lg {
    grid-column-start: 6; }

  .col-end-7\@lg {
    grid-column-end: 8; }

  .col-start-6.col-1\@lg,
  .col-start-6\@lg.col-1\@lg {
    grid-column: 6 / span 1; }

  .col-start-6.col-2\@lg,
  .col-start-6\@lg.col-2\@lg {
    grid-column: 6 / span 2; }

  .col-start-6.col-3\@lg,
  .col-start-6\@lg.col-3\@lg {
    grid-column: 6 / span 3; }

  .col-start-6.col-4\@lg,
  .col-start-6\@lg.col-4\@lg {
    grid-column: 6 / span 4; }

  .col-start-6.col-5\@lg,
  .col-start-6\@lg.col-5\@lg {
    grid-column: 6 / span 5; }

  .col-start-6.col-6\@lg,
  .col-start-6\@lg.col-6\@lg {
    grid-column: 6 / span 6; } }
@media screen and (min-width: 1440px) {
  .col-1\@xl {
    --grid-columns: 1;
    grid-column: span 1; }

  .col-start-1\@xl {
    grid-column-start: 1; }

  .col-end-2\@xl {
    grid-column-end: 3; }

  .col-start-1.col-1\@xl,
  .col-start-1\@xl.col-1\@xl {
    grid-column: 1 / span 1; }

  .col-start-1.col-2\@xl,
  .col-start-1\@xl.col-2\@xl {
    grid-column: 1 / span 2; }

  .col-start-1.col-3\@xl,
  .col-start-1\@xl.col-3\@xl {
    grid-column: 1 / span 3; }

  .col-start-1.col-4\@xl,
  .col-start-1\@xl.col-4\@xl {
    grid-column: 1 / span 4; }

  .col-start-1.col-5\@xl,
  .col-start-1\@xl.col-5\@xl {
    grid-column: 1 / span 5; }

  .col-start-1.col-6\@xl,
  .col-start-1\@xl.col-6\@xl {
    grid-column: 1 / span 6; }

  .col-start-1.col-7\@xl,
  .col-start-1\@xl.col-7\@xl {
    grid-column: 1 / span 7; }

  .col-start-1.col-8\@xl,
  .col-start-1\@xl.col-8\@xl {
    grid-column: 1 / span 8; }

  .col-start-1.col-9\@xl,
  .col-start-1\@xl.col-9\@xl {
    grid-column: 1 / span 9; }

  .col-start-1.col-10\@xl,
  .col-start-1\@xl.col-10\@xl {
    grid-column: 1 / span 10; }

  .col-start-1.col-11\@xl,
  .col-start-1\@xl.col-11\@xl {
    grid-column: 1 / span 11; }

  .col-start-1.col-12\@xl,
  .col-start-1\@xl.col-12\@xl {
    grid-column: 1 / span 12; }

  .col-2\@xl {
    --grid-columns: 2;
    grid-column: span 2; }

  .col-start-2\@xl {
    grid-column-start: 2; }

  .col-end-3\@xl {
    grid-column-end: 4; }

  .col-start-2.col-1\@xl,
  .col-start-2\@xl.col-1\@xl {
    grid-column: 2 / span 1; }

  .col-start-2.col-2\@xl,
  .col-start-2\@xl.col-2\@xl {
    grid-column: 2 / span 2; }

  .col-start-2.col-3\@xl,
  .col-start-2\@xl.col-3\@xl {
    grid-column: 2 / span 3; }

  .col-start-2.col-4\@xl,
  .col-start-2\@xl.col-4\@xl {
    grid-column: 2 / span 4; }

  .col-start-2.col-5\@xl,
  .col-start-2\@xl.col-5\@xl {
    grid-column: 2 / span 5; }

  .col-start-2.col-6\@xl,
  .col-start-2\@xl.col-6\@xl {
    grid-column: 2 / span 6; }

  .col-start-2.col-7\@xl,
  .col-start-2\@xl.col-7\@xl {
    grid-column: 2 / span 7; }

  .col-start-2.col-8\@xl,
  .col-start-2\@xl.col-8\@xl {
    grid-column: 2 / span 8; }

  .col-start-2.col-9\@xl,
  .col-start-2\@xl.col-9\@xl {
    grid-column: 2 / span 9; }

  .col-start-2.col-10\@xl,
  .col-start-2\@xl.col-10\@xl {
    grid-column: 2 / span 10; }

  .col-start-2.col-11\@xl,
  .col-start-2\@xl.col-11\@xl {
    grid-column: 2 / span 11; }

  .col-start-2.col-12\@xl,
  .col-start-2\@xl.col-12\@xl {
    grid-column: 2 / span 12; }

  .col-3\@xl {
    --grid-columns: 3;
    grid-column: span 3; }

  .col-start-3\@xl {
    grid-column-start: 3; }

  .col-end-4\@xl {
    grid-column-end: 5; }

  .col-start-3.col-1\@xl,
  .col-start-3\@xl.col-1\@xl {
    grid-column: 3 / span 1; }

  .col-start-3.col-2\@xl,
  .col-start-3\@xl.col-2\@xl {
    grid-column: 3 / span 2; }

  .col-start-3.col-3\@xl,
  .col-start-3\@xl.col-3\@xl {
    grid-column: 3 / span 3; }

  .col-start-3.col-4\@xl,
  .col-start-3\@xl.col-4\@xl {
    grid-column: 3 / span 4; }

  .col-start-3.col-5\@xl,
  .col-start-3\@xl.col-5\@xl {
    grid-column: 3 / span 5; }

  .col-start-3.col-6\@xl,
  .col-start-3\@xl.col-6\@xl {
    grid-column: 3 / span 6; }

  .col-start-3.col-7\@xl,
  .col-start-3\@xl.col-7\@xl {
    grid-column: 3 / span 7; }

  .col-start-3.col-8\@xl,
  .col-start-3\@xl.col-8\@xl {
    grid-column: 3 / span 8; }

  .col-start-3.col-9\@xl,
  .col-start-3\@xl.col-9\@xl {
    grid-column: 3 / span 9; }

  .col-start-3.col-10\@xl,
  .col-start-3\@xl.col-10\@xl {
    grid-column: 3 / span 10; }

  .col-start-3.col-11\@xl,
  .col-start-3\@xl.col-11\@xl {
    grid-column: 3 / span 11; }

  .col-start-3.col-12\@xl,
  .col-start-3\@xl.col-12\@xl {
    grid-column: 3 / span 12; }

  .col-4\@xl {
    --grid-columns: 4;
    grid-column: span 4; }

  .col-start-4\@xl {
    grid-column-start: 4; }

  .col-end-5\@xl {
    grid-column-end: 6; }

  .col-start-4.col-1\@xl,
  .col-start-4\@xl.col-1\@xl {
    grid-column: 4 / span 1; }

  .col-start-4.col-2\@xl,
  .col-start-4\@xl.col-2\@xl {
    grid-column: 4 / span 2; }

  .col-start-4.col-3\@xl,
  .col-start-4\@xl.col-3\@xl {
    grid-column: 4 / span 3; }

  .col-start-4.col-4\@xl,
  .col-start-4\@xl.col-4\@xl {
    grid-column: 4 / span 4; }

  .col-start-4.col-5\@xl,
  .col-start-4\@xl.col-5\@xl {
    grid-column: 4 / span 5; }

  .col-start-4.col-6\@xl,
  .col-start-4\@xl.col-6\@xl {
    grid-column: 4 / span 6; }

  .col-start-4.col-7\@xl,
  .col-start-4\@xl.col-7\@xl {
    grid-column: 4 / span 7; }

  .col-start-4.col-8\@xl,
  .col-start-4\@xl.col-8\@xl {
    grid-column: 4 / span 8; }

  .col-start-4.col-9\@xl,
  .col-start-4\@xl.col-9\@xl {
    grid-column: 4 / span 9; }

  .col-start-4.col-10\@xl,
  .col-start-4\@xl.col-10\@xl {
    grid-column: 4 / span 10; }

  .col-start-4.col-11\@xl,
  .col-start-4\@xl.col-11\@xl {
    grid-column: 4 / span 11; }

  .col-start-4.col-12\@xl,
  .col-start-4\@xl.col-12\@xl {
    grid-column: 4 / span 12; }

  .col-5\@xl {
    --grid-columns: 5;
    grid-column: span 5; }

  .col-start-5\@xl {
    grid-column-start: 5; }

  .col-end-6\@xl {
    grid-column-end: 7; }

  .col-start-5.col-1\@xl,
  .col-start-5\@xl.col-1\@xl {
    grid-column: 5 / span 1; }

  .col-start-5.col-2\@xl,
  .col-start-5\@xl.col-2\@xl {
    grid-column: 5 / span 2; }

  .col-start-5.col-3\@xl,
  .col-start-5\@xl.col-3\@xl {
    grid-column: 5 / span 3; }

  .col-start-5.col-4\@xl,
  .col-start-5\@xl.col-4\@xl {
    grid-column: 5 / span 4; }

  .col-start-5.col-5\@xl,
  .col-start-5\@xl.col-5\@xl {
    grid-column: 5 / span 5; }

  .col-start-5.col-6\@xl,
  .col-start-5\@xl.col-6\@xl {
    grid-column: 5 / span 6; }

  .col-start-5.col-7\@xl,
  .col-start-5\@xl.col-7\@xl {
    grid-column: 5 / span 7; }

  .col-start-5.col-8\@xl,
  .col-start-5\@xl.col-8\@xl {
    grid-column: 5 / span 8; }

  .col-start-5.col-9\@xl,
  .col-start-5\@xl.col-9\@xl {
    grid-column: 5 / span 9; }

  .col-start-5.col-10\@xl,
  .col-start-5\@xl.col-10\@xl {
    grid-column: 5 / span 10; }

  .col-start-5.col-11\@xl,
  .col-start-5\@xl.col-11\@xl {
    grid-column: 5 / span 11; }

  .col-start-5.col-12\@xl,
  .col-start-5\@xl.col-12\@xl {
    grid-column: 5 / span 12; }

  .col-6\@xl {
    --grid-columns: 6;
    grid-column: span 6; }

  .col-start-6\@xl {
    grid-column-start: 6; }

  .col-end-7\@xl {
    grid-column-end: 8; }

  .col-start-6.col-1\@xl,
  .col-start-6\@xl.col-1\@xl {
    grid-column: 6 / span 1; }

  .col-start-6.col-2\@xl,
  .col-start-6\@xl.col-2\@xl {
    grid-column: 6 / span 2; }

  .col-start-6.col-3\@xl,
  .col-start-6\@xl.col-3\@xl {
    grid-column: 6 / span 3; }

  .col-start-6.col-4\@xl,
  .col-start-6\@xl.col-4\@xl {
    grid-column: 6 / span 4; }

  .col-start-6.col-5\@xl,
  .col-start-6\@xl.col-5\@xl {
    grid-column: 6 / span 5; }

  .col-start-6.col-6\@xl,
  .col-start-6\@xl.col-6\@xl {
    grid-column: 6 / span 6; }

  .col-start-6.col-7\@xl,
  .col-start-6\@xl.col-7\@xl {
    grid-column: 6 / span 7; }

  .col-start-6.col-8\@xl,
  .col-start-6\@xl.col-8\@xl {
    grid-column: 6 / span 8; }

  .col-start-6.col-9\@xl,
  .col-start-6\@xl.col-9\@xl {
    grid-column: 6 / span 9; }

  .col-start-6.col-10\@xl,
  .col-start-6\@xl.col-10\@xl {
    grid-column: 6 / span 10; }

  .col-start-6.col-11\@xl,
  .col-start-6\@xl.col-11\@xl {
    grid-column: 6 / span 11; }

  .col-start-6.col-12\@xl,
  .col-start-6\@xl.col-12\@xl {
    grid-column: 6 / span 12; }

  .col-7\@xl {
    --grid-columns: 7;
    grid-column: span 7; }

  .col-start-7\@xl {
    grid-column-start: 7; }

  .col-end-8\@xl {
    grid-column-end: 9; }

  .col-start-7.col-1\@xl,
  .col-start-7\@xl.col-1\@xl {
    grid-column: 7 / span 1; }

  .col-start-7.col-2\@xl,
  .col-start-7\@xl.col-2\@xl {
    grid-column: 7 / span 2; }

  .col-start-7.col-3\@xl,
  .col-start-7\@xl.col-3\@xl {
    grid-column: 7 / span 3; }

  .col-start-7.col-4\@xl,
  .col-start-7\@xl.col-4\@xl {
    grid-column: 7 / span 4; }

  .col-start-7.col-5\@xl,
  .col-start-7\@xl.col-5\@xl {
    grid-column: 7 / span 5; }

  .col-start-7.col-6\@xl,
  .col-start-7\@xl.col-6\@xl {
    grid-column: 7 / span 6; }

  .col-start-7.col-7\@xl,
  .col-start-7\@xl.col-7\@xl {
    grid-column: 7 / span 7; }

  .col-start-7.col-8\@xl,
  .col-start-7\@xl.col-8\@xl {
    grid-column: 7 / span 8; }

  .col-start-7.col-9\@xl,
  .col-start-7\@xl.col-9\@xl {
    grid-column: 7 / span 9; }

  .col-start-7.col-10\@xl,
  .col-start-7\@xl.col-10\@xl {
    grid-column: 7 / span 10; }

  .col-start-7.col-11\@xl,
  .col-start-7\@xl.col-11\@xl {
    grid-column: 7 / span 11; }

  .col-start-7.col-12\@xl,
  .col-start-7\@xl.col-12\@xl {
    grid-column: 7 / span 12; }

  .col-8\@xl {
    --grid-columns: 8;
    grid-column: span 8; }

  .col-start-8\@xl {
    grid-column-start: 8; }

  .col-end-9\@xl {
    grid-column-end: 10; }

  .col-start-8.col-1\@xl,
  .col-start-8\@xl.col-1\@xl {
    grid-column: 8 / span 1; }

  .col-start-8.col-2\@xl,
  .col-start-8\@xl.col-2\@xl {
    grid-column: 8 / span 2; }

  .col-start-8.col-3\@xl,
  .col-start-8\@xl.col-3\@xl {
    grid-column: 8 / span 3; }

  .col-start-8.col-4\@xl,
  .col-start-8\@xl.col-4\@xl {
    grid-column: 8 / span 4; }

  .col-start-8.col-5\@xl,
  .col-start-8\@xl.col-5\@xl {
    grid-column: 8 / span 5; }

  .col-start-8.col-6\@xl,
  .col-start-8\@xl.col-6\@xl {
    grid-column: 8 / span 6; }

  .col-start-8.col-7\@xl,
  .col-start-8\@xl.col-7\@xl {
    grid-column: 8 / span 7; }

  .col-start-8.col-8\@xl,
  .col-start-8\@xl.col-8\@xl {
    grid-column: 8 / span 8; }

  .col-start-8.col-9\@xl,
  .col-start-8\@xl.col-9\@xl {
    grid-column: 8 / span 9; }

  .col-start-8.col-10\@xl,
  .col-start-8\@xl.col-10\@xl {
    grid-column: 8 / span 10; }

  .col-start-8.col-11\@xl,
  .col-start-8\@xl.col-11\@xl {
    grid-column: 8 / span 11; }

  .col-start-8.col-12\@xl,
  .col-start-8\@xl.col-12\@xl {
    grid-column: 8 / span 12; }

  .col-9\@xl {
    --grid-columns: 9;
    grid-column: span 9; }

  .col-start-9\@xl {
    grid-column-start: 9; }

  .col-end-10\@xl {
    grid-column-end: 11; }

  .col-start-9.col-1\@xl,
  .col-start-9\@xl.col-1\@xl {
    grid-column: 9 / span 1; }

  .col-start-9.col-2\@xl,
  .col-start-9\@xl.col-2\@xl {
    grid-column: 9 / span 2; }

  .col-start-9.col-3\@xl,
  .col-start-9\@xl.col-3\@xl {
    grid-column: 9 / span 3; }

  .col-start-9.col-4\@xl,
  .col-start-9\@xl.col-4\@xl {
    grid-column: 9 / span 4; }

  .col-start-9.col-5\@xl,
  .col-start-9\@xl.col-5\@xl {
    grid-column: 9 / span 5; }

  .col-start-9.col-6\@xl,
  .col-start-9\@xl.col-6\@xl {
    grid-column: 9 / span 6; }

  .col-start-9.col-7\@xl,
  .col-start-9\@xl.col-7\@xl {
    grid-column: 9 / span 7; }

  .col-start-9.col-8\@xl,
  .col-start-9\@xl.col-8\@xl {
    grid-column: 9 / span 8; }

  .col-start-9.col-9\@xl,
  .col-start-9\@xl.col-9\@xl {
    grid-column: 9 / span 9; }

  .col-start-9.col-10\@xl,
  .col-start-9\@xl.col-10\@xl {
    grid-column: 9 / span 10; }

  .col-start-9.col-11\@xl,
  .col-start-9\@xl.col-11\@xl {
    grid-column: 9 / span 11; }

  .col-start-9.col-12\@xl,
  .col-start-9\@xl.col-12\@xl {
    grid-column: 9 / span 12; }

  .col-10\@xl {
    --grid-columns: 10;
    grid-column: span 10; }

  .col-start-10\@xl {
    grid-column-start: 10; }

  .col-end-11\@xl {
    grid-column-end: 12; }

  .col-start-10.col-1\@xl,
  .col-start-10\@xl.col-1\@xl {
    grid-column: 10 / span 1; }

  .col-start-10.col-2\@xl,
  .col-start-10\@xl.col-2\@xl {
    grid-column: 10 / span 2; }

  .col-start-10.col-3\@xl,
  .col-start-10\@xl.col-3\@xl {
    grid-column: 10 / span 3; }

  .col-start-10.col-4\@xl,
  .col-start-10\@xl.col-4\@xl {
    grid-column: 10 / span 4; }

  .col-start-10.col-5\@xl,
  .col-start-10\@xl.col-5\@xl {
    grid-column: 10 / span 5; }

  .col-start-10.col-6\@xl,
  .col-start-10\@xl.col-6\@xl {
    grid-column: 10 / span 6; }

  .col-start-10.col-7\@xl,
  .col-start-10\@xl.col-7\@xl {
    grid-column: 10 / span 7; }

  .col-start-10.col-8\@xl,
  .col-start-10\@xl.col-8\@xl {
    grid-column: 10 / span 8; }

  .col-start-10.col-9\@xl,
  .col-start-10\@xl.col-9\@xl {
    grid-column: 10 / span 9; }

  .col-start-10.col-10\@xl,
  .col-start-10\@xl.col-10\@xl {
    grid-column: 10 / span 10; }

  .col-start-10.col-11\@xl,
  .col-start-10\@xl.col-11\@xl {
    grid-column: 10 / span 11; }

  .col-start-10.col-12\@xl,
  .col-start-10\@xl.col-12\@xl {
    grid-column: 10 / span 12; }

  .col-11\@xl {
    --grid-columns: 11;
    grid-column: span 11; }

  .col-start-11\@xl {
    grid-column-start: 11; }

  .col-end-12\@xl {
    grid-column-end: 13; }

  .col-start-11.col-1\@xl,
  .col-start-11\@xl.col-1\@xl {
    grid-column: 11 / span 1; }

  .col-start-11.col-2\@xl,
  .col-start-11\@xl.col-2\@xl {
    grid-column: 11 / span 2; }

  .col-start-11.col-3\@xl,
  .col-start-11\@xl.col-3\@xl {
    grid-column: 11 / span 3; }

  .col-start-11.col-4\@xl,
  .col-start-11\@xl.col-4\@xl {
    grid-column: 11 / span 4; }

  .col-start-11.col-5\@xl,
  .col-start-11\@xl.col-5\@xl {
    grid-column: 11 / span 5; }

  .col-start-11.col-6\@xl,
  .col-start-11\@xl.col-6\@xl {
    grid-column: 11 / span 6; }

  .col-start-11.col-7\@xl,
  .col-start-11\@xl.col-7\@xl {
    grid-column: 11 / span 7; }

  .col-start-11.col-8\@xl,
  .col-start-11\@xl.col-8\@xl {
    grid-column: 11 / span 8; }

  .col-start-11.col-9\@xl,
  .col-start-11\@xl.col-9\@xl {
    grid-column: 11 / span 9; }

  .col-start-11.col-10\@xl,
  .col-start-11\@xl.col-10\@xl {
    grid-column: 11 / span 10; }

  .col-start-11.col-11\@xl,
  .col-start-11\@xl.col-11\@xl {
    grid-column: 11 / span 11; }

  .col-start-11.col-12\@xl,
  .col-start-11\@xl.col-12\@xl {
    grid-column: 11 / span 12; }

  .col-12\@xl {
    --grid-columns: 12;
    grid-column: span 12; }

  .col-start-12\@xl {
    grid-column-start: 12; }

  .col-end-13\@xl {
    grid-column-end: 14; }

  .col-start-12.col-1\@xl,
  .col-start-12\@xl.col-1\@xl {
    grid-column: 12 / span 1; }

  .col-start-12.col-2\@xl,
  .col-start-12\@xl.col-2\@xl {
    grid-column: 12 / span 2; }

  .col-start-12.col-3\@xl,
  .col-start-12\@xl.col-3\@xl {
    grid-column: 12 / span 3; }

  .col-start-12.col-4\@xl,
  .col-start-12\@xl.col-4\@xl {
    grid-column: 12 / span 4; }

  .col-start-12.col-5\@xl,
  .col-start-12\@xl.col-5\@xl {
    grid-column: 12 / span 5; }

  .col-start-12.col-6\@xl,
  .col-start-12\@xl.col-6\@xl {
    grid-column: 12 / span 6; }

  .col-start-12.col-7\@xl,
  .col-start-12\@xl.col-7\@xl {
    grid-column: 12 / span 7; }

  .col-start-12.col-8\@xl,
  .col-start-12\@xl.col-8\@xl {
    grid-column: 12 / span 8; }

  .col-start-12.col-9\@xl,
  .col-start-12\@xl.col-9\@xl {
    grid-column: 12 / span 9; }

  .col-start-12.col-10\@xl,
  .col-start-12\@xl.col-10\@xl {
    grid-column: 12 / span 10; }

  .col-start-12.col-11\@xl,
  .col-start-12\@xl.col-11\@xl {
    grid-column: 12 / span 11; }

  .col-start-12.col-12\@xl,
  .col-start-12\@xl.col-12\@xl {
    grid-column: 12 / span 12; } }
@media screen and (min-width: 1920px) {
  .col-1\@xxl {
    --grid-columns: 1;
    grid-column: span 1; }

  .col-start-1\@xxl {
    grid-column-start: 1; }

  .col-end-2\@xxl {
    grid-column-end: 3; }

  .col-start-1.col-1\@xxl,
  .col-start-1\@xxl.col-1\@xxl {
    grid-column: 1 / span 1; }

  .col-start-1.col-2\@xxl,
  .col-start-1\@xxl.col-2\@xxl {
    grid-column: 1 / span 2; }

  .col-start-1.col-3\@xxl,
  .col-start-1\@xxl.col-3\@xxl {
    grid-column: 1 / span 3; }

  .col-start-1.col-4\@xxl,
  .col-start-1\@xxl.col-4\@xxl {
    grid-column: 1 / span 4; }

  .col-start-1.col-5\@xxl,
  .col-start-1\@xxl.col-5\@xxl {
    grid-column: 1 / span 5; }

  .col-start-1.col-6\@xxl,
  .col-start-1\@xxl.col-6\@xxl {
    grid-column: 1 / span 6; }

  .col-start-1.col-7\@xxl,
  .col-start-1\@xxl.col-7\@xxl {
    grid-column: 1 / span 7; }

  .col-start-1.col-8\@xxl,
  .col-start-1\@xxl.col-8\@xxl {
    grid-column: 1 / span 8; }

  .col-start-1.col-9\@xxl,
  .col-start-1\@xxl.col-9\@xxl {
    grid-column: 1 / span 9; }

  .col-start-1.col-10\@xxl,
  .col-start-1\@xxl.col-10\@xxl {
    grid-column: 1 / span 10; }

  .col-start-1.col-11\@xxl,
  .col-start-1\@xxl.col-11\@xxl {
    grid-column: 1 / span 11; }

  .col-start-1.col-12\@xxl,
  .col-start-1\@xxl.col-12\@xxl {
    grid-column: 1 / span 12; }

  .col-2\@xxl {
    --grid-columns: 2;
    grid-column: span 2; }

  .col-start-2\@xxl {
    grid-column-start: 2; }

  .col-end-3\@xxl {
    grid-column-end: 4; }

  .col-start-2.col-1\@xxl,
  .col-start-2\@xxl.col-1\@xxl {
    grid-column: 2 / span 1; }

  .col-start-2.col-2\@xxl,
  .col-start-2\@xxl.col-2\@xxl {
    grid-column: 2 / span 2; }

  .col-start-2.col-3\@xxl,
  .col-start-2\@xxl.col-3\@xxl {
    grid-column: 2 / span 3; }

  .col-start-2.col-4\@xxl,
  .col-start-2\@xxl.col-4\@xxl {
    grid-column: 2 / span 4; }

  .col-start-2.col-5\@xxl,
  .col-start-2\@xxl.col-5\@xxl {
    grid-column: 2 / span 5; }

  .col-start-2.col-6\@xxl,
  .col-start-2\@xxl.col-6\@xxl {
    grid-column: 2 / span 6; }

  .col-start-2.col-7\@xxl,
  .col-start-2\@xxl.col-7\@xxl {
    grid-column: 2 / span 7; }

  .col-start-2.col-8\@xxl,
  .col-start-2\@xxl.col-8\@xxl {
    grid-column: 2 / span 8; }

  .col-start-2.col-9\@xxl,
  .col-start-2\@xxl.col-9\@xxl {
    grid-column: 2 / span 9; }

  .col-start-2.col-10\@xxl,
  .col-start-2\@xxl.col-10\@xxl {
    grid-column: 2 / span 10; }

  .col-start-2.col-11\@xxl,
  .col-start-2\@xxl.col-11\@xxl {
    grid-column: 2 / span 11; }

  .col-start-2.col-12\@xxl,
  .col-start-2\@xxl.col-12\@xxl {
    grid-column: 2 / span 12; }

  .col-3\@xxl {
    --grid-columns: 3;
    grid-column: span 3; }

  .col-start-3\@xxl {
    grid-column-start: 3; }

  .col-end-4\@xxl {
    grid-column-end: 5; }

  .col-start-3.col-1\@xxl,
  .col-start-3\@xxl.col-1\@xxl {
    grid-column: 3 / span 1; }

  .col-start-3.col-2\@xxl,
  .col-start-3\@xxl.col-2\@xxl {
    grid-column: 3 / span 2; }

  .col-start-3.col-3\@xxl,
  .col-start-3\@xxl.col-3\@xxl {
    grid-column: 3 / span 3; }

  .col-start-3.col-4\@xxl,
  .col-start-3\@xxl.col-4\@xxl {
    grid-column: 3 / span 4; }

  .col-start-3.col-5\@xxl,
  .col-start-3\@xxl.col-5\@xxl {
    grid-column: 3 / span 5; }

  .col-start-3.col-6\@xxl,
  .col-start-3\@xxl.col-6\@xxl {
    grid-column: 3 / span 6; }

  .col-start-3.col-7\@xxl,
  .col-start-3\@xxl.col-7\@xxl {
    grid-column: 3 / span 7; }

  .col-start-3.col-8\@xxl,
  .col-start-3\@xxl.col-8\@xxl {
    grid-column: 3 / span 8; }

  .col-start-3.col-9\@xxl,
  .col-start-3\@xxl.col-9\@xxl {
    grid-column: 3 / span 9; }

  .col-start-3.col-10\@xxl,
  .col-start-3\@xxl.col-10\@xxl {
    grid-column: 3 / span 10; }

  .col-start-3.col-11\@xxl,
  .col-start-3\@xxl.col-11\@xxl {
    grid-column: 3 / span 11; }

  .col-start-3.col-12\@xxl,
  .col-start-3\@xxl.col-12\@xxl {
    grid-column: 3 / span 12; }

  .col-4\@xxl {
    --grid-columns: 4;
    grid-column: span 4; }

  .col-start-4\@xxl {
    grid-column-start: 4; }

  .col-end-5\@xxl {
    grid-column-end: 6; }

  .col-start-4.col-1\@xxl,
  .col-start-4\@xxl.col-1\@xxl {
    grid-column: 4 / span 1; }

  .col-start-4.col-2\@xxl,
  .col-start-4\@xxl.col-2\@xxl {
    grid-column: 4 / span 2; }

  .col-start-4.col-3\@xxl,
  .col-start-4\@xxl.col-3\@xxl {
    grid-column: 4 / span 3; }

  .col-start-4.col-4\@xxl,
  .col-start-4\@xxl.col-4\@xxl {
    grid-column: 4 / span 4; }

  .col-start-4.col-5\@xxl,
  .col-start-4\@xxl.col-5\@xxl {
    grid-column: 4 / span 5; }

  .col-start-4.col-6\@xxl,
  .col-start-4\@xxl.col-6\@xxl {
    grid-column: 4 / span 6; }

  .col-start-4.col-7\@xxl,
  .col-start-4\@xxl.col-7\@xxl {
    grid-column: 4 / span 7; }

  .col-start-4.col-8\@xxl,
  .col-start-4\@xxl.col-8\@xxl {
    grid-column: 4 / span 8; }

  .col-start-4.col-9\@xxl,
  .col-start-4\@xxl.col-9\@xxl {
    grid-column: 4 / span 9; }

  .col-start-4.col-10\@xxl,
  .col-start-4\@xxl.col-10\@xxl {
    grid-column: 4 / span 10; }

  .col-start-4.col-11\@xxl,
  .col-start-4\@xxl.col-11\@xxl {
    grid-column: 4 / span 11; }

  .col-start-4.col-12\@xxl,
  .col-start-4\@xxl.col-12\@xxl {
    grid-column: 4 / span 12; }

  .col-5\@xxl {
    --grid-columns: 5;
    grid-column: span 5; }

  .col-start-5\@xxl {
    grid-column-start: 5; }

  .col-end-6\@xxl {
    grid-column-end: 7; }

  .col-start-5.col-1\@xxl,
  .col-start-5\@xxl.col-1\@xxl {
    grid-column: 5 / span 1; }

  .col-start-5.col-2\@xxl,
  .col-start-5\@xxl.col-2\@xxl {
    grid-column: 5 / span 2; }

  .col-start-5.col-3\@xxl,
  .col-start-5\@xxl.col-3\@xxl {
    grid-column: 5 / span 3; }

  .col-start-5.col-4\@xxl,
  .col-start-5\@xxl.col-4\@xxl {
    grid-column: 5 / span 4; }

  .col-start-5.col-5\@xxl,
  .col-start-5\@xxl.col-5\@xxl {
    grid-column: 5 / span 5; }

  .col-start-5.col-6\@xxl,
  .col-start-5\@xxl.col-6\@xxl {
    grid-column: 5 / span 6; }

  .col-start-5.col-7\@xxl,
  .col-start-5\@xxl.col-7\@xxl {
    grid-column: 5 / span 7; }

  .col-start-5.col-8\@xxl,
  .col-start-5\@xxl.col-8\@xxl {
    grid-column: 5 / span 8; }

  .col-start-5.col-9\@xxl,
  .col-start-5\@xxl.col-9\@xxl {
    grid-column: 5 / span 9; }

  .col-start-5.col-10\@xxl,
  .col-start-5\@xxl.col-10\@xxl {
    grid-column: 5 / span 10; }

  .col-start-5.col-11\@xxl,
  .col-start-5\@xxl.col-11\@xxl {
    grid-column: 5 / span 11; }

  .col-start-5.col-12\@xxl,
  .col-start-5\@xxl.col-12\@xxl {
    grid-column: 5 / span 12; }

  .col-6\@xxl {
    --grid-columns: 6;
    grid-column: span 6; }

  .col-start-6\@xxl {
    grid-column-start: 6; }

  .col-end-7\@xxl {
    grid-column-end: 8; }

  .col-start-6.col-1\@xxl,
  .col-start-6\@xxl.col-1\@xxl {
    grid-column: 6 / span 1; }

  .col-start-6.col-2\@xxl,
  .col-start-6\@xxl.col-2\@xxl {
    grid-column: 6 / span 2; }

  .col-start-6.col-3\@xxl,
  .col-start-6\@xxl.col-3\@xxl {
    grid-column: 6 / span 3; }

  .col-start-6.col-4\@xxl,
  .col-start-6\@xxl.col-4\@xxl {
    grid-column: 6 / span 4; }

  .col-start-6.col-5\@xxl,
  .col-start-6\@xxl.col-5\@xxl {
    grid-column: 6 / span 5; }

  .col-start-6.col-6\@xxl,
  .col-start-6\@xxl.col-6\@xxl {
    grid-column: 6 / span 6; }

  .col-start-6.col-7\@xxl,
  .col-start-6\@xxl.col-7\@xxl {
    grid-column: 6 / span 7; }

  .col-start-6.col-8\@xxl,
  .col-start-6\@xxl.col-8\@xxl {
    grid-column: 6 / span 8; }

  .col-start-6.col-9\@xxl,
  .col-start-6\@xxl.col-9\@xxl {
    grid-column: 6 / span 9; }

  .col-start-6.col-10\@xxl,
  .col-start-6\@xxl.col-10\@xxl {
    grid-column: 6 / span 10; }

  .col-start-6.col-11\@xxl,
  .col-start-6\@xxl.col-11\@xxl {
    grid-column: 6 / span 11; }

  .col-start-6.col-12\@xxl,
  .col-start-6\@xxl.col-12\@xxl {
    grid-column: 6 / span 12; }

  .col-7\@xxl {
    --grid-columns: 7;
    grid-column: span 7; }

  .col-start-7\@xxl {
    grid-column-start: 7; }

  .col-end-8\@xxl {
    grid-column-end: 9; }

  .col-start-7.col-1\@xxl,
  .col-start-7\@xxl.col-1\@xxl {
    grid-column: 7 / span 1; }

  .col-start-7.col-2\@xxl,
  .col-start-7\@xxl.col-2\@xxl {
    grid-column: 7 / span 2; }

  .col-start-7.col-3\@xxl,
  .col-start-7\@xxl.col-3\@xxl {
    grid-column: 7 / span 3; }

  .col-start-7.col-4\@xxl,
  .col-start-7\@xxl.col-4\@xxl {
    grid-column: 7 / span 4; }

  .col-start-7.col-5\@xxl,
  .col-start-7\@xxl.col-5\@xxl {
    grid-column: 7 / span 5; }

  .col-start-7.col-6\@xxl,
  .col-start-7\@xxl.col-6\@xxl {
    grid-column: 7 / span 6; }

  .col-start-7.col-7\@xxl,
  .col-start-7\@xxl.col-7\@xxl {
    grid-column: 7 / span 7; }

  .col-start-7.col-8\@xxl,
  .col-start-7\@xxl.col-8\@xxl {
    grid-column: 7 / span 8; }

  .col-start-7.col-9\@xxl,
  .col-start-7\@xxl.col-9\@xxl {
    grid-column: 7 / span 9; }

  .col-start-7.col-10\@xxl,
  .col-start-7\@xxl.col-10\@xxl {
    grid-column: 7 / span 10; }

  .col-start-7.col-11\@xxl,
  .col-start-7\@xxl.col-11\@xxl {
    grid-column: 7 / span 11; }

  .col-start-7.col-12\@xxl,
  .col-start-7\@xxl.col-12\@xxl {
    grid-column: 7 / span 12; }

  .col-8\@xxl {
    --grid-columns: 8;
    grid-column: span 8; }

  .col-start-8\@xxl {
    grid-column-start: 8; }

  .col-end-9\@xxl {
    grid-column-end: 10; }

  .col-start-8.col-1\@xxl,
  .col-start-8\@xxl.col-1\@xxl {
    grid-column: 8 / span 1; }

  .col-start-8.col-2\@xxl,
  .col-start-8\@xxl.col-2\@xxl {
    grid-column: 8 / span 2; }

  .col-start-8.col-3\@xxl,
  .col-start-8\@xxl.col-3\@xxl {
    grid-column: 8 / span 3; }

  .col-start-8.col-4\@xxl,
  .col-start-8\@xxl.col-4\@xxl {
    grid-column: 8 / span 4; }

  .col-start-8.col-5\@xxl,
  .col-start-8\@xxl.col-5\@xxl {
    grid-column: 8 / span 5; }

  .col-start-8.col-6\@xxl,
  .col-start-8\@xxl.col-6\@xxl {
    grid-column: 8 / span 6; }

  .col-start-8.col-7\@xxl,
  .col-start-8\@xxl.col-7\@xxl {
    grid-column: 8 / span 7; }

  .col-start-8.col-8\@xxl,
  .col-start-8\@xxl.col-8\@xxl {
    grid-column: 8 / span 8; }

  .col-start-8.col-9\@xxl,
  .col-start-8\@xxl.col-9\@xxl {
    grid-column: 8 / span 9; }

  .col-start-8.col-10\@xxl,
  .col-start-8\@xxl.col-10\@xxl {
    grid-column: 8 / span 10; }

  .col-start-8.col-11\@xxl,
  .col-start-8\@xxl.col-11\@xxl {
    grid-column: 8 / span 11; }

  .col-start-8.col-12\@xxl,
  .col-start-8\@xxl.col-12\@xxl {
    grid-column: 8 / span 12; }

  .col-9\@xxl {
    --grid-columns: 9;
    grid-column: span 9; }

  .col-start-9\@xxl {
    grid-column-start: 9; }

  .col-end-10\@xxl {
    grid-column-end: 11; }

  .col-start-9.col-1\@xxl,
  .col-start-9\@xxl.col-1\@xxl {
    grid-column: 9 / span 1; }

  .col-start-9.col-2\@xxl,
  .col-start-9\@xxl.col-2\@xxl {
    grid-column: 9 / span 2; }

  .col-start-9.col-3\@xxl,
  .col-start-9\@xxl.col-3\@xxl {
    grid-column: 9 / span 3; }

  .col-start-9.col-4\@xxl,
  .col-start-9\@xxl.col-4\@xxl {
    grid-column: 9 / span 4; }

  .col-start-9.col-5\@xxl,
  .col-start-9\@xxl.col-5\@xxl {
    grid-column: 9 / span 5; }

  .col-start-9.col-6\@xxl,
  .col-start-9\@xxl.col-6\@xxl {
    grid-column: 9 / span 6; }

  .col-start-9.col-7\@xxl,
  .col-start-9\@xxl.col-7\@xxl {
    grid-column: 9 / span 7; }

  .col-start-9.col-8\@xxl,
  .col-start-9\@xxl.col-8\@xxl {
    grid-column: 9 / span 8; }

  .col-start-9.col-9\@xxl,
  .col-start-9\@xxl.col-9\@xxl {
    grid-column: 9 / span 9; }

  .col-start-9.col-10\@xxl,
  .col-start-9\@xxl.col-10\@xxl {
    grid-column: 9 / span 10; }

  .col-start-9.col-11\@xxl,
  .col-start-9\@xxl.col-11\@xxl {
    grid-column: 9 / span 11; }

  .col-start-9.col-12\@xxl,
  .col-start-9\@xxl.col-12\@xxl {
    grid-column: 9 / span 12; }

  .col-10\@xxl {
    --grid-columns: 10;
    grid-column: span 10; }

  .col-start-10\@xxl {
    grid-column-start: 10; }

  .col-end-11\@xxl {
    grid-column-end: 12; }

  .col-start-10.col-1\@xxl,
  .col-start-10\@xxl.col-1\@xxl {
    grid-column: 10 / span 1; }

  .col-start-10.col-2\@xxl,
  .col-start-10\@xxl.col-2\@xxl {
    grid-column: 10 / span 2; }

  .col-start-10.col-3\@xxl,
  .col-start-10\@xxl.col-3\@xxl {
    grid-column: 10 / span 3; }

  .col-start-10.col-4\@xxl,
  .col-start-10\@xxl.col-4\@xxl {
    grid-column: 10 / span 4; }

  .col-start-10.col-5\@xxl,
  .col-start-10\@xxl.col-5\@xxl {
    grid-column: 10 / span 5; }

  .col-start-10.col-6\@xxl,
  .col-start-10\@xxl.col-6\@xxl {
    grid-column: 10 / span 6; }

  .col-start-10.col-7\@xxl,
  .col-start-10\@xxl.col-7\@xxl {
    grid-column: 10 / span 7; }

  .col-start-10.col-8\@xxl,
  .col-start-10\@xxl.col-8\@xxl {
    grid-column: 10 / span 8; }

  .col-start-10.col-9\@xxl,
  .col-start-10\@xxl.col-9\@xxl {
    grid-column: 10 / span 9; }

  .col-start-10.col-10\@xxl,
  .col-start-10\@xxl.col-10\@xxl {
    grid-column: 10 / span 10; }

  .col-start-10.col-11\@xxl,
  .col-start-10\@xxl.col-11\@xxl {
    grid-column: 10 / span 11; }

  .col-start-10.col-12\@xxl,
  .col-start-10\@xxl.col-12\@xxl {
    grid-column: 10 / span 12; }

  .col-11\@xxl {
    --grid-columns: 11;
    grid-column: span 11; }

  .col-start-11\@xxl {
    grid-column-start: 11; }

  .col-end-12\@xxl {
    grid-column-end: 13; }

  .col-start-11.col-1\@xxl,
  .col-start-11\@xxl.col-1\@xxl {
    grid-column: 11 / span 1; }

  .col-start-11.col-2\@xxl,
  .col-start-11\@xxl.col-2\@xxl {
    grid-column: 11 / span 2; }

  .col-start-11.col-3\@xxl,
  .col-start-11\@xxl.col-3\@xxl {
    grid-column: 11 / span 3; }

  .col-start-11.col-4\@xxl,
  .col-start-11\@xxl.col-4\@xxl {
    grid-column: 11 / span 4; }

  .col-start-11.col-5\@xxl,
  .col-start-11\@xxl.col-5\@xxl {
    grid-column: 11 / span 5; }

  .col-start-11.col-6\@xxl,
  .col-start-11\@xxl.col-6\@xxl {
    grid-column: 11 / span 6; }

  .col-start-11.col-7\@xxl,
  .col-start-11\@xxl.col-7\@xxl {
    grid-column: 11 / span 7; }

  .col-start-11.col-8\@xxl,
  .col-start-11\@xxl.col-8\@xxl {
    grid-column: 11 / span 8; }

  .col-start-11.col-9\@xxl,
  .col-start-11\@xxl.col-9\@xxl {
    grid-column: 11 / span 9; }

  .col-start-11.col-10\@xxl,
  .col-start-11\@xxl.col-10\@xxl {
    grid-column: 11 / span 10; }

  .col-start-11.col-11\@xxl,
  .col-start-11\@xxl.col-11\@xxl {
    grid-column: 11 / span 11; }

  .col-start-11.col-12\@xxl,
  .col-start-11\@xxl.col-12\@xxl {
    grid-column: 11 / span 12; }

  .col-12\@xxl {
    --grid-columns: 12;
    grid-column: span 12; }

  .col-start-12\@xxl {
    grid-column-start: 12; }

  .col-end-13\@xxl {
    grid-column-end: 14; }

  .col-start-12.col-1\@xxl,
  .col-start-12\@xxl.col-1\@xxl {
    grid-column: 12 / span 1; }

  .col-start-12.col-2\@xxl,
  .col-start-12\@xxl.col-2\@xxl {
    grid-column: 12 / span 2; }

  .col-start-12.col-3\@xxl,
  .col-start-12\@xxl.col-3\@xxl {
    grid-column: 12 / span 3; }

  .col-start-12.col-4\@xxl,
  .col-start-12\@xxl.col-4\@xxl {
    grid-column: 12 / span 4; }

  .col-start-12.col-5\@xxl,
  .col-start-12\@xxl.col-5\@xxl {
    grid-column: 12 / span 5; }

  .col-start-12.col-6\@xxl,
  .col-start-12\@xxl.col-6\@xxl {
    grid-column: 12 / span 6; }

  .col-start-12.col-7\@xxl,
  .col-start-12\@xxl.col-7\@xxl {
    grid-column: 12 / span 7; }

  .col-start-12.col-8\@xxl,
  .col-start-12\@xxl.col-8\@xxl {
    grid-column: 12 / span 8; }

  .col-start-12.col-9\@xxl,
  .col-start-12\@xxl.col-9\@xxl {
    grid-column: 12 / span 9; }

  .col-start-12.col-10\@xxl,
  .col-start-12\@xxl.col-10\@xxl {
    grid-column: 12 / span 10; }

  .col-start-12.col-11\@xxl,
  .col-start-12\@xxl.col-11\@xxl {
    grid-column: 12 / span 11; }

  .col-start-12.col-12\@xxl,
  .col-start-12\@xxl.col-12\@xxl {
    grid-column: 12 / span 12; } }
:root {
  --sans: "TT_Norms_cmp", Helvetica, Arial, sans-serif;
  --condensed: "TT_Norms_cnd", Helvetica, Arial, sans-serif;
  --serif: Georgia, serif;
  --mono: Courier, monospace;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600; }

#main-header .logo-box h1 {
  margin-top: 2px;
  font-family: var(--condensed);
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  line-height: 1em; }
  #main-header .logo-box h1 b,
  #main-header .logo-box h1 strong {
    font-weight: var(--weight-600); }
  #main-header .logo-box h1 i,
  #main-header .logo-box h1 em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    #main-header .logo-box h1 {
      margin-top: 3px;
      font-size: 36px; } }
  @media screen and (min-width: 1280px) {
    #main-header .logo-box h1 {
      margin-top: 4px;
      font-size: 48px; } }
  @media screen and (min-width: 1440px) {
    #main-header .logo-box h1 {
      margin-top: 5px;
      font-size: 54px; } }
  @media screen and (min-width: 1920px) {
    #main-header .logo-box h1 {
      margin-top: 6px;
      font-size: 60px; } }

.f-logo-caption {
  margin-top: 2px;
  font-family: var(--condensed);
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  line-height: 1em; }
  .f-logo-caption b,
  .f-logo-caption strong {
    font-weight: var(--weight-600); }
  .f-logo-caption i,
  .f-logo-caption em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-logo-caption {
      margin-top: 3px;
      font-size: 36px; } }
  @media screen and (min-width: 1280px) {
    .f-logo-caption {
      margin-top: 4px;
      font-size: 48px; } }
  @media screen and (min-width: 1440px) {
    .f-logo-caption {
      margin-top: 5px;
      font-size: 54px; } }
  @media screen and (min-width: 1920px) {
    .f-logo-caption {
      margin-top: 6px;
      font-size: 60px; } }

.f-main-title-medium {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.03em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-main-title-medium b,
  .f-main-title-medium strong {
    font-weight: var(--weight-600); }
  .f-main-title-medium i,
  .f-main-title-medium em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-main-title-medium {
      font-size: 48px; } }
  @media screen and (min-width: 1280px) {
    .f-main-title-medium {
      font-size: 60px; } }
  @media screen and (min-width: 1440px) {
    .f-main-title-medium {
      font-size: 84px; } }

.f-subhead {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-subhead b,
  .f-subhead strong {
    font-weight: var(--weight-600); }
  .f-subhead i,
  .f-subhead em {
    font-style: italic; }
  @media screen and (min-width: 1280px) {
    .f-subhead {
      font-size: 36px; } }
  @media screen and (min-width: 1440px) {
    .f-subhead {
      font-size: 42px; } }

.f-h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h1 b,
  .f-h1 strong {
    font-weight: var(--weight-600); }
  .f-h1 i,
  .f-h1 em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-h1 {
      font-size: 36px; } }
  @media screen and (min-width: 1280px) {
    .f-h1 {
      font-size: 48px; } }
  @media screen and (min-width: 1440px) {
    .f-h1 {
      font-size: 60px; } }

.f-h1-a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h1-a b,
  .f-h1-a strong {
    font-weight: var(--weight-600); }
  .f-h1-a i,
  .f-h1-a em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-h1-a {
      font-size: 36px; } }
  @media screen and (min-width: 1440px) {
    .f-h1-a {
      font-size: 48px; } }

.f-h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h2 b,
  .f-h2 strong {
    font-weight: var(--weight-600); }
  .f-h2 i,
  .f-h2 em {
    font-style: italic; }
  @media screen and (min-width: 1280px) {
    .f-h2 {
      font-size: 48px; } }
  @media screen and (min-width: 1440px) {
    .f-h2 {
      font-size: 60px; } }

.f-h2-a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h2-a b,
  .f-h2-a strong {
    font-weight: var(--weight-600); }
  .f-h2-a i,
  .f-h2-a em {
    font-style: italic; }
  @media screen and (min-width: 1280px) {
    .f-h2-a {
      font-size: 30px; } }
  @media screen and (min-width: 1440px) {
    .f-h2-a {
      font-size: 36px; } }

.f-h2-a2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h2-a2 b,
  .f-h2-a2 strong {
    font-weight: var(--weight-600); }
  .f-h2-a2 i,
  .f-h2-a2 em {
    font-style: italic; }
  @media screen and (min-width: 1440px) {
    .f-h2-a2 {
      font-size: 30px; } }

.f-h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h3 b,
  .f-h3 strong {
    font-weight: var(--weight-600); }
  .f-h3 i,
  .f-h3 em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-h3 {
      font-size: 16px; } }
  @media screen and (min-width: 1280px) {
    .f-h3 {
      font-size: 18px; } }
  @media screen and (min-width: 1440px) {
    .f-h3 {
      font-size: 20px; } }

.f-h3-a {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h3-a b,
  .f-h3-a strong {
    font-weight: var(--weight-600); }
  .f-h3-a i,
  .f-h3-a em {
    font-style: italic; }
  @media screen and (min-width: 1440px) {
    .f-h3-a {
      font-size: 28px; } }

.f-h4 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-h4 b,
  .f-h4 strong {
    font-weight: var(--weight-600); }
  .f-h4 i,
  .f-h4 em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-h4 {
      font-size: 16px; } }

#dev-colors .palette .color p, .footer li, .card .card-content .content-box .tagline, .card-employee .card-content h2, .button, #main-statusbar p {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25em;
  letter-spacing: 0.0025em;
  font-feature-settings: "liga" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss06" 1, "ss20" 1; }
  #dev-colors .palette .color p b, .footer li b, .card .card-content .content-box .tagline b, .card-employee .card-content h2 b, .button b, #main-statusbar p b,
  #dev-colors .palette .color p strong,
  .footer li strong,
  .card .card-content .content-box .tagline strong,
  .card-employee .card-content h2 strong,
  .button strong,
  #main-statusbar p strong {
    font-weight: var(--weight-600); }
  #dev-colors .palette .color p i, .footer li i, .card .card-content .content-box .tagline i, .card-employee .card-content h2 i, .button i, #main-statusbar p i,
  #dev-colors .palette .color p em,
  .footer li em,
  .card .card-content .content-box .tagline em,
  .card-employee .card-content h2 em,
  .button em,
  #main-statusbar p em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    #dev-colors .palette .color p, .footer li, .card .card-content .content-box .tagline, .card-employee .card-content h2, .button, #main-statusbar p {
      font-size: 16px; } }
  @media screen and (min-width: 1280px) {
    #dev-colors .palette .color p, .footer li, .card .card-content .content-box .tagline, .card-employee .card-content h2, .button, #main-statusbar p {
      font-size: 18px; } }
  @media screen and (min-width: 1440px) {
    #dev-colors .palette .color p, .footer li, .card .card-content .content-box .tagline, .card-employee .card-content h2, .button, #main-statusbar p {
      font-size: 22px; } }

.f-body {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25em;
  letter-spacing: 0.0025em;
  font-feature-settings: "liga" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss06" 1, "ss20" 1; }
  .f-body b,
  .f-body strong {
    font-weight: var(--weight-600); }
  .f-body i,
  .f-body em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-body {
      font-size: 16px; } }
  @media screen and (min-width: 1280px) {
    .f-body {
      font-size: 18px; } }
  @media screen and (min-width: 1440px) {
    .f-body {
      font-size: 22px; } }

.f-body-mono {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.35;
  letter-spacing: -0.05em; }
  .f-body-mono b,
  .f-body-mono strong {
    font-weight: var(--weight-600); }
  .f-body-mono i,
  .f-body-mono em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-body-mono {
      font-size: 16px; } }
  @media screen and (min-width: 1280px) {
    .f-body-mono {
      font-size: 18px; } }
  @media screen and (min-width: 1440px) {
    .f-body-mono {
      font-size: 20px; } }

.card .card-content .action-box p, .card-employee .card-content .title, .card-employee .card-content h3 {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .card .card-content .action-box p b, .card-employee .card-content .title b, .card-employee .card-content h3 b,
  .card .card-content .action-box p strong,
  .card-employee .card-content .title strong,
  .card-employee .card-content h3 strong {
    font-weight: var(--weight-600); }
  .card .card-content .action-box p i, .card-employee .card-content .title i, .card-employee .card-content h3 i,
  .card .card-content .action-box p em,
  .card-employee .card-content .title em,
  .card-employee .card-content h3 em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .card .card-content .action-box p, .card-employee .card-content .title, .card-employee .card-content h3 {
      font-size: 12px; } }
  @media screen and (min-width: 1280px) {
    .card .card-content .action-box p, .card-employee .card-content .title, .card-employee .card-content h3 {
      font-size: 14px; } }
  @media screen and (min-width: 1440px) {
    .card .card-content .action-box p, .card-employee .card-content .title, .card-employee .card-content h3 {
      font-size: 16px; } }

.f-body-small {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-body-small b,
  .f-body-small strong {
    font-weight: var(--weight-600); }
  .f-body-small i,
  .f-body-small em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-body-small {
      font-size: 12px; } }
  @media screen and (min-width: 1280px) {
    .f-body-small {
      font-size: 14px; } }
  @media screen and (min-width: 1440px) {
    .f-body-small {
      font-size: 16px; } }

.f-ui {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400; }
  .f-ui b,
  .f-ui strong {
    font-weight: var(--weight-600); }
  .f-ui i,
  .f-ui em {
    font-style: italic; }

.f-code {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400; }
  .f-code b,
  .f-code strong {
    font-weight: var(--weight-600); }
  .f-code i,
  .f-code em {
    font-style: italic; }

.f-card-title-large {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  .f-card-title-large b,
  .f-card-title-large strong {
    font-weight: var(--weight-600); }
  .f-card-title-large i,
  .f-card-title-large em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    .f-card-title-large {
      font-size: 36px; } }
  @media screen and (min-width: 1280px) {
    .f-card-title-large {
      font-size: 48px; } }
  @media screen and (min-width: 1440px) {
    .f-card-title-large {
      font-size: 60px; } }

/* generate responsive spacing placeholders and classes */
.mt-outer-1 {
  margin-top: var(--spacing-outer-1); }

.mb-outer-1 {
  margin-bottom: var(--spacing-outer-1); }

.ml-outer-1 {
  margin-left: var(--spacing-outer-1); }

.mr-outer-1 {
  margin-right: var(--spacing-outer-1); }

.m-outer-1 {
  margin: var(--spacing-outer-1); }

.mx-outer-1 {
  margin-right: var(--spacing-outer-1);
  margin-left: var(--spacing-outer-1); }

.my-outer-1 {
  margin-top: var(--spacing-outer-1);
  margin-bottom: var(--spacing-outer-1); }

.pt-outer-1 {
  padding-top: var(--spacing-outer-1); }

.pb-outer-1 {
  padding-bottom: var(--spacing-outer-1); }

.pl-outer-1 {
  padding-left: var(--spacing-outer-1); }

.pr-outer-1 {
  padding-right: var(--spacing-outer-1); }

.p-outer-1 {
  padding: var(--spacing-outer-1); }

.px-outer-1 {
  padding-right: var(--spacing-outer-1);
  padding-left: var(--spacing-outer-1); }

.py-outer-1 {
  padding-top: var(--spacing-outer-1);
  padding-bottom: var(--spacing-outer-1); }

.top-outer-1 {
  top: var(--spacing-outer-1); }

.bottom-outer-1 {
  bottom: var(--spacing-outer-1); }

.left-outer-1 {
  left: var(--spacing-outer-1); }

.right-outer-1 {
  right: var(--spacing-outer-1); }

.inset-outer-1 {
  inset: var(--spacing-outer-1); }

.inset-x-outer-1 {
  inset-x: var(--spacing-outer-1); }

.inset-y-outer-1 {
  inset-y: var(--spacing-outer-1); }

.gap-outer-1 {
  gap: var(--spacing-outer-1); }

.gap-x-outer-1 {
  column-gap: var(--spacing-outer-1); }

.gap-y-outer-1 {
  row-gap: var(--spacing-outer-1); }

.-mt-outer-1 {
  margin-top: calc(var(--spacing-outer-1) * -1); }

.-mb-outer-1 {
  margin-bottom: calc(var(--spacing-outer-1) * -1); }

.-ml-outer-1 {
  margin-left: calc(var(--spacing-outer-1) * -1); }

.-mr-outer-1 {
  margin-right: calc(var(--spacing-outer-1) * -1); }

.-m-outer-1 {
  margin: calc(var(--spacing-outer-1) * -1); }

.-mx-outer-1 {
  margin-right: calc(var(--spacing-outer-1) * -1);
  margin-left: calc(var(--spacing-outer-1) * -1); }

.-my-outer-1 {
  margin-top: calc(var(--spacing-outer-1) * -1);
  margin-bottom: calc(var(--spacing-outer-1) * -1); }

.-top-outer-1 {
  top: calc(var(--spacing-outer-1) * -1); }

.-bottom-outer-1 {
  bottom: calc(var(--spacing-outer-1) * -1); }

.-left-outer-1 {
  left: calc(var(--spacing-outer-1) * -1); }

.-right-outer-1 {
  right: calc(var(--spacing-outer-1) * -1); }

.-inset-outer-1 {
  inset: calc(var(--spacing-outer-1) * -1); }

.-inset-x-outer-1 {
  inset-x: calc(var(--spacing-outer-1) * -1); }

.-inset-y-outer-1 {
  inset-y: calc(var(--spacing-outer-1) * -1); }

/* generate responsive spacing placeholders and classes */
.mt-inner-1 {
  margin-top: var(--spacing-inner-1); }

.mb-inner-1 {
  margin-bottom: var(--spacing-inner-1); }

.ml-inner-1 {
  margin-left: var(--spacing-inner-1); }

.mr-inner-1 {
  margin-right: var(--spacing-inner-1); }

.m-inner-1 {
  margin: var(--spacing-inner-1); }

.mx-inner-1 {
  margin-right: var(--spacing-inner-1);
  margin-left: var(--spacing-inner-1); }

.my-inner-1 {
  margin-top: var(--spacing-inner-1);
  margin-bottom: var(--spacing-inner-1); }

.pt-inner-1 {
  padding-top: var(--spacing-inner-1); }

.pb-inner-1 {
  padding-bottom: var(--spacing-inner-1); }

.pl-inner-1 {
  padding-left: var(--spacing-inner-1); }

.pr-inner-1 {
  padding-right: var(--spacing-inner-1); }

.p-inner-1 {
  padding: var(--spacing-inner-1); }

.px-inner-1 {
  padding-right: var(--spacing-inner-1);
  padding-left: var(--spacing-inner-1); }

.py-inner-1 {
  padding-top: var(--spacing-inner-1);
  padding-bottom: var(--spacing-inner-1); }

.top-inner-1 {
  top: var(--spacing-inner-1); }

.bottom-inner-1 {
  bottom: var(--spacing-inner-1); }

.left-inner-1 {
  left: var(--spacing-inner-1); }

.right-inner-1 {
  right: var(--spacing-inner-1); }

.inset-inner-1 {
  inset: var(--spacing-inner-1); }

.inset-x-inner-1 {
  inset-x: var(--spacing-inner-1); }

.inset-y-inner-1 {
  inset-y: var(--spacing-inner-1); }

.gap-inner-1 {
  gap: var(--spacing-inner-1); }

.gap-x-inner-1 {
  column-gap: var(--spacing-inner-1); }

.gap-y-inner-1 {
  row-gap: var(--spacing-inner-1); }

.-mt-inner-1 {
  margin-top: calc(var(--spacing-inner-1) * -1); }

.-mb-inner-1 {
  margin-bottom: calc(var(--spacing-inner-1) * -1); }

.-ml-inner-1 {
  margin-left: calc(var(--spacing-inner-1) * -1); }

.-mr-inner-1 {
  margin-right: calc(var(--spacing-inner-1) * -1); }

.-m-inner-1 {
  margin: calc(var(--spacing-inner-1) * -1); }

.-mx-inner-1 {
  margin-right: calc(var(--spacing-inner-1) * -1);
  margin-left: calc(var(--spacing-inner-1) * -1); }

.-my-inner-1 {
  margin-top: calc(var(--spacing-inner-1) * -1);
  margin-bottom: calc(var(--spacing-inner-1) * -1); }

.-top-inner-1 {
  top: calc(var(--spacing-inner-1) * -1); }

.-bottom-inner-1 {
  bottom: calc(var(--spacing-inner-1) * -1); }

.-left-inner-1 {
  left: calc(var(--spacing-inner-1) * -1); }

.-right-inner-1 {
  right: calc(var(--spacing-inner-1) * -1); }

.-inset-inner-1 {
  inset: calc(var(--spacing-inner-1) * -1); }

.-inset-x-inner-1 {
  inset-x: calc(var(--spacing-inner-1) * -1); }

.-inset-y-inner-1 {
  inset-y: calc(var(--spacing-inner-1) * -1); }

/* generate responsive spacing placeholders and classes */
.mt-inner-2 {
  margin-top: var(--spacing-inner-2); }

.mb-inner-2 {
  margin-bottom: var(--spacing-inner-2); }

.ml-inner-2 {
  margin-left: var(--spacing-inner-2); }

.mr-inner-2 {
  margin-right: var(--spacing-inner-2); }

.m-inner-2 {
  margin: var(--spacing-inner-2); }

.mx-inner-2 {
  margin-right: var(--spacing-inner-2);
  margin-left: var(--spacing-inner-2); }

.my-inner-2 {
  margin-top: var(--spacing-inner-2);
  margin-bottom: var(--spacing-inner-2); }

.pt-inner-2 {
  padding-top: var(--spacing-inner-2); }

.pb-inner-2 {
  padding-bottom: var(--spacing-inner-2); }

.pl-inner-2 {
  padding-left: var(--spacing-inner-2); }

.pr-inner-2 {
  padding-right: var(--spacing-inner-2); }

.p-inner-2 {
  padding: var(--spacing-inner-2); }

.px-inner-2 {
  padding-right: var(--spacing-inner-2);
  padding-left: var(--spacing-inner-2); }

.py-inner-2 {
  padding-top: var(--spacing-inner-2);
  padding-bottom: var(--spacing-inner-2); }

.top-inner-2 {
  top: var(--spacing-inner-2); }

.bottom-inner-2 {
  bottom: var(--spacing-inner-2); }

.left-inner-2 {
  left: var(--spacing-inner-2); }

.right-inner-2 {
  right: var(--spacing-inner-2); }

.inset-inner-2 {
  inset: var(--spacing-inner-2); }

.inset-x-inner-2 {
  inset-x: var(--spacing-inner-2); }

.inset-y-inner-2 {
  inset-y: var(--spacing-inner-2); }

.gap-inner-2 {
  gap: var(--spacing-inner-2); }

.gap-x-inner-2 {
  column-gap: var(--spacing-inner-2); }

.gap-y-inner-2 {
  row-gap: var(--spacing-inner-2); }

.-mt-inner-2 {
  margin-top: calc(var(--spacing-inner-2) * -1); }

.-mb-inner-2 {
  margin-bottom: calc(var(--spacing-inner-2) * -1); }

.-ml-inner-2 {
  margin-left: calc(var(--spacing-inner-2) * -1); }

.-mr-inner-2 {
  margin-right: calc(var(--spacing-inner-2) * -1); }

.-m-inner-2 {
  margin: calc(var(--spacing-inner-2) * -1); }

.-mx-inner-2 {
  margin-right: calc(var(--spacing-inner-2) * -1);
  margin-left: calc(var(--spacing-inner-2) * -1); }

.-my-inner-2 {
  margin-top: calc(var(--spacing-inner-2) * -1);
  margin-bottom: calc(var(--spacing-inner-2) * -1); }

.-top-inner-2 {
  top: calc(var(--spacing-inner-2) * -1); }

.-bottom-inner-2 {
  bottom: calc(var(--spacing-inner-2) * -1); }

.-left-inner-2 {
  left: calc(var(--spacing-inner-2) * -1); }

.-right-inner-2 {
  right: calc(var(--spacing-inner-2) * -1); }

.-inset-inner-2 {
  inset: calc(var(--spacing-inner-2) * -1); }

.-inset-x-inner-2 {
  inset-x: calc(var(--spacing-inner-2) * -1); }

.-inset-y-inner-2 {
  inset-y: calc(var(--spacing-inner-2) * -1); }

/* generate responsive spacing placeholders and classes */
.mt-article-paragraph {
  margin-top: var(--spacing-article-paragraph); }

.mb-article-paragraph {
  margin-bottom: var(--spacing-article-paragraph); }

.ml-article-paragraph {
  margin-left: var(--spacing-article-paragraph); }

.mr-article-paragraph {
  margin-right: var(--spacing-article-paragraph); }

.m-article-paragraph {
  margin: var(--spacing-article-paragraph); }

.mx-article-paragraph {
  margin-right: var(--spacing-article-paragraph);
  margin-left: var(--spacing-article-paragraph); }

.my-article-paragraph {
  margin-top: var(--spacing-article-paragraph);
  margin-bottom: var(--spacing-article-paragraph); }

.pt-article-paragraph {
  padding-top: var(--spacing-article-paragraph); }

.pb-article-paragraph {
  padding-bottom: var(--spacing-article-paragraph); }

.pl-article-paragraph {
  padding-left: var(--spacing-article-paragraph); }

.pr-article-paragraph {
  padding-right: var(--spacing-article-paragraph); }

.p-article-paragraph {
  padding: var(--spacing-article-paragraph); }

.px-article-paragraph {
  padding-right: var(--spacing-article-paragraph);
  padding-left: var(--spacing-article-paragraph); }

.py-article-paragraph {
  padding-top: var(--spacing-article-paragraph);
  padding-bottom: var(--spacing-article-paragraph); }

.top-article-paragraph {
  top: var(--spacing-article-paragraph); }

.bottom-article-paragraph {
  bottom: var(--spacing-article-paragraph); }

.left-article-paragraph {
  left: var(--spacing-article-paragraph); }

.right-article-paragraph {
  right: var(--spacing-article-paragraph); }

.inset-article-paragraph {
  inset: var(--spacing-article-paragraph); }

.inset-x-article-paragraph {
  inset-x: var(--spacing-article-paragraph); }

.inset-y-article-paragraph {
  inset-y: var(--spacing-article-paragraph); }

.gap-article-paragraph {
  gap: var(--spacing-article-paragraph); }

.gap-x-article-paragraph {
  column-gap: var(--spacing-article-paragraph); }

.gap-y-article-paragraph {
  row-gap: var(--spacing-article-paragraph); }

.-mt-article-paragraph {
  margin-top: calc(var(--spacing-article-paragraph) * -1); }

.-mb-article-paragraph {
  margin-bottom: calc(var(--spacing-article-paragraph) * -1); }

.-ml-article-paragraph {
  margin-left: calc(var(--spacing-article-paragraph) * -1); }

.-mr-article-paragraph {
  margin-right: calc(var(--spacing-article-paragraph) * -1); }

.-m-article-paragraph {
  margin: calc(var(--spacing-article-paragraph) * -1); }

.-mx-article-paragraph {
  margin-right: calc(var(--spacing-article-paragraph) * -1);
  margin-left: calc(var(--spacing-article-paragraph) * -1); }

.-my-article-paragraph {
  margin-top: calc(var(--spacing-article-paragraph) * -1);
  margin-bottom: calc(var(--spacing-article-paragraph) * -1); }

.-top-article-paragraph {
  top: calc(var(--spacing-article-paragraph) * -1); }

.-bottom-article-paragraph {
  bottom: calc(var(--spacing-article-paragraph) * -1); }

.-left-article-paragraph {
  left: calc(var(--spacing-article-paragraph) * -1); }

.-right-article-paragraph {
  right: calc(var(--spacing-article-paragraph) * -1); }

.-inset-article-paragraph {
  inset: calc(var(--spacing-article-paragraph) * -1); }

.-inset-x-article-paragraph {
  inset-x: calc(var(--spacing-article-paragraph) * -1); }

.-inset-y-article-paragraph {
  inset-y: calc(var(--spacing-article-paragraph) * -1); }

/* generate responsive spacing placeholders and classes */
.mt-nav-1 {
  margin-top: var(--spacing-nav-1); }

.mb-nav-1 {
  margin-bottom: var(--spacing-nav-1); }

.ml-nav-1 {
  margin-left: var(--spacing-nav-1); }

.mr-nav-1 {
  margin-right: var(--spacing-nav-1); }

.m-nav-1 {
  margin: var(--spacing-nav-1); }

.mx-nav-1 {
  margin-right: var(--spacing-nav-1);
  margin-left: var(--spacing-nav-1); }

.my-nav-1 {
  margin-top: var(--spacing-nav-1);
  margin-bottom: var(--spacing-nav-1); }

.pt-nav-1 {
  padding-top: var(--spacing-nav-1); }

.pb-nav-1 {
  padding-bottom: var(--spacing-nav-1); }

.pl-nav-1 {
  padding-left: var(--spacing-nav-1); }

.pr-nav-1 {
  padding-right: var(--spacing-nav-1); }

.p-nav-1 {
  padding: var(--spacing-nav-1); }

.px-nav-1 {
  padding-right: var(--spacing-nav-1);
  padding-left: var(--spacing-nav-1); }

.py-nav-1 {
  padding-top: var(--spacing-nav-1);
  padding-bottom: var(--spacing-nav-1); }

.top-nav-1 {
  top: var(--spacing-nav-1); }

.bottom-nav-1 {
  bottom: var(--spacing-nav-1); }

.left-nav-1 {
  left: var(--spacing-nav-1); }

.right-nav-1 {
  right: var(--spacing-nav-1); }

.inset-nav-1 {
  inset: var(--spacing-nav-1); }

.inset-x-nav-1 {
  inset-x: var(--spacing-nav-1); }

.inset-y-nav-1 {
  inset-y: var(--spacing-nav-1); }

.gap-nav-1 {
  gap: var(--spacing-nav-1); }

.gap-x-nav-1 {
  column-gap: var(--spacing-nav-1); }

.gap-y-nav-1 {
  row-gap: var(--spacing-nav-1); }

.-mt-nav-1 {
  margin-top: calc(var(--spacing-nav-1) * -1); }

.-mb-nav-1 {
  margin-bottom: calc(var(--spacing-nav-1) * -1); }

.-ml-nav-1 {
  margin-left: calc(var(--spacing-nav-1) * -1); }

.-mr-nav-1 {
  margin-right: calc(var(--spacing-nav-1) * -1); }

.-m-nav-1 {
  margin: calc(var(--spacing-nav-1) * -1); }

.-mx-nav-1 {
  margin-right: calc(var(--spacing-nav-1) * -1);
  margin-left: calc(var(--spacing-nav-1) * -1); }

.-my-nav-1 {
  margin-top: calc(var(--spacing-nav-1) * -1);
  margin-bottom: calc(var(--spacing-nav-1) * -1); }

.-top-nav-1 {
  top: calc(var(--spacing-nav-1) * -1); }

.-bottom-nav-1 {
  bottom: calc(var(--spacing-nav-1) * -1); }

.-left-nav-1 {
  left: calc(var(--spacing-nav-1) * -1); }

.-right-nav-1 {
  right: calc(var(--spacing-nav-1) * -1); }

.-inset-nav-1 {
  inset: calc(var(--spacing-nav-1) * -1); }

.-inset-x-nav-1 {
  inset-x: calc(var(--spacing-nav-1) * -1); }

.-inset-y-nav-1 {
  inset-y: calc(var(--spacing-nav-1) * -1); }

/* generate responsive spacing root variables */
:root {
  --SPACING_VARs: 'at this breakpoint ↓';
  --spacing-outer-1: 4rem;
  --spacing-inner-1: 1.5rem;
  --spacing-inner-2: 1rem;
  --spacing-article-paragraph: 2rem;
  --spacing-nav-1: 0.75rem; }

@media screen and (min-width: 429px) {
  :root {
    --SPACING_VARs: 'at this breakpoint ↓';
    --spacing-outer-1: 4rem;
    --spacing-inner-1: 1.5rem;
    --spacing-inner-2: 1rem;
    --spacing-article-paragraph: 2rem;
    --spacing-nav-1: 0.75rem; } }
@media screen and (min-width: 744px) {
  :root {
    --SPACING_VARs: 'at this breakpoint ↓';
    --spacing-outer-1: 4rem;
    --spacing-inner-1: 2.5rem;
    --spacing-inner-2: 1.5rem;
    --spacing-article-paragraph: 1.5rem;
    --spacing-nav-1: 1rem; } }
@media screen and (min-width: 1280px) {
  :root {
    --SPACING_VARs: 'at this breakpoint ↓';
    --spacing-outer-1: 6rem;
    --spacing-inner-1: 4rem;
    --spacing-inner-2: 2rem;
    --spacing-article-paragraph: 2rem;
    --spacing-nav-1: 1.5rem; } }
@media screen and (min-width: 1440px) {
  :root {
    --SPACING_VARs: 'at this breakpoint ↓';
    --spacing-outer-1: 6rem;
    --spacing-inner-1: 4rem;
    --spacing-inner-2: 3rem;
    --spacing-article-paragraph: 2rem;
    --spacing-nav-1: 1.5rem; } }
@media screen and (min-width: 1920px) {
  :root {
    --SPACING_VARs: 'at this breakpoint ↓';
    --spacing-outer-1: 6rem;
    --spacing-inner-1: 4rem;
    --spacing-inner-2: 3rem;
    --spacing-article-paragraph: 2rem;
    --spacing-nav-1: 1.5rem; } }
/* generate gutter placeholders and classes */
.mt-gutter {
  margin-top: var(--inner-gutter); }

.mb-gutter {
  margin-bottom: var(--inner-gutter); }

.ml-gutter {
  margin-left: var(--inner-gutter); }

.mr-gutter {
  margin-right: var(--inner-gutter); }

.m-gutter {
  margin: var(--inner-gutter); }

.mx-gutter {
  margin-right: var(--inner-gutter);
  margin-left: var(--inner-gutter); }

.my-gutter {
  margin-top: var(--inner-gutter);
  margin-bottom: var(--inner-gutter); }

.pt-gutter {
  padding-top: var(--inner-gutter); }

.pb-gutter {
  padding-bottom: var(--inner-gutter); }

.pl-gutter {
  padding-left: var(--inner-gutter); }

.pr-gutter {
  padding-right: var(--inner-gutter); }

.p-gutter {
  padding: var(--inner-gutter); }

.px-gutter {
  padding-right: var(--inner-gutter);
  padding-left: var(--inner-gutter); }

.py-gutter {
  padding-top: var(--inner-gutter);
  padding-bottom: var(--inner-gutter); }

.top-gutter {
  top: var(--inner-gutter); }

.bottom-gutter {
  bottom: var(--inner-gutter); }

.left-gutter {
  left: var(--inner-gutter); }

.right-gutter {
  right: var(--inner-gutter); }

.inset-gutter {
  inset: var(--inner-gutter); }

.inset-x-gutter {
  inset-x: var(--inner-gutter); }

.inset-y-gutter {
  inset-y: var(--inner-gutter); }

.gap-gutter {
  gap: var(--inner-gutter); }

.gap-x-gutter {
  column-gap: var(--inner-gutter); }

.gap-y-gutter {
  row-gap: var(--inner-gutter); }

.-mt-gutter {
  margin-top: calc(var(--inner-gutter) * -1); }

.-mb-gutter {
  margin-bottom: calc(var(--inner-gutter) * -1); }

.-ml-gutter {
  margin-left: calc(var(--inner-gutter) * -1); }

.-mr-gutter {
  margin-right: calc(var(--inner-gutter) * -1); }

.-m-gutter {
  margin: calc(var(--inner-gutter) * -1); }

.-mx-gutter {
  margin-right: calc(var(--inner-gutter) * -1);
  margin-left: calc(var(--inner-gutter) * -1); }

.-my-gutter {
  margin-top: calc(var(--inner-gutter) * -1);
  margin-bottom: calc(var(--inner-gutter) * -1); }

.-top-gutter {
  top: calc(var(--inner-gutter) * -1); }

.-bottom-gutter {
  bottom: calc(var(--inner-gutter) * -1); }

.-left-gutter {
  left: calc(var(--inner-gutter) * -1); }

.-right-gutter {
  right: calc(var(--inner-gutter) * -1); }

.-inset-gutter {
  inset: calc(var(--inner-gutter) * -1); }

.-inset-x-gutter {
  inset-x: calc(var(--inner-gutter) * -1); }

.-inset-y-gutter {
  inset-y: calc(var(--inner-gutter) * -1); }

.mt-outer-gutter {
  margin-top: var(--outer-gutter); }

.mb-outer-gutter {
  margin-bottom: var(--outer-gutter); }

.ml-outer-gutter {
  margin-left: var(--outer-gutter); }

.mr-outer-gutter {
  margin-right: var(--outer-gutter); }

.m-outer-gutter {
  margin: var(--outer-gutter); }

.mx-outer-gutter {
  margin-right: var(--outer-gutter);
  margin-left: var(--outer-gutter); }

.my-outer-gutter {
  margin-top: var(--outer-gutter);
  margin-bottom: var(--outer-gutter); }

.pt-outer-gutter {
  padding-top: var(--outer-gutter); }

.pb-outer-gutter {
  padding-bottom: var(--outer-gutter); }

.pl-outer-gutter {
  padding-left: var(--outer-gutter); }

.pr-outer-gutter {
  padding-right: var(--outer-gutter); }

.p-outer-gutter {
  padding: var(--outer-gutter); }

.px-outer-gutter {
  padding-right: var(--outer-gutter);
  padding-left: var(--outer-gutter); }

.py-outer-gutter {
  padding-top: var(--outer-gutter);
  padding-bottom: var(--outer-gutter); }

.top-outer-gutter {
  top: var(--outer-gutter); }

.bottom-outer-gutter {
  bottom: var(--outer-gutter); }

.left-outer-gutter {
  left: var(--outer-gutter); }

.right-outer-gutter {
  right: var(--outer-gutter); }

.inset-outer-gutter {
  inset: var(--outer-gutter); }

.inset-x-outer-gutter {
  inset-x: var(--outer-gutter); }

.inset-y-outer-gutter {
  inset-y: var(--outer-gutter); }

.gap-outer-gutter {
  gap: var(--outer-gutter); }

.gap-x-outer-gutter {
  column-gap: var(--outer-gutter); }

.gap-y-outer-gutter {
  row-gap: var(--outer-gutter); }

.-mt-outer-gutter {
  margin-top: calc(var(--outer-gutter) * -1); }

.-mb-outer-gutter {
  margin-bottom: calc(var(--outer-gutter) * -1); }

.-ml-outer-gutter {
  margin-left: calc(var(--outer-gutter) * -1); }

.-mr-outer-gutter {
  margin-right: calc(var(--outer-gutter) * -1); }

.-m-outer-gutter {
  margin: calc(var(--outer-gutter) * -1); }

.-mx-outer-gutter {
  margin-right: calc(var(--outer-gutter) * -1);
  margin-left: calc(var(--outer-gutter) * -1); }

.-my-outer-gutter {
  margin-top: calc(var(--outer-gutter) * -1);
  margin-bottom: calc(var(--outer-gutter) * -1); }

.-top-outer-gutter {
  top: calc(var(--outer-gutter) * -1); }

.-bottom-outer-gutter {
  bottom: calc(var(--outer-gutter) * -1); }

.-left-outer-gutter {
  left: calc(var(--outer-gutter) * -1); }

.-right-outer-gutter {
  right: calc(var(--outer-gutter) * -1); }

.-inset-outer-gutter {
  inset: calc(var(--outer-gutter) * -1); }

.-inset-x-outer-gutter {
  inset-x: calc(var(--outer-gutter) * -1); }

.-inset-y-outer-gutter {
  inset-y: calc(var(--outer-gutter) * -1); }

.dev-tools {
  position: fixed;
  z-index: 9999999999;
  left: 0;
  bottom: 0;
  font-size: 0; }

.dev-tools::before {
  content: var(--breakpoint) " • " var(--env, attr(data-env));
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 100%;
  padding: 4px 5px;
  background: green;
  color: white;
  font: 12px/1 sans-serif;
  white-space: nowrap;
  pointer-events: none; }

.dev-tools-toggle {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  background: black;
  color: transparent;
  font: 0/0 a;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer; }

.dev-tools-toggle::before,
.dev-tools-toggle::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 10px;
  width: 5px;
  height: 10px;
  border-left: 1px solid white;
  border-right: 1px solid white; }

.dev-tools-toggle::after {
  left: 16px; }

.dev-tools-grid {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--container-width, 100%) - (2 * var(--outer-gutter, 0)));
  height: 100%;
  margin: 0 auto;
  background: repeating-linear-gradient(90deg, var(--grid-column-bg, rgba(127, 255, 255, 0.25)), var(--grid-column-bg, rgba(127, 255, 255, 0.25)) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns)), rgba(0, 0, 0, 0) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns)), rgba(0, 0, 0, 0) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns) + var(--inner-gutter)));
  pointer-events: none; }

#dev-colors {
  display: flex;
  flex-wrap: wrap; }
  #dev-colors .palette {
    display: flex;
    flex-basis: 100%; }
    #dev-colors .palette .color {
      flex: 1;
      padding: 10px 10px 50px 10px; }
      #dev-colors .palette .color .test-container {
        display: flex; }
        #dev-colors .palette .color .test-container > div {
          flex: 1; }
        #dev-colors .palette .color .test-container .svg-box {
          text-align: right; }
          #dev-colors .palette .color .test-container .svg-box svg {
            width: 50px;
            height: 50px; }

@media screen and (min-width: 0) and (max-width: 429px) {
  #main-article aside h1 {
    margin-top: calc(var(--spacing-article-paragraph)/2); }
  #main-article aside h2 {
    margin-bottom: var(--spacing-article-paragraph); } }
@media screen and (min-width: 429px) {
  #main-article aside h2 {
    margin-bottom: var(--spacing-article-paragraph); } }
#main-article section > p {
  /* check if user specified a `f-xxx` type name and fix */
  /* now look for the specified typeset */
  /* output specified typeset */
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25em;
  letter-spacing: 0.0025em;
  font-feature-settings: "liga" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss06" 1, "ss20" 1;
  font-family: var(--serif);
  margin-bottom: var(--spacing-article-paragraph); }
  #main-article section > p b,
  #main-article section > p strong {
    font-weight: var(--weight-600); }
  #main-article section > p i,
  #main-article section > p em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    #main-article section > p {
      font-size: 16px; } }
  @media screen and (min-width: 1280px) {
    #main-article section > p {
      font-size: 18px; } }
  @media screen and (min-width: 1440px) {
    #main-article section > p {
      font-size: 22px; } }
  #main-article section > p a {
    text-decoration: underline; }
#main-article section p.teaser {
  font-family: var(--sans); }
#main-article section h3 {
  padding-top: var(--spacing-article-paragraph); }
#main-article section ul {
  margin: calc(var(--spacing-article-paragraph)/2) 0 var(--spacing-article-paragraph) 0; }
  #main-article section ul li {
    margin-left: 1em;
    padding: 0 0 calc(var(--spacing-article-paragraph)/2) 0.5em; }

@-ms-viewport {
  width: device-width; }
html {
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
  height: 100%;
  touch-action: manipulation;
  scroll-behavior: smooth;
  font-size: 10px; }

html.overlay {
  scroll-behavior: auto; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  touch-action: inherit; }

body {
  min-height: 100%;
  font-family: var(--sans);
  font-kerning: normal;
  line-height: 1;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: 'kern' on;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--antracite-80); }

#main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 100vw;
  min-height: 100vh; }

.flex {
  display: flex; }

a {
  text-decoration: none;
  color: inherit; }

a:hover {
  text-decoration: underline; }

@media screen and (max-width: 744px) {
  .hidden-sm {
    display: none !important; } }

@media screen and (max-width: 1280px) {
  .hidden-md {
    display: none !important; } }

@media screen and (max-width: 1440px) {
  .hidden-lg {
    display: none !important; } }

@media screen and (min-width: 429px) {
  .shown-sm {
    display: flex !important; } }

@media screen and (min-width: 429px) {
  .shown-sm-inline {
    display: inline-flex !important; } }

@media screen and (min-width: 744px) {
  .shown-md {
    display: flex !important; } }

@media screen and (min-width: 744px) {
  .shown-md-inline {
    display: inline-flex !important; } }

@media screen and (min-width: 1280px) {
  .shown-lg {
    display: flex !important; } }

@media screen and (min-width: 1280px) {
  .shown-lg-inline {
    display: inline-flex !important; } }

@media screen and (min-width: 1440px) {
  .shown-xl {
    display: flex !important; } }

@media screen and (min-width: 1440px) {
  .shown-xl-inline {
    display: inline-flex !important; } }

.c_red, .c_accent {
  color: var(--red-50) !important; }

.c_darkblue {
  color: var(--blue-80) !important; }

@font-face {
  font-family: "TT_Norms_cmp";
  font-weight: 400;
  src: url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Compact_Regular.woff2") format("woff2"), url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Compact_Regular.woff") format("woff"); }
@font-face {
  font-family: "TT_Norms_cmp";
  font-weight: 500;
  src: url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Compact_DemiBold.woff2") format("woff2"), url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Compact_DemiBold.woff") format("woff"); }
@font-face {
  font-family: "TT_Norms_cmp";
  font-weight: 600;
  src: url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Compact_Bold.woff2") format("woff2"), url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Compact_Bold.woff") format("woff"); }
@font-face {
  font-family: "TT_Norms_cnd";
  font-weight: 900;
  src: url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Condensed_ExtraBlack.woff2") format("woff2"), url("../../files/bba-mu/fonts/TT_Norms/TT_Norms_Pro_Condensed_ExtraBlack.woff") format("woff"); }
.underline {
  text-decoration-line: underline; }

.overline {
  text-decoration-line: overline; }

.line-through {
  text-decoration-line: line-through; }

.no-underline {
  text-decoration-line: none; }

.decoration-transparent {
  text-decoration-color: transparent; }

.decoration-1 {
  text-decoration-thickness: 1px; }

.underline-offset-4 {
  text-underline-offset: 4px; }

.underline-offset-2 {
  text-underline-offset: 2px; }

.underline-offset-1 {
  text-underline-offset: 1px; }

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.uppercase {
  text-transform: uppercase; }

.lowercase {
  text-transform: lowercase; }

.ff-tnum {
  font-feature-settings: "tnum" 1; }

.ff-dlig {
  font-feature-settings: "dlig" 1; }

#main-footer .ft-el {
  margin-top: calc(var(--spacing-nav-1)/2);
  margin-bottom: calc(var(--spacing-nav-1)/2); }
@media screen and (min-width: 0) and (max-width: 429px) {
  #main-footer nav p .ft-el-box {
    display: block; } }
@media screen and (min-width: 0) {
  #main-footer section {
    padding: 20px 0; } }
@media screen and (min-width: 744px) {
  #main-footer section {
    padding: 25px 0; } }
@media screen and (min-width: 1280px) {
  #main-footer section {
    padding: 30px 0; } }
#main-footer section {
  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
  margin-left: auto;
  margin-right: auto; }
  #main-footer section a {
    display: inline-block; }
#main-footer section > p {
  /* check if user specified a `f-xxx` type name and fix */
  /* now look for the specified typeset */
  /* output specified typeset */
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25em;
  letter-spacing: 0.0025em;
  font-feature-settings: "liga" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss06" 1, "ss20" 1; }
  #main-footer section > p b,
  #main-footer section > p strong {
    font-weight: var(--weight-600); }
  #main-footer section > p i,
  #main-footer section > p em {
    font-style: italic; }
  @media screen and (min-width: 744px) {
    #main-footer section > p {
      font-size: 16px; } }
  @media screen and (min-width: 1280px) {
    #main-footer section > p {
      font-size: 18px; } }
  @media screen and (min-width: 1440px) {
    #main-footer section > p {
      font-size: 22px; } }

.footer {
  margin-top: 60px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid var(--border-primary); }
  .footer ul {
    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
    margin-left: auto;
    margin-right: auto; }
    @media screen and (min-width: 429px) {
      .footer ul {
        display: flex;
        flex-direction: row; } }
  .footer li {
    margin-top: 20px;
    list-style-type: none; }
    @media screen and (min-width: 429px) {
      .footer li {
        margin-top: 0;
        margin-right: 20px; } }
  .footer li:first-child {
    margin-right: auto; }
  .footer li:last-child {
    margin-right: 0; }
  .footer a {
    color: var(--text-primary);
    text-decoration: none; }
  .footer svg {
    display: inline-block;
    vertical-align: text-bottom; }

.card {
  display: flex;
  margin-bottom: 30px;
  border-radius: 15px;
  padding: 20px;
  overflow: hidden; }
  .card .card-content {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    flex: 1; }
    .card .card-content .content-box {
      flex: 1 0; }
      .card .card-content .content-box h2 {
        line-height: 1; }
      .card .card-content .content-box .tagline {
        font-weight: 500; }
    .card .card-content .action-box {
      display: flex;
      align-items: center;
      border-top: 1px solid var(--blue-80);
      margin: 0 0 -20px 0;
      height: 50px; }
      .card .card-content .action-box p {
        display: flex;
        align-items: center;
        flex: 1; }
        .card .card-content .action-box p span {
          flex: 1; }
        .card .card-content .action-box p .text-icon {
          border-radius: 100%;
          width: 25px;
          height: 25px; }
  .card .card-img {
    margin: -20px -20px -20px 20px;
    background: red;
    background-size: contain; }

a.card:hover {
  text-decoration: none; }

.card-s {
  min-height: 180px; }
  .card-s .card-img {
    width: 180px;
    height: 180px; }

.card-employee {
  background-color: var(--blue-5); }

.card-blue {
  background-color: var(--blue-80); }
  .card-blue .card-content * {
    color: var(--white); }
  .card-blue .card-content .text-icon {
    fill: var(--white); }
  .card-blue .action-box {
    border-top-color: var(--white) !important; }

.card-blue-light {
  background-color: var(--blue-5); }
  .card-blue-light .card-content * {
    color: var(--blue-80); }
  .card-blue-light .card-content .text-icon {
    fill: var(--blue-80); }
  .card-blue-light .action-box {
    border-top-color: var(--blue-80) !important; }

.card-red {
  background-color: var(--red-50); }
  .card-red .card-content * {
    color: var(--white); }
  .card-red .card-content .text-icon {
    fill: var(--white); }
  .card-red .action-box {
    border-top-color: var(--white) !important; }

.card-red-light {
  background-color: var(--red-5); }
  .card-red-light .card-content * {
    color: var(--red-80); }
  .card-red-light .card-content .text-icon {
    fill: var(--red-80); }
  .card-red-light .action-box {
    border-top-color: var(--red-80) !important; }

.card-darkred {
  background-color: var(--red-90); }
  .card-darkred .card-content * {
    color: var(--red-50); }
  .card-darkred .card-content .text-icon {
    fill: var(--white); }
  .card-darkred .action-box {
    border-top-color: var(--red-50) !important; }
    .card-darkred .action-box * {
      color: var(--white); }

.chronology {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--antracite-10); }
  .chronology .text-block {
    margin-bottom: 0; }

.global__footer {
  padding: 30px 0; }
  .global__footer ul {
    display: block;
    width: 100%;
    list-style: none; }
    .global__footer ul li {
      float: left;
      margin-right: 1em; }
    .global__footer ul li:last-child {
      margin-right: 0; }

.button {
  display: inline-flex;
  justify-content: center;
  margin-right: .5em;
  border-radius: calc(2*1.5em);
  cursor: pointer;
  line-height: 2; }

.button:hover {
  text-decoration: none; }

a.button {
  text-decoration: none !important; }

.button-filled {
  padding: .5rem .75em; }

.button-outline {
  border-style: solid;
  border-width: 1px;
  padding: calc(.5rem - 1px) calc(.75em - 1px); }

@media screen and (min-width: 744px) {
  .button {
    line-height: 1.75; } }
#main-statusbar {
  display: flex;
  padding: 0 var(--inner-gutter); }
  #main-statusbar p {
    line-height: 3em; }
    #main-statusbar p a {
      text-decoration: underline; }
    #main-statusbar p a:hover {
      text-decoration: none; }
  #main-statusbar > p {
    flex: 1; }
  #main-statusbar .current-weather {
    display: flex;
    align-items: center; }
    #main-statusbar .current-weather * {
      font-weight: 500; }
    #main-statusbar .current-weather svg {
      fill: var(--white); }
      @media screen and (max-width: 1440px) {
        #main-statusbar .current-weather svg {
          margin-right: 6px;
          width: 28px;
          height: 28px; } }
      @media screen and (min-width: 1280px) {
        #main-statusbar .current-weather svg {
          margin-right: 10px;
          width: 36px;
          height: 36px; } }

#main-header {
  display: flex;
  padding: var(--inner-gutter);
  margin-bottom: calc(var(--outer-gutter)/2); }
  #main-header .logo-box {
    display: inline-flex;
    align-items: center; }
    @media screen and (max-width: 744px) {
      #main-header .logo-box svg {
        margin-right: calc(56px/4);
        width: 56px;
        height: 56px; } }
    @media screen and (min-width: 744px) {
      #main-header .logo-box svg {
        margin-right: calc(80px/4);
        width: 80px;
        height: 80px; } }
    @media screen and (min-width: 1280px) {
      #main-header .logo-box svg {
        margin-right: calc(108px/4);
        width: 108px;
        height: 108px; } }
    @media screen and (min-width: 1440px) {
      #main-header .logo-box svg {
        margin-right: calc(120px/4);
        width: 120px;
        height: 120px; } }
    @media screen and (min-width: 1920px) {
      #main-header .logo-box svg {
        margin-right: calc(132px/4);
        width: 132px;
        height: 132px; } }

#main__content.jobs aside h3 {
  margin: 1em 0; }

.pdf-viewer {
  margin: 25px 0;
  width: 300px;
  height: calc(300px*1.7); }

@media screen and (min-width: 744px) and (max-width: 1280px) {
  .pdf-viewer {
    margin: 50px 0;
    width: 700px;
    height: calc(700px*1.7); } }
@media screen and (min-width: 1280px) {
  .pdf-viewer {
    margin: 50px 0;
    width: 1000px;
    height: calc(1000px*1.7); } }
.global__separator {
  padding-top: 50px; }
  .global__separator hr {
    border: none;
    height: 1px;
    background: var(--antracite-20); }
  .global__separator h2 {
    padding: 1em 0;
    font-weight: 500; }

#main__content {
  padding-top: 50px; }

.text-block {
  margin-bottom: 50px; }
  .text-block > *:first-child {
    padding-top: 0; }
  .text-block h3 {
    padding: 1em 0 .5em 0; }
  .text-block h4, .text-block p:not(.button), .text-block ul, .text-block ol {
    padding-bottom: 1em; }
  .text-block a {
    text-decoration: underline; }
  .text-block a:hover {
    text-decoration: none; }
  .text-block .button-filled {
    color: #fff;
    background: var(--blue-80); }
  .text-block ul, .text-block ol {
    padding-left: calc(1em + 2px); }
    .text-block ul ul, .text-block ul ol, .text-block ol ul, .text-block ol ol {
      padding-top: .5em;
      padding-bottom: 0; }
      .text-block ul ul li:last-child, .text-block ul ol li:last-child, .text-block ol ul li:last-child, .text-block ol ol li:last-child {
        padding-bottom: 0; }
  .text-block ul li, .text-block ol li {
    padding-bottom: .5em; }
  .text-block blockquote {
    margin: 1em 0;
    border-left: 2px solid var(--blue-80);
    padding-left: 1em; }
    .text-block blockquote > *:first-child {
      padding-top: 0; }
    .text-block blockquote > *:last-child {
      padding-bottom: 0; }
  .text-block .expand-box .expand-content {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.75, 0, 0.25, 1);
    max-height: 0; }
  .text-block .expand-box .expand-button span:after {
    content: 'weiterlesen'; }
  .text-block .expand-box .expand-button.active span:after {
    content: 'Text schließen'; }

body.medicinal-cannabis #main__content {
  background: var(--cyan-90); }
  body.medicinal-cannabis #main__content * {
    color: var(--cyan-50); }
  body.medicinal-cannabis #main__content .button {
    background: var(--cyan-80); }
  body.medicinal-cannabis #main__content .button:hover {
    background: var(--cyan-70); }

body.yellow-theme #main-header {
  background: var(--theme-yellow-bg); }
  body.yellow-theme #main-header .logo-box svg {
    fill: var(--theme-yellow-accent); }
  body.yellow-theme #main-header h1 {
    color: var(--theme-yellow-text); }
body.blue-theme #main-header {
  background: var(--theme-blue-bg); }
  body.blue-theme #main-header .logo-box svg {
    fill: var(--theme-blue-accent); }
  body.blue-theme #main-header h1 {
    color: var(--theme-blue-text); }
body.green-theme #main-statusbar {
  background: var(--theme-green-bg-contrast); }
  body.green-theme #main-statusbar * {
    color: var(--white); }
  body.green-theme #main-statusbar svg {
    fill: var(--white); }
body.green-theme #main-header {
  background: var(--theme-green-bg); }
  body.green-theme #main-header .logo-box svg {
    fill: var(--theme-green-accent); }
  body.green-theme #main-header h1 {
    color: var(--theme-green-text); }

#main__title {
  padding-top: 20px; }
  #main__title .container {
    border-bottom: 1px solid var(--antracite-20);
    padding: 15px 0 25px 0; }
    #main__title .container h2 {
      overflow-wrap: break-word; }
  @media screen and (min-width: 744px) {
    #main__title .container {
      padding: 30px 0 60px 0; }
      #main__title .container h2 {
        margin-left: -5px; } }
  @media screen and (min-width: 1440px) {
    #main__title .container {
      padding: 30px 0 120px 0; }
      #main__title .container h2 {
        margin-left: -10px; }
    #main__title .blog-entry {
      width: 75%; } }

#main__title.branch {
  margin-bottom: 0; }
  #main__title.branch .container {
    border: 0; }
    #main__title.branch .container h2 {
      color: var(--red-50); }
      #main__title.branch .container h2 .branch {
        color: var(--red-80); }

body.medicinal-cannabis #main__title {
  background: var(--cyan-90); }
  body.medicinal-cannabis #main__title .container {
    border-color: var(--cyan-50); }
    body.medicinal-cannabis #main__title .container h2 {
      color: var(--cyan-50); }

/*# sourceMappingURL=app.css.map */