/*! tackeons v0.2.2 | https://github.com/mrkhdly/tackeons */

/*
 *
 *      ________            ______
 *      ___  __/_____ _________  /______  ______________________
 *      __  /  _  __ `/  ___/_  __ \_  / / /  __ \_  __ \_  ___/
 *      _  /   / /_/ // /__ _  / / /  /_/ // /_/ /  / / /(__  )
 *      /_/    \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
 *                                 /____/
 *      TACKEONS — streamlined Tachyons fork
 *
 *    TABLE OF CONTENTS
 *
 *    1. External Library Includes
 *       - modern-normalize v3.0.1 https://github.com/sindresorhus/modern-normalize
 *    2. tackeons modules
 *    3. Variables
 *       - Media Queries
 *       - Colors
 *    4. Debugging
 *       - Debug all
 *       - Debug children
 *
 */


/* External Library Includes */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
        /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
        font-family:
                system-ui,
                'Segoe UI',
                Roboto,
                Helvetica,
                Arial,
                sans-serif,
                'Apple Color Emoji',
                'Segoe UI Emoji';
        line-height: 1.15; /* 1. Correct the line height in all browsers. */
        -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
        tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
        margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
        font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
        font-family:
                ui-monospace,
                SFMono-Regular,
                Consolas,
                'Liberation Mono',
                Menlo,
                monospace; /* 1 */
        font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
        font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
}

sub {
        bottom: -0.25em;
}

sup {
        top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
        border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
        font-family: inherit; /* 1 */
        font-size: 100%; /* 1 */
        line-height: 1.15; /* 1 */
        margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
        -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
        padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
        vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
        height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
        -webkit-appearance: textfield; /* 1 */
        outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
        -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
        -webkit-appearance: button; /* 1 */
        font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
        display: list-item;
}

/* Variables */
/* Importing here will allow you to override any variables in the modules */
/*

   VARIABLES


*/

:root {

  /* 
   * COLORS
   * A balanced color system optimized for accessibility
   * Theme generated with https://components.ai/theme
   * The first six steps in each scale are accessible with white 
   *
   */

  --tint-0: hsla(0, 0%, 100%, 0.035);
  --tint-1: hsla(0, 0%, 100%, 0.1);
  --tint-2: hsla(0, 0%, 100%, 0.19);
  --tint-3: hsla(0, 0%, 100%, 0.28);
  --tint-4: hsla(0, 0%, 100%, 0.36);
  --tint-5: hsla(0, 0%, 100%, 0.45);
  --tint-6: hsla(0, 0%, 100%, 0.55);
  --tint-7: hsla(0, 0%, 100%, 0.64);
  --tint-8: hsla(0, 0%, 100%, 0.73);
  --tint-9: hsla(0, 0%, 100%, 0.815);
  --tint-10: hsla(0, 0%, 100%, 0.895);
  --tint-11: hsla(0, 0%, 100%, 0.94);
  --shadow-11: hsla(0, 0%, 0%, 0.94);
  --shadow-10: hsla(0, 0%, 0%, 0.895);
  --shadow-9: hsla(0, 0%, 0%, 0.815);
  --shadow-8: hsla(0, 0%, 0%, 0.73);
  --shadow-7: hsla(0, 0%, 0%, 0.64);
  --shadow-6: hsla(0, 0%, 0%, 0.55);
  --shadow-5: hsla(0, 0%, 0%, 0.45);
  --shadow-4: hsla(0, 0%, 0%, 0.36);
  --shadow-3: hsla(0, 0%, 0%, 0.28);
  --shadow-2: hsla(0, 0%, 0%, 0.19);
  --shadow-1: hsla(0, 0%, 0%, 0.1);
  --shadow-0: hsla(0, 0%, 0%, 0.035);
  --gray-0: #000000;
  --gray-1: #171717;
  --gray-2: #2f2f2f;
  --gray-3: #464646;
  --gray-4: #5e5e5e;
  --gray-5: #757575;
  --gray-6: #8c8c8c;
  --gray-7: #a3a3a3;
  --gray-8: #bababa;
  --gray-9: #d1d1d1;
  --gray-10: #e8e8e8;
  --gray-11: #ffffff;
  --slate-gray-0: #09090b;
  --slate-gray-1: #1d1d22;
  --slate-gray-2: #313138;
  --slate-gray-3: #45444f;
  --slate-gray-4: #595866;
  --slate-gray-5: #6d6c7d;
  --slate-gray-6: #838292;
  --slate-gray-7: #9a9aa7;
  --slate-gray-8: #b2b1bb;
  --slate-gray-9: #c9c9d0;
  --slate-gray-10: #e1e0e4;
  --slate-gray-11: #f8f8f9;
  --blue-1: #071e3f;
  --blue-2: #0c3166;
  --blue-3: #10448d;
  --blue-4: #1556b4;
  --blue-5: #1969db;
  --blue-6: #317fed;
  --blue-7: #5797f0;
  --blue-8: #7daef4;
  --blue-9: #a3c6f7;
  --blue-10: #c9ddfa;
  --blue-11: #eff5fe;
  --indigo-0: #080614;
  --indigo-1: #19143f;
  --indigo-2: #2a216a;
  --indigo-3: #3a2e95;
  --indigo-4: #4b3bc0;
  --indigo-5: #5c49eb;
  --indigo-6: #725fff;
  --indigo-7: #8c7cff;
  --indigo-8: #a69aff;
  --indigo-9: #c0b7ff;
  --indigo-10: #dad5ff;
  --indigo-11: #f4f3ff;
  --violet-0: #110517;
  --violet-1: #2e0d3e;
  --violet-2: #4b1465;
  --violet-3: #681c8c;
  --violet-4: #8424b3;
  --violet-5: #a12cda;
  --violet-6: #b543ec;
  --violet-7: #c366f0;
  --violet-8: #d089f3;
  --violet-9: #deabf7;
  --violet-10: #eccefa;
  --violet-11: #f9f0fe;
  --magenta-0: #13040f;
  --magenta-1: #350a2c;
  --magenta-2: #581148;
  --magenta-3: #7b1765;
  --magenta-4: #9e1e82;
  --magenta-5: #c1249e;
  --magenta-6: #d43cb2;
  --magenta-7: #dc61c1;
  --magenta-8: #e485cf;
  --magenta-9: #eca9dd;
  --magenta-10: #f4ceec;
  --magenta-11: #fcf2fa;
  --red-0: #120205;
  --red-1: #39050f;
  --red-2: #5f0819;
  --red-3: #860b24;
  --red-4: #ac0e2e;
  --red-5: #d31138;
  --red-6: #e7284e;
  --red-7: #ec506f;
  --red-8: #f07790;
  --red-9: #f49fb0;
  --red-10: #f9c7d1;
  --red-11: #fdeef1;
  --red-orange-0: #190b05;
  --red-orange-1: #3d1307;
  --red-orange-2: #601b0a;
  --red-orange-3: #84240c;
  --red-orange-4: #a72c0e;
  --red-orange-5: #cb3411;
  --red-orange-6: #ee3c13;
  --red-orange-7: #fe562f;
  --red-orange-8: #fe7d5e;
  --red-orange-9: #ffa48e;
  --red-orange-10: #ffccbe;
  --red-orange-11: #fff3ee;
  --orange-0: #150d04;
  --orange-1: #2e1c08;
  --orange-2: #472a0c;
  --orange-3: #603910;
  --orange-4: #794714;
  --orange-5: #a65d13;
  --orange-6: #d37413;
  --orange-7: #ff8a14;
  --orange-8: #ffa54a;
  --orange-9: #ffc081;
  --orange-10: #ffdab7;
  --orange-11: #fff5ed;
  --gold-0: #140e05;
  --gold-1: #2c1f0a;
  --gold-2: #432f0e;
  --gold-3: #5b4013;
  --gold-4: #725118;
  --gold-5: #946818;
  --gold-6: #d4950d;
  --gold-7: #eeb028;
  --gold-8: #f2c259;
  --gold-9: #f7d38a;
  --gold-10: #fbe5bc;
  --gold-11: #fff5e9;
  --yellow-0: #111006;
  --yellow-1: #252405;
  --yellow-2: #3a3804;
  --yellow-3: #4e4d03;
  --yellow-4: #636101;
  --yellow-5: #777500;
  --yellow-6: #ccc500;
  --yellow-7: #fcf433;
  --yellow-8: #fdf67a;
  --yellow-9: #fdf89b;
  --yellow-10: #fef9bb;
  --yellow-11: #fefadb;
  --green-0: #091108;
  --green-1: #0f2611;
  --green-2: #153c1a;
  --green-3: #1b5122;
  --green-4: #21662b;
  --green-5: #25833a;
  --green-6: #26b056;
  --green-7: #35d272;
  --green-8: #63dd90;
  --green-9: #90e8ae;
  --green-10: #bdf3cc;
  --green-11: #eafeea;
  --teal-0: #07100c;
  --teal-1: #0c231a;
  --teal-2: #113628;
  --teal-3: #164936;
  --teal-4: #1b5b45;
  --teal-5: #177f63;
  --teal-6: #12a282;
  --teal-7: #2abb9b;
  --teal-8: #5acab1;
  --teal-9: #8bdac7;
  --teal-10: #bbe9dc;
  --teal-11: #ecf8f2;
  --cyan-0: #0a1211;
  --cyan-1: #102425;
  --cyan-2: #153639;
  --cyan-3: #1b484c;
  --cyan-4: #215a60;
  --cyan-5: #247981;
  --cyan-6: #24a9b6;
  --cyan-7: #28d6e6;
  --cyan-8: #57e0ec;
  --cyan-9: #85eaf2;
  --cyan-10: #b4f5f9;
  --cyan-11: #e2ffff;
  --transparent: hsla(0,0,0,0);

  @supports (color: color(display-p3 1 1 1)) {
    :root {
      --blue-0: color(display-p3 0 0.07 0.25);
      --blue-1: color(display-p3 0 0.09 0.32); 
      --blue-2: color(display-p3 0 0.11 0.42);
      --blue-3: color(display-p3 0 0.15 0.53);
      --blue-4: color(display-p3 0 0.16 0.7);
      --blue-5: color(display-p3 0 0.22 0.88);
      --blue-6: color(display-p3 0.06 0.37 1);
      --blue-7: color(display-p3 0.38 0.59 1 );
      --blue-8: color(display-p3 0.66 0.79 1);
      --blue-9: color(display-p3 0.79 0.86 0.99);
      --blue-10: color(display-p3 0.87 0.92 0.99);
      --blue-11: color(display-p3 0.92 0.95 1);
      --indigo-0: color(display-p3 0.06 0.03 0.21);
      --indigo-1: color(display-p3 0.09 0.07 0.26);
      --indigo-2: color(display-p3 0.15 0.11 0.42);
      --indigo-3: color(display-p3 0.18 0.14 0.57);
      --indigo-4: color(display-p3 0.2 0.18 0.75);
      --indigo-5: color(display-p3 0.26 0.22 1);
      --indigo-6: color(display-p3 0.28 0.28 1);
      --indigo-7: color(display-p3 0.47 0.49 1);  
      --indigo-8: color(display-p3 0.67 0.68 1);
      --indigo-9: color(display-p3 0.81 0.81 0.98);
      --indigo-10: color(display-p3 0.87 0.92 0.99);
      --indigo-11: color(display-p3 0.92 0.95 1);
    }
  }

  --degrees-1: 0;
  --degrees-2: 45deg;
  --degrees-3: 90deg;
  --degrees-4: 135deg;
  --degrees-5: 180deg;
  --degrees-6: 225deg;
  --degrees-7: 270deg;
  --degrees-8: 315deg;

  --gradient-degree-0: var(--degrees-1, 0);
  --gradient-degree: var(--degrees-2, 45deg);
  --gradient-degree-2: var(--degrees-4, 135deg);

  --gradient-stripe-width: 12px;
  --gradient-stripe-width-2: var(--border-width-1);

  --gradient-color-1: var(--blue-2);
  --gradient-color-2: var(--magenta-6);
  --gradient-color-3: var(--red-5);
  --gradient-color-4: var(--indigo-5);
  --gradient-color-5: var(--violet-0);
  --gradient-color-6: var(--violet-5);
  --gradient-color-7: var(--magenta-0);
  --gradient-color-8: var(--magenta-5);
  --gradient-color-9: var(--red-0);
  --gradient-color-10: var(--red-5);
  --gradient-color-11: var(--red-orange-0);
  --gradient-color-12: var(--red-orange-5);
  --gradient-color-13: var(--orange-0);
  --gradient-color-14: var(--orange-5);
  --gradient-color-15: var(--gold-0);
  --gradient-color-16: var(--gold-5);
  --gradient-color-17: var(--yellow-0);
  --gradient-color-18: var(--yellow-5);
  --gradient-color-19: var(--green-0);
  --gradient-color-20: var(--green-5);
  --gradient-color-21: var(--teal-0);
  --gradient-color-22: var(--teal-5);
  --gradient-color-23: var(--cyan-0);
  --gradient-color-24: var(--cyan-5);

  --gradient-stop: 50%;

  --font-size-1: 12px;
  --font-size-2: 14px;
  --font-size-3: 16px;
  --font-size-4: 20px;
  --font-size-5: 24px;
  --font-size-6: 32px;
  --font-size-7: 48px;
  --font-size-8: 64px;
  --font-size-9: 96px;
  --font-size-10: 128px;
  --font-size-11: 192px;
  --font-size-12: 256px;

  --measure-narrow: 45ch;
  --measure: 66ch;
  --measure-wide: 80ch;

  --border-radius-0: 0;
  --border-radius-1: 4px;
  --border-radius-2: 6px;
  --border-radius-3: 8px;
  --border-radius-4: 12px;
  --border-radius-5: 16px;
  --border-radius-6: 20px;
  --border-radius-7: 24px;
  --border-radius-8: 32px;
  --border-radius-9: 48px;
  --border-radius-10: 64px;
  --border-radius-11: 9999px;
  --border-radius: var(--border-radius-2);

  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 4px;
  --border-width-4: 8px;
  --border-width-5: 16px;

  --border-width: var(--border-width-1,1px);
  --border-color: var(--gray-5, gray);

  --line-height-solid: 1;
  --line-height-heading: 1.25;
  --line-height-body: 1.5;

  --letter-spacing-tracked: 0.1em;
  --letter-spacing-tight: -0.05em;
  --letter-spacing-large: 0.25em;

  --spacing-0: 0;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 16px;
  --spacing-5: 32px;
  --spacing-6: 64px;
  --spacing-7: 128px;
  --spacing-8: 256px;
  --spacing-9: 512px;

  --size-0: 0;
  --size-1: 1rem;
  --size-2: 2rem;
  --size-3: 3rem;
  --size-4: 4rem;
  --size-5: 8rem;
  --size-6: 16rem;
  --size-7: 32rem;
  --size-7ish: 36rem;
  --size-8: 64rem;

  --shadow-color: 0 0 0;
  --shadow-color-invert: 255 255 255;
  --color-dark: white;
  --bg-dark: black;
  --color-light: black;
  --bg-light: white;
  --shadow-border-width: 1px;
  --shadow-opacity: .25;

  /* Opacity scale */

  --opacity-0: 0;
  --opacity-1: .025;
  --opacity-2: .05;
  --opacity-3: .1;
  --opacity-4: .2;
  --opacity-5: .3;
  --opacity-6: .4;
  --opacity-7: .5;
  --opacity-8: .6;
  --opacity-9: .7;
  --opacity-10: .8;
  --opacity-11: .9;
  --opacity-12: 1;

  --duration-0: 125ms;
  --duration-1: 250ms;
  --duration-2: 500ms;

  --easing-function-0: cubic-bezier(0.543, 1.086, 0.5, -0.383);
  --easing-function-1: ease;
  --easing-function-2: ease-out;
  --easing-function-3: ease-in-out;
  --easing-function-4: linear;

}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-color: 255 255 255;
    --shadow-color-invert: 0 0 0;
    --color-dark: black;
    --bg-dark: white;
    --color-light: white;
    --bg-light: black;
  }
}

/*

  GRADIENTS


*/

.gradient-1 { 
  background: linear-gradient(
                var(--gradient-degree), 
                var(--gradient-color-1), 
                var(--gradient-color-2)
              ); 
}

.gradient-2 { 
  background: linear-gradient(
                var(--gradient-degree), 
                var(--gradient-color-1) var(--gradient-stop), 
                var(--gradient-color-2) var(--gradient-stop)
              ); 
}

.gradient-3 { 
  background: repeating-linear-gradient(
                var(--gradient-degree),
                transparent 0px,
                transparent var(--gradient-stripe-width),
                var(--gradient-color-1) var(--gradient-stripe-width),
                var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
              ); 
}

.gradient-4 { 
  background: repeating-radial-gradient(
                circle,
                transparent 0px,
                transparent var(--gradient-stripe-width),
                var(--gradient-color-1) var(--gradient-stripe-width),
                var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
              ); 
}



@container (min-width:30em) {

}

@container (min-width:48em) {

}

@container (min-width:64em) {

}


/* Modules */
/*
 
  BOX SIZING

*/

*, 
*::before, 
*::after,
.border-box,
.border-box::before,
.border-box::after { box-sizing: border-box; }
.content-box { box-sizing: content-box; }
/*

  CONTAINER-TYPE

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

  MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type

*/

/* Default: the page root is an inline-size container, so -s/-m/-l responsive
   variants work out of the box. Opt out on any subtree with .container-normal. */
html { container-type: inline-size; }

.container-size { container-type: size; }
.root,
.container-inline { container-type: inline-size; }
.container-normal { container-type: normal; }

@container (min-width:30em) {
  .container-size-s { container-type: size; }
  .container-inline-s { container-type: inline-size; }
  .container-normal-s { container-type: normal; }
}

@container (min-width:48em) {
  .container-size-m { container-type: size; }
  .container-inline-m { container-type: inline-size; }
  .container-normal-m { container-type: normal; }
}

@container (min-width:64em) {
  .container-size-l { container-type: size; }
  .container-inline-l { container-type: inline-size; }
  .container-normal-l { container-type: normal; }
}
/*

  ALL

  MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all

*/

.unset { all: unset; }
.initial { all: initial; }
.inherit { all: inherit; }
.revert { all: revert; }
/*

   ASPECT RATIOS
   MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

*/


.aspect-ratio-16x9 { aspect-ratio: 16 / 9; }
.aspect-ratio-9x16 { aspect-ratio: 9 / 16; }

.aspect-ratio-4x3 {  aspect-ratio: 4 / 3; }
.aspect-ratio-3x4 {  aspect-ratio: 3 / 4; }

.aspect-ratio-6x4 {  aspect-ratio: 6 / 4; }
.aspect-ratio-4x6 {  aspect-ratio: 4 / 6; }

.aspect-ratio-8x5 {  aspect-ratio: 8 / 5; }
.aspect-ratio-5x8 {  aspect-ratio: 5 / 8; }

.aspect-ratio-7x5 {  aspect-ratio: 7 / 5; }
.aspect-ratio-5x7 {  aspect-ratio: 5 / 7; }

.aspect-ratio-square, 
.aspect-ratio-1x1 {  aspect-ratio: 1 / 1; }


@container (min-width:30em){
  .aspect-ratio-16x9-s { aspect-ratio: 16 / 9; }
  .aspect-ratio-9x16-s { aspect-ratio: 9 / 16; }

  .aspect-ratio-4x3-s {  aspect-ratio: 4 / 3; }
  .aspect-ratio-3x4-s {  aspect-ratio: 3 / 4; }

  .aspect-ratio-6x4-s {  aspect-ratio: 6 / 4; }
  .aspect-ratio-4x6-s {  aspect-ratio: 4 / 6; }

  .aspect-ratio-8x5-s {  aspect-ratio: 8 / 5; }
  .aspect-ratio-5x8-s {  aspect-ratio: 5 / 8; }

  .aspect-ratio-7x5-s {  aspect-ratio: 7 / 5; }
  .aspect-ratio-5x7-s {  aspect-ratio: 5 / 7; }

  .aspect-ratio-square-s, 
  .aspect-ratio-1x1-s { aspect-ratio: 1 / 1; }
}

@container (min-width:48em){
  .aspect-ratio-16x9-m { aspect-ratio: 16 / 9; }
  .aspect-ratio-9x16-m { aspect-ratio: 9 / 16; }

  .aspect-ratio-4x3-m {  aspect-ratio: 4 / 3; }
  .aspect-ratio-3x4-m {  aspect-ratio: 3 / 4; }

  .aspect-ratio-6x4-m {  aspect-ratio: 6 / 4; }
  .aspect-ratio-4x6-m {  aspect-ratio: 4 / 6; }

  .aspect-ratio-8x5-m {  aspect-ratio: 8 / 5; }
  .aspect-ratio-5x8-m {  aspect-ratio: 5 / 8; }

  .aspect-ratio-7x5-m {  aspect-ratio: 7 / 5; }
  .aspect-ratio-5x7-m {  aspect-ratio: 5 / 7; }

  .aspect-ratio-square-m, 
  .aspect-ratio-1x1-m { aspect-ratio: 1 / 1; }
}

@container (min-width:64em){
  .aspect-ratio-16x9-l { aspect-ratio: 16 / 9; }
  .aspect-ratio-9x16-l { aspect-ratio: 9 / 16; }

  .aspect-ratio-4x3-l {  aspect-ratio: 4 / 3; }
  .aspect-ratio-3x4-l {  aspect-ratio: 3 / 4; }

  .aspect-ratio-6x4-l {  aspect-ratio: 6 / 4; }
  .aspect-ratio-4x6-l {  aspect-ratio: 4 / 6; }

  .aspect-ratio-8x5-l {  aspect-ratio: 8 / 5; }
  .aspect-ratio-5x8-l {  aspect-ratio: 5 / 8; }

  .aspect-ratio-7x5-l {  aspect-ratio: 7 / 5; }
  .aspect-ratio-5x7-l {  aspect-ratio: 5 / 7; }

  .aspect-ratio-square-l, 
  .aspect-ratio-1x1-l { aspect-ratio: 1 / 1; }
}
/*

   IMAGES

*/

img { display: block; max-width: 100%; }

/* Self-hosted random image: set --random-image on the element or an ancestor.
   No external requests are made by default. */
.random-image,
.random-image-landscape,
.random-image-portrait {
  background-image: var(--random-image, none);
  background-size: cover;
}
/*

   BACKGROUND SIZE

   Media Query Extensions:
     -s  = small
     -m  = medium
     -l  = large

*/

/*
  Often used in combination with background image set as an inline style
  on an html element.
*/

  .cover   { background-size: cover!important; }
  .contain { background-size: contain!important; }
  .bg1     { background-size: 4px; }
  .bg2     { background-size: 8px; }
  .bg3     { background-size: 16px; }
  .bg4     { background-size: 32px; }
  .bg5     { background-size: 64px; }
  .bg6  { background-size: 100%; }
  .bg7  { background-size: 150%; }
  .bg8  { background-size: 200%; }

@container (min-width:30em) {
  .cover-s { background-size: cover!important; }
  .contain-s { background-size: contain!important; }
  .bg1-s     { background-size: 4px; }
  .bg2-s     { background-size: 8px; }
  .bg3-s     { background-size: 16px; }
  .bg4-s     { background-size: 32px; }
  .bg5-s     { background-size: 64px; }
  .bg6-s { background-size: 100%; }
  .bg7-s { background-size: 150%; }
  .bg8-s { background-size: 200%; }
}

@container (min-width:48em) {
  .cover-m { background-size: cover!important; }
  .contain-m { background-size: contain!important; }
  .bg1-m     { background-size: 4px; }
  .bg2-m     { background-size: 8px; }
  .bg3-m     { background-size: 16px; }
  .bg4-m     { background-size: 32px; }
  .bg5-m     { background-size: 64px; }
  .bg6-m { background-size: 100%; }
  .bg7-m { background-size: 150%; }
  .bg8-m { background-size: 200%; }
}

@container (min-width:64em) {
  .cover-l { background-size: cover!important; }
  .contain-l { background-size: contain!important; }
  .bg1-l     { background-size: 4px; }
  .bg2-l     { background-size: 8px; }
  .bg3-l     { background-size: 16px; }
  .bg4-l     { background-size: 32px; }
  .bg5-l     { background-size: 64px; }
  .bg6-l { background-size: 100%; }
  .bg7-l { background-size: 150%; }
  .bg8-l { background-size: 200%; }
}
/*

    BACKGROUND POSITION

    Base:
    bg = background

    Modifiers:
    -center = center center
    -top = top center
    -right = center right
    -bottom = bottom center
    -left = center left

    Media Query Extensions:
      -s  = small
      -m  = medium
      -l  = large

 */

.bg-center { 
  background-repeat: no-repeat;
  background-position: center center; 
}

.bg-top {    
  background-repeat: no-repeat; 
  background-position: top center;    
}

.bg-right {  
  background-repeat: no-repeat; 
  background-position: center right;  
}

.bg-bottom { 
  background-repeat: no-repeat; 
  background-position: bottom center; 
}

.bg-left {   
  background-repeat: no-repeat; 
  background-position: center left;   
}

@container (min-width:30em) {
  .bg-center-s { 
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .bg-top-s {    
    background-repeat: no-repeat; 
    background-position: top center;    
  }

  .bg-right-s {  
    background-repeat: no-repeat; 
    background-position: center right;  
  }

  .bg-bottom-s { 
    background-repeat: no-repeat; 
    background-position: bottom center; 
  }

  .bg-left-s {   
    background-repeat: no-repeat; 
    background-position: center left;   
  }
}

@container (min-width:48em) {
  .bg-center-m { 
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .bg-top-m {    
    background-repeat: no-repeat; 
    background-position: top center;    
  }

  .bg-right-m {  
    background-repeat: no-repeat; 
    background-position: center right;  
  }

  .bg-bottom-m { 
    background-repeat: no-repeat; 
    background-position: bottom center; 
  }

  .bg-left-m {   
    background-repeat: no-repeat; 
    background-position: center left;   
  }
}

@container (min-width:64em) {
  .bg-center-l { 
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .bg-top-l {    
    background-repeat: no-repeat; 
    background-position: top center;    
  }

  .bg-right-l {  
    background-repeat: no-repeat; 
    background-position: center right;  
  }

  .bg-bottom-l { 
    background-repeat: no-repeat; 
    background-position: bottom center; 
  }

  .bg-left-l {   
    background-repeat: no-repeat; 
    background-position: center left;   
  }
}
/*

   OUTLINES

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.outline { outline: var(--border-width, 1px) solid currentColor; }
.outline-color { outline: var(--border-width, 1px) solid var(--border-color, gray); }
.outline-transparent { outline: var(--border-width, 1px) solid transparent; }
.outline-0 { outline: 0; }

@container (min-width:30em) {
  .outline-s { outline: var(--border-width, 1px) solid currentColor; }
  .outline-color-s { outline: var(--border-width, 1px) solid var(--border-color, gray); }
  .outline-transparent-s { outline: var(--border-width, 1px) solid transparent; }
  .outline-0-s { outline: 0; }
}

@container (min-width:48em) {
  .outline-m { outline: var(--border-width, 1px) solid currentColor; }
  .outline-color-m { outline: var(--border-width, 1px) solid var(--border-color, gray); }
  .outline-transparent-m { outline: var(--border-width, 1px) solid transparent; }
  .outline-0-m { outline: 0; }
}

@container (min-width:64em) {
  .outline-l { outline: var(--border-width, 1px) solid currentColor; }
  .outline-color-l { outline: var(--border-width, 1px) solid var(--border-color, gray); }
  .outline-transparent-l { outline: var(--border-width, 1px) solid transparent; }
  .outline-0-l { outline: 0; }
}
/*

    BORDERS

    Base:
      b = border

    Modifiers:
      a = all
      t = top
      r = right
      b = bottom
      l = left
      n = none

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

  .ba { border-style: solid; border-width: var(--border-width, 1px); }
  .bt { border-top-style: solid; border-top-width: var(--border-width, 1px); }
  .br { border-right-style: solid; border-right-width: var(--border-width, 1px); }
  .bb { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
  .bl { border-left-style: solid; border-left-width: var(--border-width, 1px); }
  .bn { border-style: none; border-width: 0; }


@container (min-width:30em) {
  .ba-s { border-style: solid; border-width: var(--border-width, 1px); }
  .bt-s { border-top-style: solid; border-top-width: var(--border-width, 1px); }
  .br-s { border-right-style: solid; border-right-width: var(--border-width, 1px); }
  .bb-s { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
  .bl-s { border-left-style: solid; border-left-width: var(--border-width, 1px); }
  .bn-s { border-style: none; border-width: 0; }
}

@container (min-width:48em) {
  .ba-m { border-style: solid; border-width: var(--border-width, 1px); }
  .bt-m { border-top-style: solid; border-top-width: var(--border-width, 1px); }
  .br-m { border-right-style: solid; border-right-width: var(--border-width, 1px); }
  .bb-m { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
  .bl-m { border-left-style: solid; border-left-width: var(--border-width, 1px); }
  .bn-m { border-style: none; border-width: 0; }
}

@container (min-width:64em) {
  .ba-l { border-style: solid; border-width: var(--border-width, 1px); }
  .bt-l { border-top-style: solid; border-top-width: var(--border-width, 1px); }
  .br-l { border-right-style: solid; border-right-width: var(--border-width, 1px); }
  .bb-l { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
  .bl-l { border-left-style: solid; border-left-width: var(--border-width, 1px); }
  .bn-l { border-style: none; border-width: 0; }
}
/*

   BORDER COLORS

   Border colors can be used to extend the base
   border classes ba,bt,bb,br,bl found in the _borders.css file.

   The base border class by default will set the color of the border
   to that of the current text color. These classes are for the cases
   where you desire for the text and border colors to be different.

   Base:
     b = border

   Modifiers:
   --color-name = each color variable name is also a border color name

*/

.b--color { border-color: var(--border-color, gray); }
.b--light { border-color: var(--tint-2, gray); }
.b--dark { border-color: var(--shadow-9, gray); }
.b--transparent { border-color: transparent; }
.b--current { border-color: currentColor; }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }

.b--grey-0, .b--gray-0 { border-color: var(--gray-0); }
.b--grey-1, .b--gray-1 { border-color: var(--gray-1); }
.b--grey-2, .b--gray-2 { border-color: var(--gray-2); }
.b--grey-3, .b--gray-3 { border-color: var(--gray-3); }
.b--grey-4, .b--gray-4 { border-color: var(--gray-4); }
.b--grey-5, .b--gray-5 { border-color: var(--gray-5); }
.b--grey-6, .b--gray-6 { border-color: var(--gray-6); }
.b--grey-7, .b--gray-7 { border-color: var(--gray-7); }
.b--grey-8, .b--gray-8 { border-color: var(--gray-8); }
.b--grey-9, .b--gray-9 { border-color: var(--gray-9); }
.b--grey-10, .b--gray-10 { border-color: var(--gray-10); }
.b--grey-11, .b--gray-11 { border-color: var(--gray-11); }
/*

   BORDER RADIUS

   Base:
     br   = border-radius

   Modifiers:
     0    = 0/none
     1    = 1st step in scale
     2    = 2nd step in scale
     3    = 3rd step in scale
     4    = 4th step in scale
     5    = 5th step in scale
     6    = 6th step in scale

   Literal values:
     -100 = 100%
     -pill = 9999px

   Media Query Extensions:
     -n = small
     -m  = medium
     -l  = large

*/

  .br-primary  {        border-radius: var(--border-radius, 6px); }
  .br0 {        border-radius: var(--border-radius-0, 0); }
  .br1 {        border-radius: var(--border-radius-1, 4px); }
  .br2 {        border-radius: var(--border-radius-2, 6px); }
  .br3 {        border-radius: var(--border-radius-3, 8px); }
  .br4 {        border-radius: var(--border-radius-4, 12px); }
  .br5 {        border-radius: var(--border-radius-5, 16px); }
  .br6 {        border-radius: var(--border-radius-6, 20px); }
  .br7 {        border-radius: var(--border-radius-7, 24px); }
  .br8 {        border-radius: var(--border-radius-8, 32px); }
  .br9 {        border-radius: var(--border-radius-9, 48px); }
  .br10 {        border-radius: var(--border-radius-10, 64px); }
  .br11 {        border-radius: var(--border-radius-11, 9999px); }

  .br--bottom {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br-inherit { border-radius: inherit; }
  .br-initial { border-radius: initial; }
  .br-unset { border-radius: unset; }

@container (min-width:30em) {
  .br-primary-s  {          border-radius: var(--border-radius, 6px); }
  .br0-s {        border-radius: var(--border-radius-0, 0); }
  .br1-s {        border-radius: var(--border-radius-1, 4px); }
  .br2-s {        border-radius: var(--border-radius-2, 6px); }
  .br3-s {        border-radius: var(--border-radius-3, 8px); }
  .br4-s {        border-radius: var(--border-radius-4, 12px); }
  .br5-s {        border-radius: var(--border-radius-5, 16px); }
  .br6-s {        border-radius: var(--border-radius-6, 20px); }
  .br7-s {        border-radius: var(--border-radius-7, 24px); }
  .br8-s {        border-radius: var(--border-radius-8, 32px); }
  .br9-s {        border-radius: var(--border-radius-9, 48px); }
  .br10-s {       border-radius: var(--border-radius-10, 64px); }
  .br11-s {    border-radius: var(--border-radius-11, 9999px); }
  .br--bottom-s {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top-s {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right-s {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left-s {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br-inherit-s { border-radius: inherit; }
  .br-initial-s { border-radius: initial; }
  .br-unset-s { border-radius: unset; }
}

@container (min-width:48em) {
  .br-primary-m  {        border-radius: var(--border-radius, 6px); }
  .br0-m {        border-radius: var(--border-radius-0, 0); }
  .br1-m {        border-radius: var(--border-radius-1, 4px); }
  .br2-m {        border-radius: var(--border-radius-2, 6px); }
  .br3-m {        border-radius: var(--border-radius-3, 8px); }
  .br4-m {        border-radius: var(--border-radius-4, 12px); }
  .br5-m {        border-radius: var(--border-radius-5, 16px); }
  .br6-m {        border-radius: var(--border-radius-6, 20px); }
  .br7-m {        border-radius: var(--border-radius-7, 24px); }
  .br8-m {        border-radius: var(--border-radius-8, 32px); }
  .br9-m {        border-radius: var(--border-radius-9, 48px); }
  .br10-m {       border-radius: var(--border-radius-10, 64px); }
  .br11-m {    border-radius: var(--border-radius-11, 9999px); }
  .br--bottom-m {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top-m {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right-m {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left-m {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br-inherit-m { border-radius: inherit; }
  .br-initial-m { border-radius: initial; }
  .br-unset-m { border-radius: unset; }
}

@container (min-width:64em) {
  .br-primary-l { border-radius: var(--border-radius, 6px); }
  .br0-l {        border-radius: var(--border-radius-0, 0); }
  .br1-l {        border-radius: var(--border-radius-1, 4px); }
  .br2-l {        border-radius: var(--border-radius-2, 6px); }
  .br3-l {        border-radius: var(--border-radius-3, 8px); }
  .br4-l {        border-radius: var(--border-radius-4, 12px); }
  .br5-l {        border-radius: var(--border-radius-5, 16px); }
  .br6-l {        border-radius: var(--border-radius-6, 20px); }
  .br7-l {        border-radius: var(--border-radius-7, 24px); }
  .br8-l {        border-radius: var(--border-radius-8, 32px); }
  .br9-l {        border-radius: var(--border-radius-9, 48px); }
  .br10-l {       border-radius: var(--border-radius-10, 64px); }
  .br11-l {       border-radius: var(--border-radius-11, 9999px); }
  .br--bottom-l {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top-l {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right-l {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left-l {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br-inherit-l { border-radius: inherit; }
  .br-initial-l { border-radius: initial; }
  .br-unset-l { border-radius: unset; }
}
/*

   BORDER STYLES

   Depends on base border module in _borders.css

   Base:
     b = border-style

   Modifiers:
     --none   = none
     --dotted = dotted
     --dashed = dashed
     --solid  = solid

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

 */

.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid {  border-style: solid; }
.b--none {   border-style: none; }

@container (min-width:30em) {
  .b--dotted-s { border-style: dotted; }
  .b--dashed-s { border-style: dashed; }
  .b--solid-s {  border-style: solid; }
  .b--none-s {   border-style: none; }
}

@container (min-width:48em) {
  .b--dotted-m { border-style: dotted; }
  .b--dashed-m { border-style: dashed; }
  .b--solid-m {  border-style: solid; }
  .b--none-m {   border-style: none; }
}

@container (min-width:64em) {
  .b--dotted-l { border-style: dotted; }
  .b--dashed-l { border-style: dashed; }
  .b--solid-l {  border-style: solid; }
  .b--none-l {   border-style: none; }
}
/*

   BORDER WIDTHS

   Base:
     bw = border-width

   Modifiers:
     0 = 0 width border
     1 = 1st step in border-width scale
     2 = 2nd step in border-width scale
     3 = 3rd step in border-width scale
     4 = 4th step in border-width scale
     5 = 5th step in border-width scale

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.bw  { border-width: var(--border-width,1px); }
.bw0 { border-width: var(--border-width-0,0); }
.bw1 { border-width: var(--border-width-1,1px); }
.bw2 { border-width: var(--border-width-2,2px); }
.bw3 { border-width: var(--border-width-3,4px); }
.bw4 { border-width: var(--border-width-4,8px); }
.bw5 { border-width: var(--border-width-5,16px); }

/* Resets */
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }

@container (min-width:30em) {
  .bw-s  { border-width: var(--border-width,1px); }
  .bw0-s { border-width: var(--border-width-0,0); }
  .bw1-s { border-width: var(--border-width-1,1px); }
  .bw2-s { border-width: var(--border-width-2,2px); }
  .bw3-s { border-width: var(--border-width-3,4px); }
  .bw4-s { border-width: var(--border-width-4,8px); }
  .bw5-s { border-width: var(--border-width-5,16px); }
  .bt-0-s { border-top-width: 0; }
  .br-0-s { border-right-width: 0; }
  .bb-0-s { border-bottom-width: 0; }
  .bl-0-s { border-left-width: 0; }
}

@container (min-width:48em) {
  .bw-m  { border-width: var(--border-width,1px); }
  .bw0-m { border-width: var(--border-width-0,0); }
  .bw1-m { border-width: var(--border-width-1,1px); }
  .bw2-m { border-width: var(--border-width-2,2px); }
  .bw3-m { border-width: var(--border-width-3,4px); }
  .bw4-m { border-width: var(--border-width-4,8px); }
  .bw5-m { border-width: var(--border-width-5,16px); }
  .bt-0-m { border-top-width: 0; }
  .br-0-m { border-right-width: 0; }
  .bb-0-m { border-bottom-width: 0; }
  .bl-0-m { border-left-width: 0; }
}

@container (min-width:64em) {
  .bw-l  { border-width: var(--border-width,1px); }
  .bw0-l { border-width: var(--border-width-0,0); }
  .bw1-l { border-width: var(--border-width-1,1px); }
  .bw2-l { border-width: var(--border-width-2,2px); }
  .bw3-l { border-width: var(--border-width-3,4px); }
  .bw4-l { border-width: var(--border-width-4,8px); }
  .bw5-l { border-width: var(--border-width-5,16px); }
  .bt-0-l { border-top-width: 0; }
  .br-0-l { border-right-width: 0; }
  .bb-0-l { border-bottom-width: 0; }
  .bl-0-l { border-left-width: 0; }
}
/*

  BOX-SHADOW

  REF
  Layered shadows technique

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

 */

.shadow { 
  box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5))); 
}

.shadow-hover:hover,
.shadow-hover:focus { 
  --shadow-opacity: .6;
}

/* 
 * TODO: potential pattern 
  .shadow-hover:hover {
    --shadow-opacity: .09;
    --shadow-x: 1px;
    --shadow-y: 1px;
    --shadow-blur: 1px;
    --shadow-spread: 1px;
    --shadow-multiplier: 2;
  }
*/

/* Box shadow based borders */
 
.shadow-border-1 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); }
.shadow-border-2 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .25)); }
.shadow-border-3 { box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor; }
.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125)); }
.shadow-border-5 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125))}
.shadow-border-6 { box-shadow: inset 0 0 2px 0 currentColor; }

.shadow-1 { 
  box-shadow: 
    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
    0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
    0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); 
}

.shadow-2 {  
  box-shadow: 
    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
    0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); 
}

.shadow-3 {  
  --shadow-opacity: .11;
  box-shadow: 
    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
    0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
    0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 
    0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)); 
}

.shadow-4 {  
  --shadow-opacity: .05;
  box-shadow: 
    0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.25) * 5)), 
    0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 4)),
    0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.15) * 3)), 
    0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.10) * 2)), 
    0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.05)); 
}

.shadow-5 {  
  --shadow-opacity: .08;
  box-shadow: 
    0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.08) * 1)), 
    0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.12) * 1.5)), 
    0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.16) * 2)), 
    0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 2.5)); 
}

.shadow-6 {  
  --shadow-opacity: .07;
  box-shadow: 
    0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
    0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
    0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
    0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
    0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
    0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)); 
}

.shadow-7 {  
  --shadow-opacity: .11;
  box-shadow: 
    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
    0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
    0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)); 
}

.shadow-8 {  
  --shadow-opacity: .09;
  box-shadow: 
    0 2px 1px rgb(var(--shadow-color, 0 0 0) / 0.09), 
    0 4px 2px rgb(var(--shadow-color, 0 0 0) / 0.09), 
    0 8px 4px rgb(var(--shadow-color, 0 0 0) / 0.09), 
    0 16px 8px rgb(var(--shadow-color, 0 0 0) / 0.09), 
    0 32px 16px rgb(var(--shadow-color, 0 0 0) / 0.09); 
}
/*

  TEXT-SHADOW

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

 */

.text-shadow-1 { text-shadow: rgb(var(--shadow-color)) -4px 4px 0px; }
.text-shadow-2 { text-shadow: rgb(var(--shadow-color)) -8px 8px 0px; }
.text-shadow-3 { text-shadow: rgb(var(--shadow-color) / var(--shadow-opacity ,.5)) -8px 8px 0px; }
.text-shadow-4 { text-shadow: rgba(var(--shadow-color) / var(--shadow-opacity, .5)) -4px 4px 8px; }
.text-shadow-5 { text-shadow: rgb(var(--shadow-color)) 2px 0px 0px, rgb(var(--shadow-color)) 0px 2px 0px, rgb(var(--shadow-color)) -2px 0px 0px, rgb(var(--shadow-color)) 0px -2px 0px, rgb(var(--shadow-color)) -2px -2px 0px, rgb(var(--shadow-color)) 2px -2px 0px, rgb(var(--shadow-color)) 2px 2px 0px, rgb(var(--shadow-color)) -2px 2px 0px; }
.text-shadow-6 { text-shadow: rgb(var(--shadow-color-invert)) 2px 0px 0px, rgb(var(--shadow-color-invert)) 0px 2px 0px, rgb(var(--shadow-color-invert)) -2px 0px 0px, rgb(var(--shadow-color-invert)) 0px -2px 0px, rgb(var(--shadow-color-invert)) -2px -2px 0px, rgb(var(--shadow-color-invert)) 2px -2px 0px, rgb(var(--shadow-color-invert)) 2px 2px 0px, rgb(var(--shadow-color-invert)) -2px 2px 0px; }


@container (min-width:30em) {

}

@container (min-width:48em) {

}

@container (min-width:64em) {

}
/*

   CODE

*/

.pre {
  max-width: 100%; 
  overflow:   auto;
}
/*

   COORDINATES

   Use in combination with the position module.

   Base:
     top
     bottom
     right
     left

   Modifiers:
     -0  = literal value 0
     -1  = literal value 1
     -2  = literal value 2
     --1 = literal value -1
     --2 = literal value -2

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.top-0    { top:    0; }
.right-0  { right:  0; }
.bottom-0 { bottom: 0; }
.left-0   { left:   0; }

.top-1    { top:    var(--size, 1rem); }
.right-1  { right:  var(--size, 1rem); }
.bottom-1 { bottom: var(--size, 1rem); }
.left-1   { left:   var(--size, 1rem); }

.top-2    { top:    calc(var(--size, 1rem) * 2); }
.right-2  { right:  calc(var(--size, 1rem) * 2); }
.bottom-2 { bottom: calc(var(--size, 1rem) * 2); }
.left-2   { left:   calc(var(--size, 1rem) * 2); }

.top--1    { top:    calc(var(--size, 1rem) * -1); }
.right--1  { right:  calc(var(--size, 1rem) * -1); }
.bottom--1 { bottom: calc(var(--size, 1rem) * -1); }
.left--1   { left:   calc(var(--size, 1rem) * -1); }

.top--2    { top:    calc(var(--size, 1rem) * -2); }
.right--2  { right:  calc(var(--size, 1rem) * -2); }
.bottom--2 { bottom: calc(var(--size, 1rem) * -2); }
.left--2   { left:   calc(var(--size, 1rem) * -2); }

.inset-0 { inset: 0; }

@container (min-width:30em) {
  .top-0-s     { top:   0; }
  .left-0-s    { left:  0; }
  .right-0-s   { right: 0; }
  .bottom-0-s  { bottom: 0; }
  .top-1-s     { top:    var(--size, 1rem); }
  .left-1-s    { left:   var(--size, 1rem); }
  .right-1-s   { right:  var(--size, 1rem); }
  .bottom-1-s  { bottom: var(--size, 1rem); }
  .top-2-s     { top:    calc(var(--size, 1rem) * 2); }
  .left-2-s    { left:   calc(var(--size, 1rem) * 2); }
  .right-2-s   { right:  calc(var(--size, 1rem) * 2); }
  .bottom-2-s  { bottom: calc(var(--size, 1rem) * 2); }
  .top--1-s    { top:    calc(var(--size, 1rem) * -1); }
  .right--1-s  { right:  calc(var(--size, 1rem) * -1); }
  .bottom--1-s { bottom: calc(var(--size, 1rem) * -1); }
  .left--1-s   { left:   calc(var(--size, 1rem) * -1); }
  .top--2-s    { top:    calc(var(--size, 1rem) * -2); }
  .right--2-s  { right:  calc(var(--size, 1rem) * -2); }
  .bottom--2-s { bottom: calc(var(--size, 1rem) * -2); }
  .left--2-s   { left:   calc(var(--size, 1rem) * -2); }
  .inset-0-s { inset: 0; }
}

@container (min-width:48em) {
  .top-0-m     { top:   0; }
  .left-0-m    { left:  0; }
  .right-0-m   { right: 0; }
  .bottom-0-m  { bottom: 0; }
  .top-1-m     { top:    var(--size, 1rem); }
  .left-1-m    { left:   var(--size, 1rem); }
  .right-1-m   { right:  var(--size, 1rem); }
  .bottom-1-m  { bottom: var(--size, 1rem); }
  .top-2-m     { top:    calc(var(--size, 1rem) * 2); }
  .left-2-m    { left:   calc(var(--size, 1rem) * 2); }
  .right-2-m   { right:  calc(var(--size, 1rem) * 2); }
  .bottom-2-m  { bottom: calc(var(--size, 1rem) * 2); }
  .top--1-m    { top:    calc(var(--size, 1rem) * -1); }
  .right--1-m  { right:  calc(var(--size, 1rem) * -1); }
  .bottom--1-m { bottom: calc(var(--size, 1rem) * -1); }
  .left--1-m   { left:   calc(var(--size, 1rem) * -1); }
  .top--2-m    { top:    calc(var(--size, 1rem) * -2); }
  .right--2-m  { right:  calc(var(--size, 1rem) * -2); }
  .bottom--2-m { bottom: calc(var(--size, 1rem) * -2); }
  .left--2-m   { left:   calc(var(--size, 1rem) * -2); }
  .inset-0-m { inset: 0; }
}

@container (min-width:64em) {
  .top-0-l     { top:   0; }
  .left-0-l    { left:  0; }
  .right-0-l   { right: 0; }
  .bottom-0-l  { bottom: 0; }
  .top-1-l     { top:    var(--size, 1rem); }
  .left-1-l    { left:   var(--size, 1rem); }
  .right-1-l   { right:  var(--size, 1rem); }
  .bottom-1-l  { bottom: var(--size, 1rem); }
  .top-2-l     { top:    calc(var(--size, 1rem) * 2); }
  .left-2-l    { left:   calc(var(--size, 1rem) * 2); }
  .right-2-l   { right:  calc(var(--size, 1rem) * 2); }
  .bottom-2-l  { bottom: calc(var(--size, 1rem) * 2); }
  .top--1-l    { top:    calc(var(--size, 1rem) * -1); }
  .right--1-l  { right:  calc(var(--size, 1rem) * -1); }
  .bottom--1-l { bottom: calc(var(--size, 1rem) * -1); }
  .left--1-l   { left:   calc(var(--size, 1rem) * -1); }
  .top--2-l    { top:    calc(var(--size, 1rem) * -2); }
  .right--2-l  { right:  calc(var(--size, 1rem) * -2); }
  .bottom--2-l { bottom: calc(var(--size, 1rem) * -2); }
  .left--2-l   { left:   calc(var(--size, 1rem) * -2); }
  .inset-0-l { inset: 0; }
}
/*

   CLEARFIX

*/

/* Nicolas Gallaghers Clearfix solution
   Ref: Micro clearfix hack */

.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }

.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.cn { clear: none; }
/*

   DISPLAY

   Base:
    d = display

   Modifiers:
    n     = none
    b     = block
    ib    = inline-block
    if    = inline-flex
    ig    = inline-grid
    f    = flex
    g    = grid

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.dn {                display: none; }
.di {                display: inline; }
.db {                display: block; }
.dib {               display: inline-block; }
.df, .flex {         display: flex; }
.dif, .inline-flex { display: inline-flex; }
.dg,
.grid {
  display: grid;
}

.dig,
.inline-grid {
  display: inline-grid;
}

@container (min-width:30em) {
  .dn-s {                display: none; }
  .di-s {                display: inline; }
  .db-s {                display: block; }
  .dib-s {               display: inline-block; }
  .df-s, .flex-s {         display: flex; }
  .dif-s, .inline-flex-s { display: inline-flex; }
  .dg-s,
  .grid-s {
    display: grid;
  }

  .dig-s,
  .inline-grid-s {
    display: inline-grid;
  }
}

@container (min-width:48em) {

  .dn-m {                display: none; }
  .di-m {                display: inline; }
  .db-m {                display: block; }
  .dib-m {               display: inline-block; }
  .df-m, .flex-m {         display: flex; }
  .dif-m, .inline-flex-m { display: inline-flex; }
  .dg-m,
  .grid-m {
    display: grid;
  }

  .dig-m,
  .inline-grid-m {
    display: inline-grid;
  }
}

@container (min-width:64em) {
  .dn-l {                display: none; }
  .di-l {                display: inline; }
  .db-l {                display: block; }
  .dib-l {               display: inline-block; }
  .df-l, .flex-l {         display: flex; }
  .dif-l, .inline-flex-l { display: inline-flex; }
  .dg-l,
  .grid-l {
    display: grid;
  }

  .dig-l,
  .inline-grid-l {
    display: inline-grid;
  }
}
.glass1, .glass1-hover:hover, .glass1-focus:focus { --glass-bg: rgba(255, 255, 255, 0);    --glass-blur: 20px; }
.glass2, .glass2-hover:hover, .glass2-focus:focus { --glass-bg: rgba(255, 255, 255, 0.05); --glass-blur: 20px; }
.glass3, .glass3-hover:hover, .glass3-focus:focus { --glass-bg: rgba(255, 255, 255, 0.15); --glass-blur: 20px; }
.glass4, .glass4-hover:hover, .glass4-focus:focus { --glass-bg: rgba(255, 255, 255, 0.25); --glass-blur: 20px; }
.glass5, .glass5-hover:hover, .glass5-focus:focus { --glass-bg: rgba(255, 255, 255, 0);    --glass-blur: 16px; }
.glass6, .glass6-hover:hover, .glass6-focus:focus { --glass-bg: rgba(255, 255, 255, 0.05); --glass-blur: 16px; }
.glass7, .glass7-hover:hover, .glass7-focus:focus { --glass-bg: rgba(255, 255, 255, 0.15); --glass-blur: 16px; }
.glass8, .glass8-hover:hover, .glass8-focus:focus { --glass-bg: rgba(255, 255, 255, 0.25); --glass-blur: 16px; }
.glass9, .glass9-hover:hover, .glass9-focus:focus  { --glass-bg: rgba(255, 255, 255, 0.25); }
.glass10, .glass10-hover:hover, .glass10-focus:focus { --glass-bg: rgba(255, 255, 255, 0); }

.glass1, .glass1-hover:hover, .glass1-focus:focus,
.glass2, .glass2-hover:hover, .glass2-focus:focus,
.glass3, .glass3-hover:hover, .glass3-focus:focus,
.glass4, .glass4-hover:hover, .glass4-focus:focus,
.glass5, .glass5-hover:hover, .glass5-focus:focus,
.glass6, .glass6-hover:hover, .glass6-focus:focus,
.glass7, .glass7-hover:hover, .glass7-focus:focus,
.glass8, .glass8-hover:hover, .glass8-focus:focus,
.glass9, .glass9-hover:hover, .glass9-focus:focus,
.glass10, .glass10-hover:hover, .glass10-focus:focus {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--glass-bg);
}

.glass1, .glass1-hover:hover, .glass1-focus:focus,
.glass2, .glass2-hover:hover, .glass2-focus:focus,
.glass3, .glass3-hover:hover, .glass3-focus:focus,
.glass4, .glass4-hover:hover, .glass4-focus:focus,
.glass5, .glass5-hover:hover, .glass5-focus:focus,
.glass6, .glass6-hover:hover, .glass6-focus:focus,
.glass7, .glass7-hover:hover, .glass7-focus:focus,
.glass8, .glass8-hover:hover, .glass8-focus:focus {
  backdrop-filter: blur(var(--glass-blur));
}
/*
   GAP: GRID AND FLEX SPACING

   Base:
     g = gap


   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/


.g0 { gap: var(--spacing-0, 0); }
.g1 { gap: var(--spacing-1, 2px); }
.g2 { gap: var(--spacing-2, 4px); }
.g3 { gap: var(--spacing-3, 8px); }
.g4 { gap: var(--spacing-4, 16px); }
.g5 { gap: var(--spacing-5, 32px); }
.g6 { gap: var(--spacing-6, 64px); }
.g7 { gap: var(--spacing-7, 128px); }

@container (min-width:30em) {
  .g0-s { gap: var(--spacing-0, 0); }
  .g1-s { gap: var(--spacing-1, 2px); }
  .g2-s { gap: var(--spacing-2, 4px); }
  .g3-s { gap: var(--spacing-3, 8px); }
  .g4-s { gap: var(--spacing-4, 16px); }
  .g5-s { gap: var(--spacing-5, 32px); }
  .g6-s { gap: var(--spacing-6, 64px); }
  .g7-s { gap: var(--spacing-7, 128px); }
}

@container (min-width:48em) {
  .g0-m { gap: var(--spacing-0, 0); }
  .g1-m { gap: var(--spacing-1, 2px); }
  .g2-m { gap: var(--spacing-2, 4px); }
  .g3-m { gap: var(--spacing-3, 8px); }
  .g4-m { gap: var(--spacing-4, 16px); }
  .g5-m { gap: var(--spacing-5, 32px); }
  .g6-m { gap: var(--spacing-6, 64px); }
  .g7-m { gap: var(--spacing-7, 128px); }
}


@container (min-width:64em) {
  .g0-l { gap: var(--spacing-0); }
  .g1-l { gap: var(--spacing-1); }
  .g2-l { gap: var(--spacing-2); }
  .g3-l { gap: var(--spacing-3); }
  .g4-l { gap: var(--spacing-4); }
  .g5-l { gap: var(--spacing-5); }
  .g6-l { gap: var(--spacing-6); }
  .g7-l { gap: var(--spacing-7); }
}
/*
   GAP: GRID AND FLEX SPACING

   Base:
     g = gap


   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/


.gc0 { column-gap: var(--spacing-0, 0); }
.gc1 { column-gap: var(--spacing-1, 2px); }
.gc2 { column-gap: var(--spacing-2, 4px); }
.gc3 { column-gap: var(--spacing-3, 8px); }
.gc4 { column-gap: var(--spacing-4, 16px); }
.gc5 { column-gap: var(--spacing-5, 32px); }
.gc6 { column-gap: var(--spacing-6, 64px); }
.gc7 { column-gap: var(--spacing-7, 128px); }

@container (min-width:30em) {
  .gc0-s { column-gap: var(--spacing-0, 0); }
  .gc1-s { column-gap: var(--spacing-1, 2px); }
  .gc2-s { column-gap: var(--spacing-2, 4px); }
  .gc3-s { column-gap: var(--spacing-3, 8px); }
  .gc4-s { column-gap: var(--spacing-4, 16px); }
  .gc5-s { column-gap: var(--spacing-5, 32px); }
  .gc6-s { column-gap: var(--spacing-6, 64px); }
  .gc7-s { column-gap: var(--spacing-7, 128px); }
}

@container (min-width:48em) {
  .gc0-m { column-gap: var(--spacing-0, 0); }
  .gc1-m { column-gap: var(--spacing-1, 2px); }
  .gc2-m { column-gap: var(--spacing-2, 4px); }
  .gc3-m { column-gap: var(--spacing-3, 8px); }
  .gc4-m { column-gap: var(--spacing-4, 16px); }
  .gc5-m { column-gap: var(--spacing-5, 32px); }
  .gc6-m { column-gap: var(--spacing-6, 64px); }
  .gc7-m { column-gap: var(--spacing-7, 128px); }
}


@container (min-width:64em) {
  .gc0-l { column-gap: var(--spacing-0); }
  .gc1-l { column-gap: var(--spacing-1); }
  .gc2-l { column-gap: var(--spacing-2); }
  .gc3-l { column-gap: var(--spacing-3); }
  .gc4-l { column-gap: var(--spacing-4); }
  .gc5-l { column-gap: var(--spacing-5); }
  .gc6-l { column-gap: var(--spacing-6); }
  .gc7-l { column-gap: var(--spacing-7); }
}
/*
   GAP: GRID AND FLEX SPACING

   Base:
     g = gap


   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/


.gr0 { row-gap: var(--spacing-0, 0); }
.gr1 { row-gap: var(--spacing-1, 2px); }
.gr2 { row-gap: var(--spacing-2, 4px); }
.gr3 { row-gap: var(--spacing-3, 8px); }
.gr4 { row-gap: var(--spacing-4, 16px); }
.gr5 { row-gap: var(--spacing-5, 32px); }
.gr6 { row-gap: var(--spacing-6, 64px); }
.gr7 { row-gap: var(--spacing-7, 128px); }

@container (min-width:30em) {
  .gr0-s { row-gap: var(--spacing-0, 0); }
  .gr1-s { row-gap: var(--spacing-1, 2px); }
  .gr2-s { row-gap: var(--spacing-2, 4px); }
  .gr3-s { row-gap: var(--spacing-3, 8px); }
  .gr4-s { row-gap: var(--spacing-4, 16px); }
  .gr5-s { row-gap: var(--spacing-5, 32px); }
  .gr6-s { row-gap: var(--spacing-6, 64px); }
  .gr7-s { row-gap: var(--spacing-7, 128px); }
}

@container (min-width:48em) {
  .gr0-m { row-gap: var(--spacing-0, 0); }
  .gr1-m { row-gap: var(--spacing-1, 2px); }
  .gr2-m { row-gap: var(--spacing-2, 4px); }
  .gr3-m { row-gap: var(--spacing-3, 8px); }
  .gr4-m { row-gap: var(--spacing-4, 16px); }
  .gr5-m { row-gap: var(--spacing-5, 32px); }
  .gr6-m { row-gap: var(--spacing-6, 64px); }
  .gr7-m { row-gap: var(--spacing-7, 128px); }
}


@container (min-width:64em) {
  .gr0-l { row-gap: var(--spacing-0); }
  .gr1-l { row-gap: var(--spacing-1); }
  .gr2-l { row-gap: var(--spacing-2); }
  .gr3-l { row-gap: var(--spacing-3); }
  .gr4-l { row-gap: var(--spacing-4); }
  .gr5-l { row-gap: var(--spacing-5); }
  .gr6-l { row-gap: var(--spacing-6); }
  .gr7-l { row-gap: var(--spacing-7); }
}
/*

  Grid Template Columns

  Base: 
  cols = columns

*/

.cols-1  { grid-template-columns: repeat(1, 1fr) }
.cols-2  { grid-template-columns: repeat(2, 1fr) }
.cols-3  { grid-template-columns: repeat(3, 1fr) }
.cols-4  { grid-template-columns: repeat(4, 1fr) }
.cols-5  { grid-template-columns: repeat(5, 1fr) }
.cols-6  { grid-template-columns: repeat(6, 1fr) }
.cols-7  { grid-template-columns: repeat(7, 1fr) }
.cols-8  { grid-template-columns: repeat(8, 1fr) }
.cols-9  { grid-template-columns: repeat(9, 1fr) }
.cols-10 { grid-template-columns: repeat(10, 1fr) }
.cols-11 { grid-template-columns: repeat(11, 1fr) }
.cols-12 { grid-template-columns: repeat(12, 1fr) }
.cols-13 { grid-template-columns: repeat(13, 1fr) }
.cols-14 { grid-template-columns: repeat(14, 1fr) }
.cols-15 { grid-template-columns: repeat(15, 1fr) }
.cols-16 { grid-template-columns: repeat(16, 1fr) }

.cols-min-32 { grid-template-columns: repeat(auto-fill, minmax( 32px, 1fr )); }
.cols-min-64 { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
.cols-min-128 { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
.cols-min-192 { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
.cols-min-240 { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
.cols-min-256 { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
.cols-min-320 { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
.cols-min-480 { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }

.masonry { grid-template-columns: masonry }
.subgrid { grid-template-columns: subgrid }
.cols-none { grid-template-columns: none }


@container (min-width:30em) {
  .cols-1-s  { grid-template-columns: repeat(1, 1fr) }
  .cols-2-s  { grid-template-columns: repeat(2, 1fr) }
  .cols-3-s  { grid-template-columns: repeat(3, 1fr) }
  .cols-4-s  { grid-template-columns: repeat(4, 1fr) }
  .cols-5-s  { grid-template-columns: repeat(5, 1fr) }
  .cols-6-s  { grid-template-columns: repeat(6, 1fr) }
  .cols-7-s  { grid-template-columns: repeat(7, 1fr) }
  .cols-8-s  { grid-template-columns: repeat(8, 1fr) }
  .cols-9-s  { grid-template-columns: repeat(9, 1fr) }
  .cols-10-s { grid-template-columns: repeat(10, 1fr) }
  .cols-11-s { grid-template-columns: repeat(11, 1fr) }
  .cols-12-s { grid-template-columns: repeat(12, 1fr) }
  .cols-13-s { grid-template-columns: repeat(13, 1fr) }
  .cols-14-s { grid-template-columns: repeat(14, 1fr) }
  .cols-15-s { grid-template-columns: repeat(15, 1fr) }
  .cols-16-s { grid-template-columns: repeat(16, 1fr) }

  .cols-min-32-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
  .cols-min-64-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
  .cols-min-128-s { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
  .cols-min-192-s { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
  .cols-min-240-s { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
  .cols-min-256-s { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
  .cols-min-320-s { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
  .cols-min-480-s { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }

  .masonry-s { grid-template-columns: masonry }
  .subgrid-s { grid-template-columns: subgrid }
  .cols-none-s { grid-template-columns: none }
}

@container (min-width:48em) {
  .cols-1-m  { grid-template-columns: repeat(1, 1fr) }
  .cols-2-m  { grid-template-columns: repeat(2, 1fr) }
  .cols-3-m  { grid-template-columns: repeat(3, 1fr) }
  .cols-4-m  { grid-template-columns: repeat(4, 1fr) }
  .cols-5-m  { grid-template-columns: repeat(5, 1fr) }
  .cols-6-m  { grid-template-columns: repeat(6, 1fr) }
  .cols-7-m  { grid-template-columns: repeat(7, 1fr) }
  .cols-8-m  { grid-template-columns: repeat(8, 1fr) }
  .cols-9-m  { grid-template-columns: repeat(9, 1fr) }
  .cols-10-m { grid-template-columns: repeat(10, 1fr) }
  .cols-11-m { grid-template-columns: repeat(11, 1fr) }
  .cols-12-m { grid-template-columns: repeat(12, 1fr) }
  .cols-13-m { grid-template-columns: repeat(13, 1fr) }
  .cols-14-m { grid-template-columns: repeat(14, 1fr) }
  .cols-15-m { grid-template-columns: repeat(15, 1fr) }
  .cols-16-m { grid-template-columns: repeat(16, 1fr) }

  .cols-min-64-m { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
  .cols-min-128-m { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
  .cols-min-192-m { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
  .cols-min-240-m { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
  .cols-min-256-m { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
  .cols-min-320-m { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
  .cols-min-480-m { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }

  .masonry-m { grid-template-columns: masonry }
  .subgrid-m { grid-template-columns: subgrid }
  .cols-none-m { grid-template-columns: none }
}

@container (min-width:64em) {
  .cols-1-l  { grid-template-columns: repeat(1, 1fr) }
  .cols-2-l  { grid-template-columns: repeat(2, 1fr) }
  .cols-3-l  { grid-template-columns: repeat(3, 1fr) }
  .cols-4-l  { grid-template-columns: repeat(4, 1fr) }
  .cols-5-l  { grid-template-columns: repeat(5, 1fr) }
  .cols-6-l  { grid-template-columns: repeat(6, 1fr) }
  .cols-7-l  { grid-template-columns: repeat(7, 1fr) }
  .cols-8-l  { grid-template-columns: repeat(8, 1fr) }
  .cols-9-l  { grid-template-columns: repeat(9, 1fr) }
  .cols-10-l { grid-template-columns: repeat(10, 1fr) }
  .cols-11-l { grid-template-columns: repeat(11, 1fr) }
  .cols-12-l { grid-template-columns: repeat(12, 1fr) }
  .cols-13-l { grid-template-columns: repeat(13, 1fr) }
  .cols-14-l { grid-template-columns: repeat(14, 1fr) }
  .cols-15-l { grid-template-columns: repeat(15, 1fr) }
  .cols-16-l { grid-template-columns: repeat(16, 1fr) }

  .cols-min-64-l { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
  .cols-min-128-l { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
  .cols-min-192-l { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
  .cols-min-240-l { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
  .cols-min-256-l { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
  .cols-min-320-l { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
  .cols-min-480-l { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }

  .masonry-l { grid-template-columns: masonry }
  .subgrid-l { grid-template-columns: subgrid }
  .cols-none-l { grid-template-columns: none }
}
/*

  Grid Column

  This sets the width of the element via declaring how many columns wide it should be

  Base: 
  cols = columns

*/

.col-1  { grid-column: span 1 / span 1; }
.col-2  { grid-column: span 2 / span 2; }
.col-3  { grid-column: span 3 / span 3; }
.col-4  { grid-column: span 4 / span 4; }
.col-5  { grid-column: span 5 / span 5; }
.col-6  { grid-column: span 6 / span 6; }
.col-7  { grid-column: span 7 / span 7; }
.col-8  { grid-column: span 8 / span 8; }
.col-9  { grid-column: span 9 / span 9; }
.col-10  { grid-column: span 10 / span 10; }
.col-11  { grid-column: span 11 / span 11; }
.col-12  { grid-column: span 12 / span 12; }
.col-13  { grid-column: span 13 / span 13; }
.col-14  { grid-column: span 14 / span 14; }
.col-15  { grid-column: span 15 / span 15; }
.col-16  { grid-column: span 16 / span 16; }
.col-full  { grid-column: 1 / -1; }
.col-center1  { grid-column: 2 / -2; }
.col-center2  { grid-column: 3 / -3; }
.col-center3  { grid-column: 4 / -4; }
.col-center4  { grid-column: 6 / -6; }
.col-auto  { grid-column: auto; }

.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }
.start-13 { grid-column-start: 13; }
.start-14 { grid-column-start: 14; }
.start-15 { grid-column-start: 15; }

.end-1 { grid-column-end: 1; }
.end-2 { grid-column-end: 2; }
.end-3 { grid-column-end: 3; }
.end-4 { grid-column-end: 4; }
.end-5 { grid-column-end: 5; }
.end-6 { grid-column-end: 6; }
.end-7 { grid-column-end: 7; }
.end-8 { grid-column-end: 8; }
.end-9 { grid-column-end: 9; }
.end-10 { grid-column-end: 10; }
.end-11 { grid-column-end: 11; }
.end-12 { grid-column-end: 12; }
.end-13 { grid-column-end: 13; }
.end-14 { grid-column-end: 14; }
.end-15 { grid-column-end: 15; }
.end-16 { grid-column-end: 16; }

@container (min-width:30em) {
  .col-1-s  { grid-column: span 1 / span 1; }
  .col-2-s  { grid-column: span 2 / span 2; }
  .col-3-s  { grid-column: span 3 / span 3; }
  .col-4-s  { grid-column: span 4 / span 4; }
  .col-5-s  { grid-column: span 5 / span 5; }
  .col-6-s  { grid-column: span 6 / span 6; }
  .col-7-s  { grid-column: span 7 / span 7; }
  .col-8-s  { grid-column: span 8 / span 8; }
  .col-9-s  { grid-column: span 9 / span 9; }
  .col-10-s  { grid-column: span 10 / span 10; }
  .col-11-s  { grid-column: span 11 / span 11; }
  .col-12-s  { grid-column: span 12 / span 12; }
  .col-13-s  { grid-column: span 13 / span 13; }
  .col-14-s  { grid-column: span 14 / span 14; }
  .col-15-s  { grid-column: span 15 / span 15; }
  .col-16-s  { grid-column: span 16 / span 16; }
  .col-full-s  { grid-column: 1 / -1; }
  .col-center1-s  { grid-column: 2 / -2; }
  .col-center2-s  { grid-column: 3 / -3; }
  .col-center3-s  { grid-column: 4 / -4; }
  .col-center4-s  { grid-column: 6 / -6; }
  .col-auto-s  { grid-column: auto; }

  .start-1-s { grid-column-start: 1; }
  .start-2-s { grid-column-start: 2; }
  .start-3-s { grid-column-start: 3; }
  .start-4-s { grid-column-start: 4; }
  .start-5-s { grid-column-start: 5; }
  .start-6-s { grid-column-start: 6; }
  .start-7-s { grid-column-start: 7; }
  .start-8-s { grid-column-start: 8; }
  .start-9-s { grid-column-start: 9; }
  .start-10-s { grid-column-start: 10; }
  .start-11-s { grid-column-start: 11; }
  .start-12-s { grid-column-start: 12; }
  .start-13-s { grid-column-start: 13; }
  .start-14-s { grid-column-start: 14; }
  .start-15-s { grid-column-start: 15; }

  .end-1-s { grid-column-end: 1; }
  .end-2-s { grid-column-end: 2; }
  .end-3-s { grid-column-end: 3; }
  .end-4-s { grid-column-end: 4; }
  .end-5-s { grid-column-end: 5; }
  .end-6-s { grid-column-end: 6; }
  .end-7-s { grid-column-end: 7; }
  .end-8-s { grid-column-end: 8; }
  .end-9-s { grid-column-end: 9; }
  .end-10-s { grid-column-end: 10; }
  .end-11-s { grid-column-end: 11; }
  .end-12-s { grid-column-end: 12; }
  .end-13-s { grid-column-end: 13; }
  .end-14-s { grid-column-end: 14; }
  .end-15-s { grid-column-end: 15; }
  .end-16-s { grid-column-end: 16; }

}

@container (min-width:48em) {
  .col-1-m  { grid-column: span 1 / span 1; }
  .col-2-m  { grid-column: span 2 / span 2; }
  .col-3-m  { grid-column: span 3 / span 3; }
  .col-4-m  { grid-column: span 4 / span 4; }
  .col-5-m  { grid-column: span 5 / span 5; }
  .col-6-m  { grid-column: span 6 / span 6; }
  .col-7-m  { grid-column: span 7 / span 7; }
  .col-8-m  { grid-column: span 8 / span 8; }
  .col-9-m  { grid-column: span 9 / span 9; }
  .col-10-m  { grid-column: span 10 / span 10; }
  .col-11-m  { grid-column: span 11 / span 11; }
  .col-12-m  { grid-column: span 12 / span 12; }
  .col-13-m  { grid-column: span 13 / span 13; }
  .col-14-m  { grid-column: span 14 / span 14; }
  .col-15-m  { grid-column: span 15 / span 15; }
  .col-16-m  { grid-column: span 16 / span 16; }
  .col-full-m  { grid-column: 1 / -1; }
  .col-center1-m  { grid-column: 2 / -2; }
  .col-center2-m  { grid-column: 3 / -3; }
  .col-center3-m  { grid-column: 4 / -4; }
  .col-center4-m  { grid-column: 6 / -6; }
  .col-auto-m  { grid-column: auto; }

  .start-1-m { grid-column-start: 1; }
  .start-2-m { grid-column-start: 2; }
  .start-3-m { grid-column-start: 3; }
  .start-4-m { grid-column-start: 4; }
  .start-5-m { grid-column-start: 5; }
  .start-6-m { grid-column-start: 6; }
  .start-7-m { grid-column-start: 7; }
  .start-8-m { grid-column-start: 8; }
  .start-9-m { grid-column-start: 9; }
  .start-10-m { grid-column-start: 10; }
  .start-11-m { grid-column-start: 11; }
  .start-12-m { grid-column-start: 12; }
  .start-13-m { grid-column-start: 13; }
  .start-14-m { grid-column-start: 14; }
  .start-15-m { grid-column-start: 15; }

  .end-1-m { grid-column-end: 1; }
  .end-2-m { grid-column-end: 2; }
  .end-3-m { grid-column-end: 3; }
  .end-4-m { grid-column-end: 4; }
  .end-5-m { grid-column-end: 5; }
  .end-6-m { grid-column-end: 6; }
  .end-7-m { grid-column-end: 7; }
  .end-8-m { grid-column-end: 8; }
  .end-9-m { grid-column-end: 9; }
  .end-10-m { grid-column-end: 10; }
  .end-11-m { grid-column-end: 11; }
  .end-12-m { grid-column-end: 12; }
  .end-13-m { grid-column-end: 13; }
  .end-14-m { grid-column-end: 14; }
  .end-15-m { grid-column-end: 15; }
  .end-16-m { grid-column-end: 16; }
}

@container (min-width:64em) {
  .col-1-l  { grid-column: span 1 / span 1; }
  .col-2-l  { grid-column: span 2 / span 2; }
  .col-3-l  { grid-column: span 3 / span 3; }
  .col-4-l  { grid-column: span 4 / span 4; }
  .col-5-l  { grid-column: span 5 / span 5; }
  .col-6-l  { grid-column: span 6 / span 6; }
  .col-7-l  { grid-column: span 7 / span 7; }
  .col-8-l  { grid-column: span 8 / span 8; }
  .col-9-l  { grid-column: span 9 / span 9; }
  .col-10-l  { grid-column: span 10 / span 10; }
  .col-11-l  { grid-column: span 11 / span 11; }
  .col-12-l  { grid-column: span 12 / span 12; }
  .col-13-l  { grid-column: span 13 / span 13; }
  .col-14-l  { grid-column: span 14 / span 14; }
  .col-15-l  { grid-column: span 15 / span 15; }
  .col-16-l  { grid-column: span 16 / span 16; }
  .col-full-l  { grid-column: 1 / -1; }
  .col-center1-l  { grid-column: 2 / -2; }
  .col-center2-l  { grid-column: 3 / -3; }
  .col-center3-l  { grid-column: 4 / -4; }
  .col-center4-l  { grid-column: 6 / -6; }
  .col-auto-l  { grid-column: auto; }

  .start-1-l { grid-column-start: 1; }
  .start-2-l { grid-column-start: 2; }
  .start-3-l { grid-column-start: 3; }
  .start-4-l { grid-column-start: 4; }
  .start-5-l { grid-column-start: 5; }
  .start-6-l { grid-column-start: 6; }
  .start-7-l { grid-column-start: 7; }
  .start-8-l { grid-column-start: 8; }
  .start-9-l { grid-column-start: 9; }
  .start-10-l { grid-column-start: 10; }
  .start-11-l { grid-column-start: 11; }
  .start-12-l { grid-column-start: 12; }
  .start-13-l { grid-column-start: 13; }
  .start-14-l { grid-column-start: 14; }
  .start-15-l { grid-column-start: 15; }

  .end-1-l { grid-column-end: 1; }
  .end-2-l { grid-column-end: 2; }
  .end-3-l { grid-column-end: 3; }
  .end-4-l { grid-column-end: 4; }
  .end-5-l { grid-column-end: 5; }
  .end-6-l { grid-column-end: 6; }
  .end-7-l { grid-column-end: 7; }
  .end-8-l { grid-column-end: 8; }
  .end-9-l { grid-column-end: 9; }
  .end-10-l { grid-column-end: 10; }
  .end-11-l { grid-column-end: 11; }
  .end-12-l { grid-column-end: 12; }
  .end-13-l { grid-column-end: 13; }
  .end-14-l { grid-column-end: 14; }
  .end-15-l { grid-column-end: 15; }
  .end-16-l { grid-column-end: 16; }
}
/*

  Grid Row

  This sets the width of the element via declaring how many columns wide it should be

  Base: 
  cols = columns

*/

.row-auto  { grid-row: auto; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }
.row-start-8 { grid-row-start: 8; }
.row-start-9 { grid-row-start: 9; }
.row-start-10 { grid-row-start: 10; }
.row-start-11 { grid-row-start: 11; }
.row-start-12 { grid-row-start: 12; }
.row-start-13 { grid-row-start: 13; }
.row-start-14 { grid-row-start: 14; }
.row-start-15 { grid-row-start: 15; }
.row-start-16 { grid-row-start: 16; }

.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }
.row-end-8 { grid-row-end: 8; }
.row-end-9 { grid-row-end: 9; }
.row-end-10 { grid-row-end: 10; }
.row-end-11 { grid-row-end: 11; }
.row-end-12 { grid-row-end: 12; }
.row-end-13 { grid-row-end: 13; }
.row-end-14 { grid-row-end: 14; }
.row-end-15 { grid-row-end: 15; }
.row-end-16 { grid-row-end: 16; }

@container (min-width:30em) {
  .row-auto-s  { grid-row: auto; }

  .row-start-1-s { grid-row-start: 1; }
  .row-start-2-s { grid-row-start: 2; }
  .row-start-3-s { grid-row-start: 3; }
  .row-start-4-s { grid-row-start: 4; }
  .row-start-5-s { grid-row-start: 5; }
  .row-start-6-s { grid-row-start: 6; }
  .row-start-7-s { grid-row-start: 7; }
  .row-start-8-s { grid-row-start: 8; }
  .row-start-9-s { grid-row-start: 9; }
  .row-start-10-s { grid-row-start: 10; }
  .row-start-11-s { grid-row-start: 11; }
  .row-start-12-s { grid-row-start: 12; }
  .row-start-13-s { grid-row-start: 13; }
  .row-start-14-s { grid-row-start: 14; }
  .row-start-15-s { grid-row-start: 15; }
  .row-start-16-s { grid-row-start: 16; }

  .row-end-1-s { grid-row-end: 1; }
  .row-end-2-s { grid-row-end: 2; }
  .row-end-3-s { grid-row-end: 3; }
  .row-end-4-s { grid-row-end: 4; }
  .row-end-5-s { grid-row-end: 5; }
  .row-end-6-s { grid-row-end: 6; }
  .row-end-7-s { grid-row-end: 7; }
  .row-end-8-s { grid-row-end: 8; }
  .row-end-9-s { grid-row-end: 9; }
  .row-end-10-s { grid-row-end: 10; }
  .row-end-11-s { grid-row-end: 11; }
  .row-end-12-s { grid-row-end: 12; }
  .row-end-13-s { grid-row-end: 13; }
  .row-end-14-s { grid-row-end: 14; }
  .row-end-15-s { grid-row-end: 15; }
  .row-end-16-s { grid-row-end: 16; }
}

@container (min-width:48em) {
  .row-auto-m  { grid-row: auto; }

  .row-start-1-m { grid-row-start: 1; }
  .row-start-2-m { grid-row-start: 2; }
  .row-start-3-m { grid-row-start: 3; }
  .row-start-4-m { grid-row-start: 4; }
  .row-start-5-m { grid-row-start: 5; }
  .row-start-6-m { grid-row-start: 6; }
  .row-start-7-m { grid-row-start: 7; }
  .row-start-8-m { grid-row-start: 8; }
  .row-start-9-m { grid-row-start: 9; }
  .row-start-10-m { grid-row-start: 10; }
  .row-start-11-m { grid-row-start: 11; }
  .row-start-12-m { grid-row-start: 12; }
  .row-start-13-m { grid-row-start: 13; }
  .row-start-14-m { grid-row-start: 14; }
  .row-start-15-m { grid-row-start: 15; }
  .row-start-16-m { grid-row-start: 16; }

  .row-end-1-m { grid-row-end: 1; }
  .row-end-2-m { grid-row-end: 2; }
  .row-end-3-m { grid-row-end: 3; }
  .row-end-4-m { grid-row-end: 4; }
  .row-end-5-m { grid-row-end: 5; }
  .row-end-6-m { grid-row-end: 6; }
  .row-end-7-m { grid-row-end: 7; }
  .row-end-8-m { grid-row-end: 8; }
  .row-end-9-m { grid-row-end: 9; }
  .row-end-10-m { grid-row-end: 10; }
  .row-end-11-m { grid-row-end: 11; }
  .row-end-12-m { grid-row-end: 12; }
  .row-end-13-m { grid-row-end: 13; }
  .row-end-14-m { grid-row-end: 14; }
  .row-end-15-m { grid-row-end: 15; }
  .row-end-16-m { grid-row-end: 16; }
}

@container (min-width:64em) {
  .row-auto-l  { grid-row: auto; }

  .row-start-1-l { grid-row-start: 1; }
  .row-start-2-l { grid-row-start: 2; }
  .row-start-3-l { grid-row-start: 3; }
  .row-start-4-l { grid-row-start: 4; }
  .row-start-5-l { grid-row-start: 5; }
  .row-start-6-l { grid-row-start: 6; }
  .row-start-7-l { grid-row-start: 7; }
  .row-start-8-l { grid-row-start: 8; }
  .row-start-9-l { grid-row-start: 9; }
  .row-start-10-l { grid-row-start: 10; }
  .row-start-11-l { grid-row-start: 11; }
  .row-start-12-l { grid-row-start: 12; }
  .row-start-13-l { grid-row-start: 13; }
  .row-start-14-l { grid-row-start: 14; }
  .row-start-15-l { grid-row-start: 15; }
  .row-start-16-l { grid-row-start: 16; }

  .row-end-1-l { grid-row-end: 1; }
  .row-end-2-l { grid-row-end: 2; }
  .row-end-3-l { grid-row-end: 3; }
  .row-end-4-l { grid-row-end: 4; }
  .row-end-5-l { grid-row-end: 5; }
  .row-end-6-l { grid-row-end: 6; }
  .row-end-7-l { grid-row-end: 7; }
  .row-end-8-l { grid-row-end: 8; }
  .row-end-9-l { grid-row-end: 9; }
  .row-end-10-l { grid-row-end: 10; }
  .row-end-11-l { grid-row-end: 11; }
  .row-end-12-l { grid-row-end: 12; }
  .row-end-13-l { grid-row-end: 13; }
  .row-end-14-l { grid-row-end: 14; }
  .row-end-15-l { grid-row-end: 15; }
  .row-end-16-l { grid-row-end: 16; }
}
/*

  BACKDROP-FILTER EFFECTS

    - Blur
    - Grayscale
    - Hue Rotate
    - Invert
    - INTERACTIONS
      - Hover
      - Focus

*/

@container (max-width:48em) {
  .blur2-s { filter: blur(16px); }  
}

@container (max-width:80em) and (min-width:48em){
  .blur1-m { filter: blur(4px); }  
}

.filter-none { filter: none; }

.blur1 { filter: blur(4px); }
.blur2 { filter: blur(16px); }
.blur3 { filter: blur(96px); }

.grayscale1, .greyscale1 { filter: grayscale(0); }
.grayscale2, .greyscale2 { filter: grayscale(50%); }
.grayscale3, .greyscale3 { filter: grayscale(100%); }

.hue-rotate0 { filter: hue-rotate(0deg);}
.hue-rotate1 { filter: hue-rotate(45deg);}
.hue-rotate2 { filter: hue-rotate(90deg);}
.hue-rotate3 { filter: hue-rotate(135deg);}
.hue-rotate4 { filter: hue-rotate(180deg);}
.hue-rotate5 { filter: hue-rotate(225deg);}
.hue-rotate6 { filter: hue-rotate(270deg);}
.hue-rotate7 { filter: hue-rotate(315deg);}

.invert { filter: invert(100%); }

/* TODO: Add drop-shadow */

.filter-none-hover:hover { filter: none; }

.blur1-hover:hover { filter: blur(4px); }
.blur2-hover:hover { filter: blur(16px); }
.blur3-hover:hover { filter: blur(96px); }

.grayscale1-hover:hover, .greyscale1-hover:hover { filter: grayscale(0); }
.grayscale2-hover:hover, .greyscale2-hover:hover { filter: grayscale(50%); }
.grayscale3-hover:hover, .greyscale3-hover:hover { filter: grayscale(100%); }

.hue-rotate0-hover:hover { filter: hue-rotate(0deg);}
.hue-rotate1-hover:hover { filter: hue-rotate(45deg);}
.hue-rotate2-hover:hover { filter: hue-rotate(90deg);}
.hue-rotate3-hover:hover { filter: hue-rotate(135deg);}
.hue-rotate4-hover:hover { filter: hue-rotate(180deg);}
.hue-rotate5-hover:hover { filter: hue-rotate(225deg);}
.hue-rotate6-hover:hover { filter: hue-rotate(270deg);}
.hue-rotate7-hover:hover { filter: hue-rotate(315deg);}

.invert-hover:hover { filter: invert(100%); }

.blur1-focus:focus { filter: blur(4px); }
.blur2-focus:focus { filter: blur(16px); }
.blur3-focus:focus { filter: blur(96px); }

.grayscale1-focus:focus, .greyscale1-focus:focus { filter: grayscale(0); }
.grayscale2-focus:focus, .greyscale2-focus:focus { filter: grayscale(50%); }
.grayscale3-focus:focus, .greyscale3-focus:focus { filter: grayscale(100%); }

.hue-rotate0-focus:focus { filter: hue-rotate(0deg);}
.hue-rotate1-focus:focus { filter: hue-rotate(45deg);}
.hue-rotate2-focus:focus { filter: hue-rotate(90deg);}
.hue-rotate3-focus:focus { filter: hue-rotate(135deg);}
.hue-rotate4-focus:focus { filter: hue-rotate(180deg);}
.hue-rotate5-focus:focus { filter: hue-rotate(225deg);}
.hue-rotate6-focus:focus { filter: hue-rotate(270deg);}
.hue-rotate7-focus:focus { filter: hue-rotate(315deg);}

.invert-focus:focus { filter: invert(100%); }
/*

  FILTER EFFECTS

    - Blur
    - Grayscale
    - Hue Rotate
    - Invert

*/

.filter-none { filter: none; }

.blur1 { filter: blur(4px); }
.blur2 { filter: blur(16px); }
.blur3 { filter: blur(96px); }

.grayscale1, .greyscale1 { filter: grayscale(0); }
.grayscale2, .greyscale2 { filter: grayscale(50%); }
.grayscale3, .greyscale3 { filter: grayscale(100%); }

.hue-rotate0 { filter: hue-rotate(0deg);}
.hue-rotate1 { filter: hue-rotate(45deg);}
.hue-rotate2 { filter: hue-rotate(90deg);}
.hue-rotate3 { filter: hue-rotate(135deg);}
.hue-rotate4 { filter: hue-rotate(180deg);}
.hue-rotate5 { filter: hue-rotate(225deg);}
.hue-rotate6 { filter: hue-rotate(270deg);}
.hue-rotate7 { filter: hue-rotate(315deg);}

.invert { filter: invert(100%); }

/* TODO: Add drop-shadow */

.filter-none-hover:hover { filter: none; }

.blur1-hover:hover { filter: blur(4px); }
.blur2-hover:hover { filter: blur(16px); }
.blur3-hover:hover { filter: blur(96px); }

.grayscale1-hover:hover, .greyscale1-hover:hover { filter: grayscale(0); }
.grayscale2-hover:hover, .greyscale2-hover:hover { filter: grayscale(50%); }
.grayscale3-hover:hover, .greyscale3-hover:hover { filter: grayscale(100%); }

.hue-rotate0-hover:hover { filter: hue-rotate(0deg);}
.hue-rotate1-hover:hover { filter: hue-rotate(45deg);}
.hue-rotate2-hover:hover { filter: hue-rotate(90deg);}
.hue-rotate3-hover:hover { filter: hue-rotate(135deg);}
.hue-rotate4-hover:hover { filter: hue-rotate(180deg);}
.hue-rotate5-hover:hover { filter: hue-rotate(225deg);}
.hue-rotate6-hover:hover { filter: hue-rotate(270deg);}
.hue-rotate7-hover:hover { filter: hue-rotate(315deg);}

.invert-hover:hover { filter: invert(100%); }

.blur1-focus:focus { filter: blur(4px); }
.blur2-focus:focus { filter: blur(16px); }
.blur3-focus:focus { filter: blur(96px); }

.grayscale1-focus:focus, .greyscale1-focus:focus { filter: grayscale(0); }
.grayscale2-focus:focus, .greyscale2-focus:focus { filter: grayscale(50%); }
.grayscale3-focus:focus, .greyscale3-focus:focus { filter: grayscale(100%); }

.hue-rotate0-focus:focus { filter: hue-rotate(0deg);}
.hue-rotate1-focus:focus { filter: hue-rotate(45deg);}
.hue-rotate2-focus:focus { filter: hue-rotate(90deg);}
.hue-rotate3-focus:focus { filter: hue-rotate(135deg);}
.hue-rotate4-focus:focus { filter: hue-rotate(180deg);}
.hue-rotate5-focus:focus { filter: hue-rotate(225deg);}
.hue-rotate6-focus:focus { filter: hue-rotate(270deg);}
.hue-rotate7-focus:focus { filter: hue-rotate(315deg);}

.invert-focus:focus { filter: invert(100%); }
/*

  FLEXBOX

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

*/

/* 1. Fix for Chrome 44 bug. */
.flex-auto {
  flex: 1 1 auto;
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
}

.flex-none { flex: none; }

.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

@container (min-width:30em) {
  .flex-auto-s {
    flex: 1 1 auto;
    min-width: 0; /* 1 */
    min-height: 0; /* 1 */
  }
  .flex-none-s { flex: none; }

  .flex-grow-0-s { flex-grow: 0; }
  .flex-grow-1-s { flex-grow: 1; }

  .flex-shrink-0-s { flex-shrink: 0; }
  .flex-shrink-1-s { flex-shrink: 1; }
}
@container (min-width:48em) {
  .flex-auto-m {
    flex: 1 1 auto;
    min-width: 0; /* 1 */
    min-height: 0; /* 1 */
  }
  .flex-none-m { flex: none; }

  .flex-grow-0-m { flex-grow: 0; }
  .flex-grow-1-m { flex-grow: 1; }

  .flex-shrink-0-m { flex-shrink: 0; }
  .flex-shrink-1-m { flex-shrink: 1; }
}

@container (min-width:64em) {
  .flex-auto-l {
    flex: 1 1 auto;
    min-width: 0; /* 1 */
    min-height: 0; /* 1 */
  }
  .flex-none-l { flex: none; }

  .flex-grow-0-l { flex-grow: 0; }
  .flex-grow-1-l { flex-grow: 1; }

  .flex-shrink-0-l { flex-shrink: 0; }
  .flex-shrink-1-l { flex-shrink: 1; }
}
/*

  FLEX-DIRECTION

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

*/


.flex-column  { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-column-reverse  { flex-direction: column-reverse; }
.flex-row-reverse     { flex-direction: row-reverse; }

@container (min-width:30em) {
  .flex-column-s { flex-direction: column; }
  .flex-row-s { flex-direction: row; }
  .flex-column-reverse-s { flex-direction: column-reverse; }
  .flex-row-reverse-s { flex-direction: row-reverse; }
}

@container (min-width:48em) {
  .flex-column-m { flex-direction: column; }
  .flex-row-m     { flex-direction: row; }
  .flex-column-reverse-m { flex-direction: column-reverse; }
  .flex-row-reverse-m { flex-direction: row-reverse; }
}

@container (min-width:64em) {
  .flex-column-l { flex-direction: column; }
  .flex-row-l { flex-direction: row; }
  .flex-column-reverse-l { flex-direction: column-reverse; }
  .flex-row-reverse-l { flex-direction: row-reverse; }
}
/*

  FLEX-WRAP

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

*/

.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.flex-wrap-reverse    { flex-wrap: wrap-reverse; }

@container (min-width:30em) {
  .flex-wrap-s { flex-wrap: wrap; }
  .flex-nowrap-s { flex-wrap: nowrap; }
  .flex-wrap-reverse-s { flex-wrap: wrap-reverse; }
}

@container (min-width:48em) {
  .flex-wrap-m { flex-wrap: wrap; }
  .flex-nowrap-m { flex-wrap: nowrap; }
  .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
}

@container (min-width:64em) {
  .flex-wrap-l { flex-wrap: wrap; }
  .flex-nowrap-l { flex-wrap: nowrap; }
  .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
}
/*

  ALIGN-ITEMS

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

*/

.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

@container (min-width:30em) {
  .items-start-s    { align-items: flex-start; }
  .items-end-s   { align-items: flex-end; }
  .items-center-s   { align-items: center; }
  .items-baseline-s { align-items: baseline; }
  .items-stretch-s  { align-items: stretch; }
}

@container (min-width:48em) {
  .items-start-m    { align-items: flex-start; }
  .items-end-m   { align-items: flex-end; }
  .items-center-m   { align-items: center; }
  .items-baseline-m { align-items: baseline; }
  .items-stretch-m  { align-items: stretch; }
}

@container (min-width:64em) {
  .items-start-l    { align-items: flex-start; }
  .items-end-l   { align-items: flex-end; }
  .items-center-l   { align-items: center; }
  .items-baseline-l { align-items: baseline; }
  .items-stretch-l  { align-items: stretch; }
}
/*

  ALIGN-CONTENT

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

  MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

*/

.content-start   { align-content: flex-start; }
.content-end     { align-content: flex-end; }
.content-center  { align-content: center; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-stretch { align-content: stretch; }

@container (min-width:30em) {
  .content-start-s { align-content: flex-start; }
  .content-end-s { align-content: flex-end; }
  .content-center-s { align-content: center; }
  .content-between-s { align-content: space-between; }
  .content-around-s { align-content: space-around; }
  .content-stretch-s { align-content: stretch; }
}
@container (min-width:48em) {
  .content-start-m { align-content: flex-start; }
  .content-end-m { align-content: flex-end; }
  .content-center-m { align-content: center; }
  .content-between-m { align-content: space-between; }
  .content-around-m { align-content: space-around; }
  .content-stretch-m { align-content: stretch; }
}
@container (min-width:64em) {
  .content-start-l { align-content: flex-start; }
  .content-end-l { align-content: flex-end; }
  .content-center-l { align-content: center; }
  .content-between-l { align-content: space-between; }
  .content-around-l { align-content: space-around; }
  .content-stretch-l { align-content: stretch; }
}
/*

  ALIGN-SELF

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

*/

.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch  { align-self: stretch; }

@container (min-width:30em) {
  .self-start-s { align-self: flex-start; }
  .self-end-s { align-self: flex-end; }
  .self-center-s { align-self: center; }
  .self-baseline-s { align-self: baseline; }
  .self-stretch-s { align-self: stretch; }
}

@container (min-width:48em) {
  .self-start-m { align-self: flex-start; }
  .self-end-m { align-self: flex-end; }
  .self-center-m { align-self: center; }
  .self-baseline-m { align-self: baseline; }
  .self-stretch-m { align-self: stretch; }

}

@container (min-width:64em) {
  .self-start-l { align-self: flex-start; }
  .self-end-l { align-self: flex-end; }
  .self-center-l { align-self: center; }
  .self-baseline-l { align-self: baseline; }
  .self-stretch-l { align-self: stretch; }
}
/*

  JUSTIFY-SELF

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

  MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

*/

.justify-self-start { justify-self: start; }
.justify-self-end { justify-self: end; }
.justify-self-center { justify-self: center; }
.justify-self-stretch{ justify-self: stretch; }

@container (min-width:30em) {
  .justify-self-start-s { justify-self: start; }
  .justify-self-end-s { justify-self: end; }
  .justify-self-center-s { justify-self: center; }
  .justify-self-stretch-s { justify-self: stretch; }
}
@container (min-width:48em) {
  .justify-self-start-m { justify-self: start; }
  .justify-self-end-m { justify-self: end; }
  .justify-self-center-m { justify-self: center; }
  .justify-self-stretch-m { justify-self: stretch; }
}
@container (min-width:64em) {
  .justify-self-start-l { justify-self: start; }
  .justify-self-end-l { justify-self: end; }
  .justify-self-center-l { justify-self: center; }
  .justify-self-stretch-l { justify-self: stretch; }
}
/*

  JUSTIFY-CONTENT

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

  MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

*/

.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

@container (min-width:30em) {
  .justify-start-s { justify-content: flex-start; }
  .justify-end-s { justify-content: flex-end; }
  .justify-center-s { justify-content: center; }
  .justify-between-s { justify-content: space-between; }
  .justify-around-s { justify-content: space-around; }
}
@container (min-width:48em) {
  .justify-start-m { justify-content: flex-start; }
  .justify-end-m { justify-content: flex-end; }
  .justify-center-m { justify-content: center; }
  .justify-between-m { justify-content: space-between; }
  .justify-around-m { justify-content: space-around; }

}
@container (min-width:64em) {
  .justify-start-l { justify-content: flex-start; }
  .justify-end-l { justify-content: flex-end; }
  .justify-center-l { justify-content: center; }
  .justify-between-l { justify-content: space-between; }
  .justify-around-l { justify-content: space-around; }
}
/*

  ORDER

  Media Query Extensions:
   -s = small
   -m  = medium
   -l  = large

*/

.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-last { order: 99999; }

@container (min-width:30em) {
  .order-0-s { order: 0; }
  .order-1-s { order: 1; }
  .order-2-s { order: 2; }
  .order-3-s { order: 3; }
  .order-4-s { order: 4; }
  .order-5-s { order: 5; }
  .order-6-s { order: 6; }
  .order-7-s { order: 7; }
  .order-8-s { order: 8; }
  .order-last-s { order: 99999; }
}
@container (min-width:48em) {
  .order-0-m { order: 0; }
  .order-1-m { order: 1; }
  .order-2-m { order: 2; }
  .order-3-m { order: 3; }
  .order-4-m { order: 4; }
  .order-5-m { order: 5; }
  .order-6-m { order: 6; }
  .order-7-m { order: 7; }
  .order-8-m { order: 8; }
  .order-last-m { order: 99999; }

}

@container (min-width:64em) {
  .order-0-l { order: 0; }
  .order-1-l { order: 1; }
  .order-2-l { order: 2; }
  .order-3-l { order: 3; }
  .order-4-l { order: 4; }
  .order-5-l { order: 5; }
  .order-6-l { order: 6; }
  .order-7-l { order: 7; }
  .order-8-l { order: 8; }
  .order-last-l { order: 99999; }
}
/*

   FLOATS

   1. Floated elements are automatically rendered as block level elements.
      Setting floats to display inline will fix the double margin bug in
      ie6. You know... just in case.

   2. Don't forget to clearfix your floats with .cf

   Base:
     f = float

   Modifiers:
     l = left
     r = right
     n = none

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/



.fl { float: left; }
.fr { float: right; }
.fn { float: none; }

@container (min-width:30em) {
  .fl-s { float: left; }
  .fr-s { float: right;  }
  .fn-s { float: none; }
}

@container (min-width:48em) {
  .fl-m { float: left;  }
  .fr-m { float: right;  }
  .fn-m { float: none; }
}

@container (min-width:64em) {
  .fl-l { float: left; }
  .fr-l { float: right; }
  .fn-l { float: none; }
}
.f-serif { font-family: serif;}
.f-sans-serif { font-family: sans-serif;}
.f-mono { font-family: monospace;}


/* https://github.com/system-fonts/modern-font-stacks */
.f-system{font-family: system-ui, sans-serif;}
.f-transitional{font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;}
.f-old-style{font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;}
.f-humanist{font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;}
.f-geo-humanist{font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;}
.f-classic-humanist{font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;}
.f-neo-grotesque{font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;}
.f-mono-slab{font-family: 'Nimbus Mono PS', 'Courier New', monospace;}
.f-mono-code{font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;}
.f-industrial{font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;}
.f-rounded-sans{font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;}
.f-slab-serif{font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;}
.f-antique{font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;}
.f-didone{font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;}
.f-handwritten{font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;}
/*

   FONT STYLE

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.i         { font-style: italic; }
.fs-normal { font-style: normal; }
/*

   FONT WEIGHT

   Base
     fw = font-weight

   Modifiers:
     1 = literal value 100
     2 = literal value 200
     3 = literal value 300
     4 = literal value 400
     5 = literal value 500
     6 = literal value 600
     7 = literal value 700
     8 = literal value 800
     9 = literal value 900

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.normal { font-weight: normal; }
.b      { font-weight: bold; }
.fw1    { font-weight: 100; }
.fw2    { font-weight: 200; }
.fw3    { font-weight: 300; }
.fw4    { font-weight: 400; }
.fw5    { font-weight: 500; }
.fw6    { font-weight: 600; }
.fw7    { font-weight: 700; }
.fw8    { font-weight: 800; }
.fw9    { font-weight: 900; }


@container (min-width:30em) {
  .normal-s { font-weight: normal; }
  .b-s      { font-weight: bold; }
  .fw1-s    { font-weight: 100; }
  .fw2-s    { font-weight: 200; }
  .fw3-s    { font-weight: 300; }
  .fw4-s    { font-weight: 400; }
  .fw5-s    { font-weight: 500; }
  .fw6-s    { font-weight: 600; }
  .fw7-s    { font-weight: 700; }
  .fw8-s    { font-weight: 800; }
  .fw9-s    { font-weight: 900; }
}

@container (min-width:48em) {
  .normal-m { font-weight: normal; }
  .b-m      { font-weight: bold; }
  .fw1-m    { font-weight: 100; }
  .fw2-m    { font-weight: 200; }
  .fw3-m    { font-weight: 300; }
  .fw4-m    { font-weight: 400; }
  .fw5-m    { font-weight: 500; }
  .fw6-m    { font-weight: 600; }
  .fw7-m    { font-weight: 700; }
  .fw8-m    { font-weight: 800; }
  .fw9-m    { font-weight: 900; }
}

@container (min-width:64em) {
  .normal-l { font-weight: normal; }
  .b-l      { font-weight: bold; }
  .fw1-l    { font-weight: 100; }
  .fw2-l    { font-weight: 200; }
  .fw3-l    { font-weight: 300; }
  .fw4-l    { font-weight: 400; }
  .fw5-l    { font-weight: 500; }
  .fw6-l    { font-weight: 600; }
  .fw7-l    { font-weight: 700; }
  .fw8-l    { font-weight: 800; }
  .fw9-l    { font-weight: 900; }
}
/*

   FORMS
   
*/

.input-reset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.button-reset::-moz-focus-inner,
.input-reset::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/* TODO: Variables review

   HEIGHTS

   Base:
     h = height
     min-h = min-height
     min-vh = min-height vertical screen height
     vh = vertical screen height

   Modifiers
     1 = 1st step in height scale
     2 = 2nd step in height scale
     3 = 3rd step in height scale
     4 = 4th step in height scale
     5 = 5th step in height scale

     -50   = literal value 50%
     -75   = literal value 75%
     -100  = literal value 100%

     -auto = string value of auto
     -inherit = string value of inherit

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

/* Height Scale */

.h0 {    height: var(--size-0, 0); }
.h1 {    height: var(--size-1, 1rem); }
.h2 {    height: var(--size-2, 2rem); }
.h3 {    height: var(--size-3, 3rem); }
.h4 {    height: var(--size-4, 4rem); }
.h5 {    height: var(--size-5, 8rem); }
.h6 {    height: var(--size-6, 16rem); }
.h7 {    height: var(--size-7, 32rem); }
.h7ish { height: var(--size-7ish, 36rem); }
.h8 {    height: var(--size-8, 64rem); }

/* Height Percentages - Based off of height of parent */

.h-50 {  height:  50%; }
.h-75 {  height:  75%; }
.h-100 { height: 100%; }

.min-h-100 { min-height: 100%; }

/* Screen Height Percentage */

.vh-25 {  height:  25vh; }
.vh-50 {  height:  50vh; }
.vh-75 {  height:  75vh; }
.vh-100 { height: 100vh; }

.min-vh-100 { min-height: 100vh; }


/* String Properties */

.h-auto {     height: auto; }
.h-inherit {  height: inherit; }

@container (min-width:30em) {
  .h0-s {    height: var(--size-0, 0); }
  .h1-s {    height: var(--size-1, 1rem); }
  .h2-s {    height: var(--size-2, 2rem); }
  .h3-s {    height: var(--size-3, 3rem); }
  .h4-s {    height: var(--size-4, 4rem); }
  .h5-s {    height: var(--size-5, 8rem); }
  .h6-s {    height: var(--size-6, 16rem); }
  .h7-s {    height: var(--size-7, 32rem); }
  .h8-s {    height: var(--size-8, 64rem); }
  .h-50-s { height: 50%; }
  .h-75-s { height: 75%; }
  .h-100-s { height: 100%; }
  .min-h-100-s { min-height: 100%; }
  .vh-25-s {  height:  25vh; }
  .vh-50-s {  height:  50vh; }
  .vh-75-s {  height:  75vh; }
  .vh-100-s { height: 100vh; }
  .min-vh-100-s { min-height: 100vh; }
  .h-auto-s { height: auto; }
  .h-inherit-s { height: inherit; }
}

@container (min-width:48em) {
  .h1-m { height: 1rem; }
  .h2-m { height: 2rem; }
  .h3-m { height: 4rem; }
  .h4-m { height: 8rem; }
  .h5-m { height: 16rem; }
  .h-50-m { height: 50%; }
  .h-75-m { height: 75%; }
  .h-100-m { height: 100%; }
  .min-h-100-m { min-height: 100%; }
  .vh-25-m {  height:  25vh; }
  .vh-50-m {  height:  50vh; }
  .vh-75-m {  height:  75vh; }
  .vh-100-m { height: 100vh; }
  .min-vh-100-m { min-height: 100vh; }
  .h-auto-m { height: auto; }
  .h-inherit-m { height: inherit; }
}

@container (min-width:64em) {
  .h1-l { height: 1rem; }
  .h2-l { height: 2rem; }
  .h3-l { height: 4rem; }
  .h4-l { height: 8rem; }
  .h5-l { height: 16rem; }
  .h-50-l { height: 50%; }
  .h-75-l { height: 75%; }
  .h-100-l { height: 100%; }
  .min-h-100-l { min-height: 100%; }
  .vh-25-l {  height:  25vh; }
  .vh-50-l {  height:  50vh; }
  .vh-75-l {  height:  75vh; }
  .vh-100-l { height: 100vh; }
  .min-vh-100-l { min-height: 100vh; }
  .h-auto-l { height: auto; }
  .h-inherit-l { height: inherit; }
}
/*

   LETTER SPACING

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.tracked       { letter-spacing:  var(--letter-spacing-tracked, .1em); }
.tracked-tight { letter-spacing: var(--letter-spacing-tight, -0.05em); }
.tracked-mega  { letter-spacing:  var(--letter-spacing-large, .25em); }

@container (min-width:30em) {
  .tracked-s       { letter-spacing:  var(--letter-spacing-tracked, .1em); }
  .tracked-tight-s { letter-spacing: var(--letter-spacing-tight, -0.05em); }
  .tracked-mega-s  { letter-spacing:  var(--letter-spacing-large, .25em); }
}

@container (min-width:48em) {
  .tracked-m       { letter-spacing:  var(--letter-spacing-tracked, .1em); }
  .tracked-tight-m { letter-spacing: var(--letter-spacing-tight, -0.05em); }
  .tracked-mega-m  { letter-spacing:  var(--letter-spacing-large, .25em); }
}

@container (min-width:64em) {
  .tracked-l       { letter-spacing:  var(--letter-spacing-tracked, .1em); }
  .tracked-tight-l { letter-spacing: var(--letter-spacing-tight, -0.05em); }
  .tracked-mega-l  { letter-spacing:  var(--letter-spacing-large, .25em); }
}
/*

   LINE HEIGHT / LEADING

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

  .lh-solid { line-height: var(--line-height-solid, 1); }
  .lh-title { line-height: var(--line-height-title, 1.25); }
  .lh-body  { line-height: var(--line-height-body, 1.5); }

@container (min-width:30em) {
  .lh-solid-s { line-height: var(--line-height-solid, 1); }
  .lh-title-s { line-height: var(--line-height-title, 1.25); }
  .lh-body-s  { line-height: var(--line-height-body, 1.5); }
}

@container (min-width:48em) {
  .lh-solid-m { line-height: var(--line-height-solid, 1); }
  .lh-title-m { line-height: var(--line-height-title, 1.25); }
  .lh-body-m  { line-height: var(--line-height-body, 1.5); }
}

@container (min-width:64em) {
  .lh-solid-l { line-height: var(--line-height-solid, 1); }
  .lh-title-l { line-height: var(--line-height-title, 1.25); }
  .lh-body-l  { line-height: var(--line-height-body, 1.5); }
}
/*

   LINKS

*/

.link {
  text-decoration: none;
  transition: all .15s ease-in;
}

.link:link,
.link:visited {
  transition: all .15s ease-in;
}
.link:hover   {
  transition: all .15s ease-in;
}
.link:active  {
  transition: all .15s ease-in;
}
.link:focus   {
  transition: all .15s ease-in;
  outline: 1px dotted currentColor;
}
/*

   LISTS

*/

.list {         list-style-type: none; }
/*

   MAX WIDTHS

   Base:
     mw = max-width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale
     6 = 6st step in width scale
     7 = 7nd step in width scale
     8 = 8rd step in width scale
     9 = 9th step in width scale

     -100 = literal value 100%

     -none  = string value none


   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

/* Max Width Percentages */

.mw-100  { max-width: 100%; }

/* Max Width Scale */

.mw1  {  max-width: 1rem; }
.mw2  {  max-width: 2rem; }
.mw3  {  max-width: 4rem; }
.mw4  {  max-width: 8rem; }
.mw5  {  max-width: 16rem; }
.mw6  {  max-width: 32rem; }
.mw7  {  max-width: 48rem; }
.mw8  {  max-width: 64rem; }
.mw9  {  max-width: 96rem; }

/* Max Width String Properties */

.mw-none { max-width: none; }

@container (min-width:30em) {
  .mw-100-s  { max-width: 100%; }

  .mw1-s  {  max-width: 1rem; }
  .mw2-s  {  max-width: 2rem; }
  .mw3-s  {  max-width: 4rem; }
  .mw4-s  {  max-width: 8rem; }
  .mw5-s  {  max-width: 16rem; }
  .mw6-s  {  max-width: 32rem; }
  .mw7-s  {  max-width: 48rem; }
  .mw8-s  {  max-width: 64rem; }
  .mw9-s  {  max-width: 96rem; }

  .mw-none-s { max-width: none; }
}

@container (min-width:48em) {
  .mw-100-m  { max-width: 100%; }

  .mw1-m  {  max-width: 1rem; }
  .mw2-m  {  max-width: 2rem; }
  .mw3-m  {  max-width: 4rem; }
  .mw4-m  {  max-width: 8rem; }
  .mw5-m  {  max-width: 16rem; }
  .mw6-m  {  max-width: 32rem; }
  .mw7-m  {  max-width: 48rem; }
  .mw8-m  {  max-width: 64rem; }
  .mw9-m  {  max-width: 96rem; }

  .mw-none-m { max-width: none; }
}

@container (min-width:64em) {
  .mw-100-l  { max-width: 100%; }

  .mw1-l  {  max-width: 1rem; }
  .mw2-l  {  max-width: 2rem; }
  .mw3-l  {  max-width: 4rem; }
  .mw4-l  {  max-width: 8rem; }
  .mw5-l  {  max-width: 16rem; }
  .mw6-l  {  max-width: 32rem; }
  .mw7-l  {  max-width: 48rem; }
  .mw8-l  {  max-width: 64rem; }
  .mw9-l  {  max-width: 96rem; }

  .mw-none-l { max-width: none; }
}
/*

   WIDTHS

   Base:
     w = width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale
     6 = 6th step in width scale
     7 = 7th step in width scale
     8 = 8th step in width scale

     -10  = literal value 10%
     -20  = literal value 20%
     -25  = literal value 25%
     -30  = literal value 30%
     -33  = literal value 33%
     -34  = literal value 34%
     -40  = literal value 40%
     -50  = literal value 50%
     -60  = literal value 60%
     -70  = literal value 70%
     -75  = literal value 75%
     -80  = literal value 80%
     -90  = literal value 90%
     -100 = literal value 100%

     -third      = 100% / 3 (Not supported in opera mini or IE8)
     -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
     -auto       = string value auto


   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

/* Width Scale */

.w0 {    width: var(--size-0, 0); }
.w1 {    width: var(--size-1, 1rem); }
.w2 {    width: var(--size-2, 2rem); }
.w3 {    width: var(--size-3, 3rem); }
.w4 {    width: var(--size-4, 4rem); }
.w5 {    width: var(--size-5, 8rem); }
.w6 {    width: var(--size-6, 16rem); }
.w7 {    width: var(--size-7, 32rem); }
.w8 {    width: var(--size-8, 64rem); }

.w-10 {  width:  10%; }
.w-20 {  width:  20%; }
.w-25 {  width:  25%; }
.w-50 {  width:  50%; }
.w-75 {  width:  75%; }
.w-100 { width: 100%; }

.w-third { width: calc(100% / 3); }
.w-two-thirds { width: calc(100% / 1.5); }
.w-auto { width: auto; }

@container (min-width:30em) {
  .w0-s {    width: var(--size-0, 0); }
  .w1-s {    width: var(--size-1, 1rem); }
  .w2-s {    width: var(--size-2, 2rem); }
  .w3-s {    width: var(--size-3, 3rem); }
  .w4-s {    width: var(--size-4, 4rem); }
  .w5-s {    width: var(--size-5, 8rem); }
  .w6-s {    width: var(--size-6, 16rem); }
  .w7-s {    width: var(--size-7, 32rem); }
  .w8-s {    width: var(--size-8, 64rem); }
  .w-10-s { width:  10%; }
  .w-20-s { width:  20%; }
  .w-25-s { width:  25%; }
  .w-50-s { width:  50%; }
  .w-75-s { width:  75%; }
  .w-100-s { width: 100%; }
  .w-third-s { width: calc(100% / 3); }
  .w-two-thirds-s { width: calc(100% / 1.5); }
  .w-auto-s { width: auto; }
}

@container (min-width:48em) {
  .w0-m {    width: var(--size-0, 0); }
  .w1-m {    width: var(--size-1, 1rem); }
  .w2-m {    width: var(--size-2, 2rem); }
  .w3-m {    width: var(--size-3, 3rem); }
  .w4-m {    width: var(--size-4, 4rem); }
  .w5-m {    width: var(--size-5, 8rem); }
  .w6-m {    width: var(--size-6, 16rem); }
  .w7-m {    width: var(--size-7, 32rem); }
  .w8-m {    width: var(--size-8, 64rem); }
  .w-10-m { width:  10%; }
  .w-20-m { width:  20%; }
  .w-25-m { width:  25%; }
  .w-50-m { width:  50%; }
  .w-75-m { width:  75%; }
  .w-100-m { width: 100%; }
  .w-third-m { width: calc(100% / 3); }
  .w-two-thirds-m { width: calc(100% / 1.5); }
  .w-auto-m {    width: auto; }
}

@container (min-width:64em) {
  .w0-l {    width: var(--size-0, 0); }
  .w1-l {    width: var(--size-1, 1rem); }
  .w2-l {    width: var(--size-2, 2rem); }
  .w3-l {    width: var(--size-3, 3rem); }
  .w4-l {    width: var(--size-4, 4rem); }
  .w5-l {    width: var(--size-5, 8rem); }
  .w6-l {    width: var(--size-6, 16rem); }
  .w7-l {    width: var(--size-7, 32rem); }
  .w8-l {    width: var(--size-8, 64rem); }
  .w-10-l {    width:  10%; }
  .w-20-l {    width:  20%; }
  .w-25-l {    width:  25%; }
  .w-50-l {    width:  50%; }
  .w-75-l {    width:  75%; }
  .w-100-l {   width: 100%; }
  .w-third-l { width: calc(100% / 3); }
  .w-two-thirds-l { width: calc(100% / 1.5); }
  .w-auto-l {    width: auto; }
}

@container (min-width:80em) {
  .w0-xl {    width: var(--size-0, 0); }
  .w1-xl {    width: var(--size-1, 1rem); }
  .w2-xl {    width: var(--size-2, 2rem); }
  .w3-xl {    width: var(--size-3, 3rem); }
  .w4-xl {    width: var(--size-4, 4rem); }
  .w5-xl {    width: var(--size-5, 8rem); }
  .w6-xl {    width: var(--size-6, 16rem); }
  .w7-xl {    width: var(--size-7, 32rem); }
  .w8-xl {    width: var(--size-8, 64rem); }
  .w-10-xl {    width:  10%; }
  .w-20-xl {    width:  20%; }
  .w-25-xl {    width:  25%; }
  .w-40-xl {    width:  40%; }
  .w-50-xl {    width:  50%; }
  .w-75-xl {    width:  75%; }
  .w-100-xl {   width: 100%; }
  .w-third-xl { width: calc(100% / 3); }
  .w-two-thirds-xl { width: calc(100% / 1.5); }
  .w-auto-xl {    width: auto; }
}
/*

    OVERFLOW

    Media Query Extensions:
      -s = small
      -m  = medium
      -l  = large

 */

.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }

.overflow-x-visible { overflow-x: visible; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-auto { overflow-x: auto; }

.overflow-y-visible { overflow-y: visible; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-auto { overflow-y: auto; }

@container (min-width:30em) {
  .overflow-visible-s { overflow: visible; }
  .overflow-hidden-s { overflow: hidden; }
  .overflow-scroll-s { overflow: scroll; }
  .overflow-auto-s { overflow: auto; }
  .overflow-x-visible-s { overflow-x: visible; }
  .overflow-x-hidden-s { overflow-x: hidden; }
  .overflow-x-scroll-s { overflow-x: scroll; }
  .overflow-x-auto-s { overflow-x: auto; }

  .overflow-y-visible-s { overflow-y: visible; }
  .overflow-y-hidden-s { overflow-y: hidden; }
  .overflow-y-scroll-s { overflow-y: scroll; }
  .overflow-y-auto-s { overflow-y: auto; }
}

@container (min-width:48em) {
  .overflow-visible-m { overflow: visible; }
  .overflow-hidden-m { overflow: hidden; }
  .overflow-scroll-m { overflow: scroll; }
  .overflow-auto-m { overflow: auto; }

  .overflow-x-visible-m { overflow-x: visible; }
  .overflow-x-hidden-m { overflow-x: hidden; }
  .overflow-x-scroll-m { overflow-x: scroll; }
  .overflow-x-auto-m { overflow-x: auto; }

  .overflow-y-visible-m { overflow-y: visible; }
  .overflow-y-hidden-m { overflow-y: hidden; }
  .overflow-y-scroll-m { overflow-y: scroll; }
  .overflow-y-auto-m { overflow-y: auto; }
}

@container (min-width:64em) {
  .overflow-visible-l { overflow: visible; }
  .overflow-hidden-l { overflow: hidden; }
  .overflow-scroll-l { overflow: scroll; }
  .overflow-auto-l { overflow: auto; }

  .overflow-x-visible-l { overflow-x: visible; }
  .overflow-x-hidden-l { overflow-x: hidden; }
  .overflow-x-scroll-l { overflow-x: scroll; }
  .overflow-x-auto-l { overflow-x: auto; }

  .overflow-y-visible-l { overflow-y: visible; }
  .overflow-y-hidden-l { overflow-y: hidden; }
  .overflow-y-scroll-l { overflow-y: scroll; }
  .overflow-y-auto-l { overflow-y: auto; }
}
/*

   POSITIONING

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.static { position: static; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed  { position: fixed; }
.sticky  { position: sticky; }

@container (min-width:30em) {
  .static-s { position: static; }
  .relative-s  { position: relative; }
  .absolute-s  { position: absolute; }
  .fixed-s  { position: fixed; }
  .sticky-s  { position: sticky; }
}

@container (min-width:48em) {
  .static-m { position: static; }
  .relative-m  { position: relative; }
  .absolute-m  { position: absolute; }
  .fixed-m  { position: fixed; }
  .sticky-m  { position: sticky; }
}

@container (min-width:64em) {
  .static-l { position: static; }
  .relative-l  { position: relative; }
  .absolute-l  { position: absolute; }
  .fixed-l  { position: fixed; }
  .sticky-l  { position: sticky; }
}
/*

    OPACITY

*/

.o12  { opacity: var(--opacity-12, 1); }
.o11  { opacity: var(--opacity-11,.9); }
.o10  { opacity: var(--opacity-10,.8); }
.o9   { opacity: var(--opacity-9,.7);  }
.o8   { opacity: var(--opacity-8,.6);  }
.o7   { opacity: var(--opacity-7,.5);  }
.o6   { opacity: var(--opacity-6,.4);  }
.o5   { opacity: var(--opacity-5,.3);  }
.o4   { opacity: var(--opacity-4,.2);  }
.o3   { opacity: var(--opacity-3,.1);  }
.o2   { opacity: var(--opacity-2,.05); }
.o1   { opacity: var(--opacity-1,.025);}
.o0   { opacity: var(--opacity-0,0);   }

.hover-o12:hover,
.h-o12:hover  { opacity: var(--opacity-12, 1); }
.hover-o11:hover,
.h-o11:hover  { opacity: var(--opacity-11,.9); }
.hover-o10:hover,
.h-o10:hover  { opacity: var(--opacity-10,.8); }
.hover-o9:hover,
.h-o9:hover   { opacity: var(--opacity-9,.7);  }
.hover-o8:hover,
.h-o8:hover   { opacity: var(--opacity-8,.6);  }
.hover-o7:hover,
.h-o7:hover   { opacity: var(--opacity-7,.5);  }
.hover-o6:hover,
.h-o6:hover   { opacity: var(--opacity-6,.4);  }
.hover-o5:hover,
.h-o5:hover   { opacity: var(--opacity-5,.3);  }
.hover-o4:hover,
.h-o4:hover   { opacity: var(--opacity-4,.2);  }
.hover-o3:hover,
.h-o3:hover   { opacity: var(--opacity-3,.1);  }
.hover-o2:hover,
.h-o2:hover   { opacity: var(--opacity-2,.05); }
.hover-o1:hover,
.h-o1:hover   { opacity: var(--opacity-1,.025);}
.hover-o0:hover,
.h-o0:hover   { opacity: var(--opacity-0,0);   }

.focus-o12:focus,
.f-o12:focus  { opacity: var(--opacity-12, 1); }
.focus-o11:focus,
.f-o11:focus  { opacity: var(--opacity-11,.9); }
.focus-o10:focus,
.f-o10:focus  { opacity: var(--opacity-10,.8); }
.focus-o9:focus,
.f-o9:focus   { opacity: var(--opacity-9,.7);  }
.focus-o8:focus,
.f-o8:focus   { opacity: var(--opacity-8,.6);  }
.focus-o7:focus,
.f-o7:focus   { opacity: var(--opacity-7,.5);  }
.focus-o6:focus,
.f-o6:focus   { opacity: var(--opacity-6,.4);  }
.focus-o5:focus,
.f-o5:focus   { opacity: var(--opacity-5,.3);  }
.focus-o4:focus,
.f-o4:focus   { opacity: var(--opacity-4,.2);  }
.focus-o3:focus,
.f-o3:focus   { opacity: var(--opacity-3,.1);  }
.focus-o2:focus,
.f-o2:focus   { opacity: var(--opacity-2,.05); }
.focus-o1:focus,
.f-o1:focus   { opacity: var(--opacity-1,.025);}
.focus-o0:focus,
.f-o0:focus   { opacity: var(--opacity-0,0);   }

@container (min-width:30em) {
  .o12-s  { opacity: var(--opacity-12, 1); }
  .o11-s  { opacity: var(--opacity-11,.9); }
  .o10-s  { opacity: var(--opacity-10,.8); }
  .o9-s   { opacity: var(--opacity-9,.7);  }
  .o8-s   { opacity: var(--opacity-8,.6);  }
  .o7-s   { opacity: var(--opacity-7,.5);  }
  .o6-s   { opacity: var(--opacity-6,.4);  }
  .o5-s   { opacity: var(--opacity-5,.3);  }
  .o4-s   { opacity: var(--opacity-4,.2);  }
  .o3-s   { opacity: var(--opacity-3,.1);  }
  .o2-s   { opacity: var(--opacity-2,.05); }
  .o1-s   { opacity: var(--opacity-1,.025);}
  .hover-o12-s:hover,
  .h-o12-s:hover { opacity: var(--opacity-12, 1); }
  .hover-o11-s:hover,
  .h-o11-s:hover { opacity: var(--opacity-11,.9); }
  .hover-o10-s:hover,
  .h-o10-s:hover { opacity: var(--opacity-10,.8); }
  .hover-o9-s:hover,
  .h-o9-s:hover  { opacity: var(--opacity-9,.7);  }
  .hover-o8-s:hover,
  .h-o8-s:hover  { opacity: var(--opacity-8,.6);  }
  .hover-o7-s:hover,
  .h-o7-s:hover  { opacity: var(--opacity-7,.5);  }
  .hover-o6-s:hover,
  .h-o6-s:hover  { opacity: var(--opacity-6,.4);  }
  .hover-o5-s:hover,
  .h-o5-s:hover  { opacity: var(--opacity-5,.3);  }
  .hover-o4-s:hover,
  .h-o4-s:hover  { opacity: var(--opacity-4,.2);  }
  .hover-o3-s:hover,
  .h-o3-s:hover  { opacity: var(--opacity-3,.1);  }
  .hover-o2-s:hover,
  .h-o2-s:hover  { opacity: var(--opacity-2,.05); }
  .hover-o1-s:hover,
  .h-o1-s:hover  { opacity: var(--opacity-1,.025);}
  .focus-o12-s:focus,
  .f-o12-s:focus { opacity: var(--opacity-12, 1); }
  .focus-o11-s:focus,
  .f-o11-s:focus { opacity: var(--opacity-11,.9); }
  .focus-o10-s:focus,
  .f-o10-s:focus { opacity: var(--opacity-10,.8); }
  .focus-o9-s:focus,
  .f-o9-s:focus  { opacity: var(--opacity-9,.7);  }
  .focus-o8-s:focus,
  .f-o8-s:focus  { opacity: var(--opacity-8,.6);  }
  .focus-o7-s:focus,
  .f-o7-s:focus  { opacity: var(--opacity-7,.5);  }
  .focus-o6-s:focus,
  .f-o6-s:focus  { opacity: var(--opacity-6,.4);  }
  .focus-o5-s:focus,
  .f-o5-s:focus  { opacity: var(--opacity-5,.3);  }
  .focus-o4-s:focus,
  .f-o4-s:focus  { opacity: var(--opacity-4,.2);  }
  .focus-o3-s:focus,
  .f-o3-s:focus  { opacity: var(--opacity-3,.1);  }
  .focus-o2-s:focus,
  .f-o2-s:focus  { opacity: var(--opacity-2,.05); }
  .focus-o1-s:focus,
  .f-o1-s:focus  { opacity: var(--opacity-1,.025);}
}

@container (min-width:48em) {
  .o12-m  { opacity: var(--opacity-12, 1); }
  .o11-m  { opacity: var(--opacity-11,.9); }
  .o10-m  { opacity: var(--opacity-10,.8); }
  .o9-m   { opacity: var(--opacity-9,.7);  }
  .o8-m   { opacity: var(--opacity-8,.6);  }
  .o7-m   { opacity: var(--opacity-7,.5);  }
  .o6-m   { opacity: var(--opacity-6,.4);  }
  .o5-m   { opacity: var(--opacity-5,.3);  }
  .o4-m   { opacity: var(--opacity-4,.2);  }
  .o3-m   { opacity: var(--opacity-3,.1);  }
  .o2-m   { opacity: var(--opacity-2,.05); }
  .o1-m   { opacity: var(--opacity-1,.025);}
  .hover-o12-m:hover,
  .h-o12-m:hover { opacity: var(--opacity-12, 1); }
  .hover-o11-m:hover,
  .h-o11-m:hover { opacity: var(--opacity-11,.9); }
  .hover-o10-m:hover,
  .h-o10-m:hover { opacity: var(--opacity-10,.8); }
  .hover-o9-m:hover,
  .h-o9-m:hover  { opacity: var(--opacity-9,.7);  }
  .hover-o8-m:hover,
  .h-o8-m:hover  { opacity: var(--opacity-8,.6);  }
  .hover-o7-m:hover,
  .h-o7-m:hover  { opacity: var(--opacity-7,.5);  }
  .hover-o6-m:hover,
  .h-o6-m:hover  { opacity: var(--opacity-6,.4);  }
  .hover-o5-m:hover,
  .h-o5-m:hover  { opacity: var(--opacity-5,.3);  }
  .hover-o4-m:hover,
  .h-o4-m:hover  { opacity: var(--opacity-4,.2);  }
  .hover-o3-m:hover,
  .h-o3-m:hover  { opacity: var(--opacity-3,.1);  }
  .hover-o2-m:hover,
  .h-o2-m:hover  { opacity: var(--opacity-2,.05); }
  .hover-o1-m:hover,
  .h-o1-m:hover  { opacity: var(--opacity-1,.025);}
  .focus-o12-m:focus,
  .f-o12-m:focus { opacity: var(--opacity-12, 1); }
  .focus-o11-m:focus,
  .f-o11-m:focus { opacity: var(--opacity-11,.9); }
  .focus-o10-m:focus,
  .f-o10-m:focus { opacity: var(--opacity-10,.8); }
  .focus-o9-m:focus,
  .f-o9-m:focus  { opacity: var(--opacity-9,.7);  }
  .focus-o8-m:focus,
  .f-o8-m:focus  { opacity: var(--opacity-8,.6);  }
  .focus-o7-m:focus,
  .f-o7-m:focus  { opacity: var(--opacity-7,.5);  }
  .focus-o6-m:focus,
  .f-o6-m:focus  { opacity: var(--opacity-6,.4);  }
  .focus-o5-m:focus,
  .f-o5-m:focus  { opacity: var(--opacity-5,.3);  }
  .focus-o4-m:focus,
  .f-o4-m:focus  { opacity: var(--opacity-4,.2);  }
  .focus-o3-m:focus,
  .f-o3-m:focus  { opacity: var(--opacity-3,.1);  }
  .focus-o2-m:focus,
  .f-o2-m:focus  { opacity: var(--opacity-2,.05); }
  .focus-o1-m:focus,
  .f-o1-m:focus  { opacity: var(--opacity-1,.025);}
}

@container (min-width:64em) {
  .o12-l  { opacity: var(--opacity-12, 1); }
  .o11-l  { opacity: var(--opacity-11,.9); }
  .o10-l  { opacity: var(--opacity-10,.8); }
  .o9-l   { opacity: var(--opacity-9,.7);  }
  .o8-l   { opacity: var(--opacity-8,.6);  }
  .o7-l   { opacity: var(--opacity-7,.5);  }
  .o6-l   { opacity: var(--opacity-6,.4);  }
  .o5-l   { opacity: var(--opacity-5,.3);  }
  .o4-l   { opacity: var(--opacity-4,.2);  }
  .o3-l   { opacity: var(--opacity-3,.1);  }
  .o2-l   { opacity: var(--opacity-2,.05); }
  .o1-l   { opacity: var(--opacity-1,.025);}
  .hover-o12-l:hover,
  .h-o12-l:hover { opacity: var(--opacity-12, 1); }
  .hover-o11-l:hover,
  .h-o11-l:hover { opacity: var(--opacity-11,.9); }
  .hover-o10-l:hover,
  .h-o10-l:hover { opacity: var(--opacity-10,.8); }
  .hover-o9-l:hover,
  .h-o9-l:hover  { opacity: var(--opacity-9,.7);  }
  .hover-o8-l:hover,
  .h-o8-l:hover  { opacity: var(--opacity-8,.6);  }
  .hover-o7-l:hover,
  .h-o7-l:hover  { opacity: var(--opacity-7,.5);  }
  .hover-o6-l:hover,
  .h-o6-l:hover  { opacity: var(--opacity-6,.4);  }
  .hover-o5-l:hover,
  .h-o5-l:hover  { opacity: var(--opacity-5,.3);  }
  .hover-o4-l:hover,
  .h-o4-l:hover  { opacity: var(--opacity-4,.2);  }
  .hover-o3-l:hover,
  .h-o3-l:hover  { opacity: var(--opacity-3,.1);  }
  .hover-o2-l:hover,
  .h-o2-l:hover  { opacity: var(--opacity-2,.05); }
  .hover-o1-l:hover,
  .h-o1-l:hover  { opacity: var(--opacity-1,.025);}
  .focus-o12-l:focus,
  .f-o12-l:focus { opacity: var(--opacity-12, 1); }
  .focus-o11-l:focus,
  .f-o11-l:focus { opacity: var(--opacity-11,.9); }
  .focus-o10-l:focus,
  .f-o10-l:focus { opacity: var(--opacity-10,.8); }
  .focus-o9-l:focus,
  .f-o9-l:focus  { opacity: var(--opacity-9,.7);  }
  .focus-o8-l:focus,
  .f-o8-l:focus  { opacity: var(--opacity-8,.6);  }
  .focus-o7-l:focus,
  .f-o7-l:focus  { opacity: var(--opacity-7,.5);  }
  .focus-o6-l:focus,
  .f-o6-l:focus  { opacity: var(--opacity-6,.4);  }
  .focus-o5-l:focus,
  .f-o5-l:focus  { opacity: var(--opacity-5,.3);  }
  .focus-o4-l:focus,
  .f-o4-l:focus  { opacity: var(--opacity-4,.2);  }
  .focus-o3-l:focus,
  .f-o3-l:focus  { opacity: var(--opacity-3,.1);  }
  .focus-o2-l:focus,
  .f-o2-l:focus  { opacity: var(--opacity-2,.05); }
  .focus-o1-l:focus,
  .f-o1-l:focus  { opacity: var(--opacity-1,.025);}
}
/*

   ROTATIONS

*/

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-135 { transform: rotate(135deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-225 { transform: rotate(225deg); }
.rotate-270 { transform: rotate(270deg); }
.rotate-315 { transform: rotate(315deg); }

@container (min-width:30em){
  .rotate-45-s { transform: rotate(45deg); }
  .rotate-90-s { transform: rotate(90deg); }
  .rotate-135-s { transform: rotate(135deg); }
  .rotate-180-s { transform: rotate(180deg); }
  .rotate-225-s { transform: rotate(225deg); }
  .rotate-270-s { transform: rotate(270deg); }
  .rotate-315-s { transform: rotate(315deg); }
}

@container (min-width:48em){
  .rotate-45-m { transform: rotate(45deg); }
  .rotate-90-m { transform: rotate(90deg); }
  .rotate-135-m { transform: rotate(135deg); }
  .rotate-180-m { transform: rotate(180deg); }
  .rotate-225-m { transform: rotate(225deg); }
  .rotate-270-m { transform: rotate(270deg); }
  .rotate-315-m { transform: rotate(315deg); }
}

@container (min-width:64em){
  .rotate-45-l { transform: rotate(45deg); }
  .rotate-90-l { transform: rotate(90deg); }
  .rotate-135-l { transform: rotate(135deg); }
  .rotate-180-l { transform: rotate(180deg); }
  .rotate-225-l { transform: rotate(225deg); }
  .rotate-270-l { transform: rotate(270deg); }
  .rotate-315-l { transform: rotate(315deg); }
}
/*
   SKINS

   Classes for setting foreground and background colors on elements.
   If you haven't declared a border color, but set border on an element, it will 
   be set to the current text color. 

*/

/* Text colors */

.tint-0 { color: var(--tint-0); }
.tint-1 { color: var(--tint-1); }
.tint-2 { color: var(--tint-2); }
.tint-3 { color: var(--tint-3); }
.tint-4 { color: var(--tint-4); }
.tint-5 { color: var(--tint-5); }
.tint-6 { color: var(--tint-6); }
.tint-7 { color: var(--tint-7); }
.tint-8 { color: var(--tint-8); }
.tint-9 { color: var(--tint-9); }
.tint-10 { color: var(--tint-10); }
.tint-11 { color: var(--tint-11); }
.shadow-0 { color: var(--shadow-0); }
.shadow-1 { color: var(--shadow-1); }
.shadow-2 { color: var(--shadow-2); }
.shadow-3 { color: var(--shadow-3); }
.shadow-4 { color: var(--shadow-4); }
.shadow-5 { color: var(--shadow-5); }
.shadow-6 { color: var(--shadow-6); }
.shadow-7 { color: var(--shadow-7); }
.shadow-8 { color: var(--shadow-8); }
.shadow-9 { color: var(--shadow-9); }
.shadow-10 { color: var(--shadow-10); }
.shadow-11 { color: var(--shadow-11); }
.black,
 .gray-0, .grey-0 { color: var(--gray-0); }
.gray-1, .grey-1 { color: var(--gray-1); }
.gray-2, .grey-2 { color: var(--gray-2); }
.gray-3, .grey-3 { color: var(--gray-3); }
.gray-4, .grey-4 { color: var(--gray-4); }
.gray-5, .grey-5 { color: var(--gray-5); }
.gray-6, .grey-6 { color: var(--gray-6); }
.gray-7, .grey-7 { color: var(--gray-7); }
.gray-8, .grey-8 { color: var(--gray-8); }
.gray-9, .grey-9 { color: var(--gray-9); }
.gray-10, .grey-10 { color: var(--gray-10); }
.white, 
.gray-11, .grey-11 { color: var(--gray-11); }
.slate-gray-0, .slate-grey-0 { color: var(--slate-gray-0); }
.slate-gray-1, .slate-grey-1 { color: var(--slate-gray-1); }
.slate-gray-2, .slate-grey-2 { color: var(--slate-gray-2); }
.slate-gray-3, .slate-grey-3 { color: var(--slate-gray-3); }
.slate-gray-4, .slate-grey-4 { color: var(--slate-gray-4); }
.slate-gray-5, .slate-grey-5 { color: var(--slate-gray-5); }
.slate-gray-6, .slate-grey-6 { color: var(--slate-gray-6); }
.slate-gray-7, .slate-grey-7 { color: var(--slate-gray-7); }
.slate-gray-8, .slate-grey-8 { color: var(--slate-gray-8); }
.slate-gray-9, .slate-grey-9 { color: var(--slate-gray-9); }
.slate-gray-10, .slate-grey-10 { color: var(--slate-gray-10); }
.slate-gray-11, .slate-grey-11 { color: var(--slate-gray-11); }
.blue-0 { color: var(--blue-0); }
.blue-1 { color: var(--blue-1); }
.blue-2 { color: var(--blue-2); }
.blue-3 { color: var(--blue-3); }
.blue-4 { color: var(--blue-4); }
.blue-5 { color: var(--blue-5); }
.blue-6 { color: var(--blue-6); }
.blue-7 { color: var(--blue-7); }
.blue-8 { color: var(--blue-8); }
.blue-9 { color: var(--blue-9); }
.blue-10 { color: var(--blue-10); }
.blue-11 { color: var(--blue-11); }
.indigo-0 { color: var(--indigo-0); }
.indigo-1 { color: var(--indigo-1); }
.indigo-2 { color: var(--indigo-2); }
.indigo-3 { color: var(--indigo-3); }
.indigo-4 { color: var(--indigo-4); }
.indigo-5 { color: var(--indigo-5); }
.indigo-6 { color: var(--indigo-6); }
.indigo-7 { color: var(--indigo-7); }
.indigo-8 { color: var(--indigo-8); }
.indigo-9 { color: var(--indigo-9); }
.indigo-10 { color: var(--indigo-10); }
.indigo-11 { color: var(--indigo-11); }
.violet-0 { color: var(--violet-0); }
.violet-1 { color: var(--violet-1); }
.violet-2 { color: var(--violet-2); }
.violet-3 { color: var(--violet-3); }
.violet-4 { color: var(--violet-4); }
.violet-5 { color: var(--violet-5); }
.violet-6 { color: var(--violet-6); }
.violet-7 { color: var(--violet-7); }
.violet-8 { color: var(--violet-8); }
.violet-9 { color: var(--violet-9); }
.violet-10 { color: var(--violet-10); }
.violet-11 { color: var(--violet-11); }
.magenta-0 { color: var(--magenta-0); }
.magenta-1 { color: var(--magenta-1); }
.magenta-2 { color: var(--magenta-2); }
.magenta-3 { color: var(--magenta-3); }
.magenta-4 { color: var(--magenta-4); }
.magenta-5 { color: var(--magenta-5); }
.magenta-6 { color: var(--magenta-6); }
.magenta-7 { color: var(--magenta-7); }
.magenta-8 { color: var(--magenta-8); }
.magenta-9 { color: var(--magenta-9); }
.magenta-10 { color: var(--magenta-10); }
.magenta-11 { color: var(--magenta-11); }
.red-0 { color: var(--red-0); }
.red-1 { color: var(--red-1); }
.red-2 { color: var(--red-2); }
.red-3 { color: var(--red-3); }
.red-4 { color: var(--red-4); }
.red-5 { color: var(--red-5); }
.red-6 { color: var(--red-6); }
.red-7 { color: var(--red-7); }
.red-8 { color: var(--red-8); }
.red-9 { color: var(--red-9); }
.red-10 { color: var(--red-10); }
.red-11 { color: var(--red-11); }
.red-orange-0 { color: var(--red-orange-0); }
.red-orange-1 { color: var(--red-orange-1); }
.red-orange-2 { color: var(--red-orange-2); }
.red-orange-3 { color: var(--red-orange-3); }
.red-orange-4 { color: var(--red-orange-4); }
.red-orange-5 { color: var(--red-orange-5); }
.red-orange-6 { color: var(--red-orange-6); }
.red-orange-7 { color: var(--red-orange-7); }
.red-orange-8 { color: var(--red-orange-8); }
.red-orange-9 { color: var(--red-orange-9); }
.red-orange-10 { color: var(--red-orange-10); }
.red-orange-11 { color: var(--red-orange-11); }
.orange-0 { color: var(--orange-0); }
.orange-1 { color: var(--orange-1); }
.orange-2 { color: var(--orange-2); }
.orange-3 { color: var(--orange-3); }
.orange-4 { color: var(--orange-4); }
.orange-5 { color: var(--orange-5); }
.orange-6 { color: var(--orange-6); }
.orange-7 { color: var(--orange-7); }
.orange-8 { color: var(--orange-8); }
.orange-9 { color: var(--orange-9); }
.orange-10 { color: var(--orange-10); }
.orange-11 { color: var(--orange-11); }
.gold-0 { color: var(--gold-0); }
.gold-1 { color: var(--gold-1); }
.gold-2 { color: var(--gold-2); }
.gold-3 { color: var(--gold-3); }
.gold-4 { color: var(--gold-4); }
.gold-5 { color: var(--gold-5); }
.gold-6 { color: var(--gold-6); }
.gold-7 { color: var(--gold-7); }
.gold-8 { color: var(--gold-8); }
.gold-9 { color: var(--gold-9); }
.gold-10 { color: var(--gold-10); }
.gold-11 { color: var(--gold-11); }
.yellow-0 { color: var(--yellow-0); }
.yellow-1 { color: var(--yellow-1); }
.yellow-2 { color: var(--yellow-2); }
.yellow-3 { color: var(--yellow-3); }
.yellow-4 { color: var(--yellow-4); }
.yellow-5 { color: var(--yellow-5); }
.yellow-6 { color: var(--yellow-6); }
.yellow-7 { color: var(--yellow-7); }
.yellow-8 { color: var(--yellow-8); }
.yellow-9 { color: var(--yellow-9); }
.yellow-10 { color: var(--yellow-10); }
.yellow-11 { color: var(--yellow-11); }
.green-0 { color: var(--green-0); }
.green-1 { color: var(--green-1); }
.green-2 { color: var(--green-2); }
.green-3 { color: var(--green-3); }
.green-4 { color: var(--green-4); }
.green-5 { color: var(--green-5); }
.green-6 { color: var(--green-6); }
.green-7 { color: var(--green-7); }
.green-8 { color: var(--green-8); }
.green-9 { color: var(--green-9); }
.green-10 { color: var(--green-10); }
.green-11 { color: var(--green-11); }
.teal-0 { color: var(--teal-0); }
.teal-1 { color: var(--teal-1); }
.teal-2 { color: var(--teal-2); }
.teal-3 { color: var(--teal-3); }
.teal-4 { color: var(--teal-4); }
.teal-5 { color: var(--teal-5); }
.teal-6 { color: var(--teal-6); }
.teal-7 { color: var(--teal-7); }
.teal-8 { color: var(--teal-8); }
.teal-9 { color: var(--teal-9); }
.teal-10 { color: var(--teal-10); }
.teal-11 { color: var(--teal-11); }
.cyan-0 { color: var(--cyan-0); }
.cyan-1 { color: var(--cyan-1); }
.cyan-2 { color: var(--cyan-2); }
.cyan-3 { color: var(--cyan-3); }
.cyan-4 { color: var(--cyan-4); }
.cyan-5 { color: var(--cyan-5); }
.cyan-6 { color: var(--cyan-6); }
.cyan-7 { color: var(--cyan-7); }
.cyan-8 { color: var(--cyan-8); }
.cyan-9 { color: var(--cyan-9); }
.cyan-10 { color: var(--cyan-10); }
.cyan-11 { color: var(--cyan-11); }

/* Background colors */

.bg-tint-0 { background-color: var(--tint-0); }
.bg-tint-1 { background-color: var(--tint-1); }
.bg-tint-2 { background-color: var(--tint-2); }
.bg-tint-3 { background-color: var(--tint-3); }
.bg-tint-4 { background-color: var(--tint-4); }
.bg-tint-5 { background-color: var(--tint-5); }
.bg-tint-6 { background-color: var(--tint-6); }
.bg-tint-7 { background-color: var(--tint-7); }
.bg-tint-8 { background-color: var(--tint-8); }
.bg-tint-9 { background-color: var(--tint-9); }
.bg-tint-10 { background-color: var(--tint-10); }
.bg-tint-11 { background-color: var(--tint-11); }
.bg-shadow-0 { background-color: var(--shadow-0); }
.bg-shadow-1 { background-color: var(--shadow-1); }
.bg-shadow-2 { background-color: var(--shadow-2); }
.bg-shadow-3 { background-color: var(--shadow-3); }
.bg-shadow-4 { background-color: var(--shadow-4); }
.bg-shadow-5 { background-color: var(--shadow-5); }
.bg-shadow-6 { background-color: var(--shadow-6); }
.bg-shadow-7 { background-color: var(--shadow-7); }
.bg-shadow-8 { background-color: var(--shadow-8); }
.bg-shadow-9 { background-color: var(--shadow-9); }
.bg-shadow-10 { background-color: var(--shadow-10); }
.bg-shadow-11 { background-color: var(--shadow-11); }
.bg-black,
.bg-gray-0,.bg-grey-0 { background-color: var(--gray-0); }
.bg-gray-1,.bg-grey-1 { background-color: var(--gray-1); }
.bg-gray-2,.bg-grey-2 { background-color: var(--gray-2); }
.bg-gray-3,.bg-grey-3 { background-color: var(--gray-3); }
.bg-gray-4,.bg-grey-4 { background-color: var(--gray-4); }
.bg-gray-5,.bg-grey-5 { background-color: var(--gray-5); }
.bg-gray-6,.bg-grey-6 { background-color: var(--gray-6); }
.bg-gray-7,.bg-grey-7 { background-color: var(--gray-7); }
.bg-gray-8,.bg-grey-8 { background-color: var(--gray-8); }
.bg-gray-9,.bg-grey-9 { background-color: var(--gray-9); }
.bg-gray-10,.bg-grey-10 { background-color: var(--gray-10); }
.bg-white,
.bg-gray-11,.bg-grey-11 { background-color: var(--gray-11); }
.bg-slate-gray-0, .bg-slate-grey-0 { background-color: var(--slate-gray-0); }
.bg-slate-gray-1, .bg-slate-grey-1 { background-color: var(--slate-gray-1); }
.bg-slate-gray-2, .bg-slate-grey-2 { background-color: var(--slate-gray-2); }
.bg-slate-gray-3, .bg-slate-grey-3 { background-color: var(--slate-gray-3); }
.bg-slate-gray-4, .bg-slate-grey-4 { background-color: var(--slate-gray-4); }
.bg-slate-gray-5, .bg-slate-grey-5 { background-color: var(--slate-gray-5); }
.bg-slate-gray-6, .bg-slate-grey-6 { background-color: var(--slate-gray-6); }
.bg-slate-gray-7, .bg-slate-grey-7 { background-color: var(--slate-gray-7); }
.bg-slate-gray-8, .bg-slate-grey-8 { background-color: var(--slate-gray-8); }
.bg-slate-gray-9, .bg-slate-grey-9 { background-color: var(--slate-gray-9); }
.bg-slate-gray-10, .bg-slate-grey-10 { background-color: var(--slate-gray-10); }
.bg-slate-gray-11, .bg-slate-grey-11 { background-color: var(--slate-gray-11); }
.bg-blue-0 { background-color: var(--blue-0); }
.bg-blue-1 { background-color: var(--blue-1); }
.bg-blue-2 { background-color: var(--blue-2); }
.bg-blue-3 { background-color: var(--blue-3); }
.bg-blue-4 { background-color: var(--blue-4); }
.bg-blue-5 { background-color: var(--blue-5); }
.bg-blue-6 { background-color: var(--blue-6); }
.bg-blue-7 { background-color: var(--blue-7); }
.bg-blue-8 { background-color: var(--blue-8); }
.bg-blue-9 { background-color: var(--blue-9); }
.bg-blue-10 { background-color: var(--blue-10); }
.bg-blue-11 { background-color: var(--blue-11); }
.bg-indigo-0 { background-color: var(--indigo-0); }
.bg-indigo-1 { background-color: var(--indigo-1); }
.bg-indigo-2 { background-color: var(--indigo-2); }
.bg-indigo-3 { background-color: var(--indigo-3); }
.bg-indigo-4 { background-color: var(--indigo-4); }
.bg-indigo-5 { background-color: var(--indigo-5); }
.bg-indigo-6 { background-color: var(--indigo-6); }
.bg-indigo-7 { background-color: var(--indigo-7); }
.bg-indigo-8 { background-color: var(--indigo-8); }
.bg-indigo-9 { background-color: var(--indigo-9); }
.bg-indigo-10 { background-color: var(--indigo-10); }
.bg-indigo-11 { background-color: var(--indigo-11); }
.bg-violet-0 { background-color: var(--violet-0); }
.bg-violet-1 { background-color: var(--violet-1); }
.bg-violet-2 { background-color: var(--violet-2); }
.bg-violet-3 { background-color: var(--violet-3); }
.bg-violet-4 { background-color: var(--violet-4); }
.bg-violet-5 { background-color: var(--violet-5); }
.bg-violet-6 { background-color: var(--violet-6); }
.bg-violet-7 { background-color: var(--violet-7); }
.bg-violet-8 { background-color: var(--violet-8); }
.bg-violet-9 { background-color: var(--violet-9); }
.bg-violet-10 { background-color: var(--violet-10); }
.bg-violet-11 { background-color: var(--violet-11); }
.bg-magenta-0 { background-color: var(--magenta-0); }
.bg-magenta-1 { background-color: var(--magenta-1); }
.bg-magenta-2 { background-color: var(--magenta-2); }
.bg-magenta-3 { background-color: var(--magenta-3); }
.bg-magenta-4 { background-color: var(--magenta-4); }
.bg-magenta-5 { background-color: var(--magenta-5); }
.bg-magenta-6 { background-color: var(--magenta-6); }
.bg-magenta-7 { background-color: var(--magenta-7); }
.bg-magenta-8 { background-color: var(--magenta-8); }
.bg-magenta-9 { background-color: var(--magenta-9); }
.bg-magenta-10 { background-color: var(--magenta-10); }
.bg-magenta-11 { background-color: var(--magenta-11); }
.bg-red-0 { background-color: var(--red-0); }
.bg-red-1 { background-color: var(--red-1); }
.bg-red-2 { background-color: var(--red-2); }
.bg-red-3 { background-color: var(--red-3); }
.bg-red-4 { background-color: var(--red-4); }
.bg-red-5 { background-color: var(--red-5); }
.bg-red-6 { background-color: var(--red-6); }
.bg-red-7 { background-color: var(--red-7); }
.bg-red-8 { background-color: var(--red-8); }
.bg-red-9 { background-color: var(--red-9); }
.bg-red-10 { background-color: var(--red-10); }
.bg-red-11 { background-color: var(--red-11); }
.bg-red-orange-0 { background-color: var(--red-orange-0); }
.bg-red-orange-1 { background-color: var(--red-orange-1); }
.bg-red-orange-2 { background-color: var(--red-orange-2); }
.bg-red-orange-3 { background-color: var(--red-orange-3); }
.bg-red-orange-4 { background-color: var(--red-orange-4); }
.bg-red-orange-5 { background-color: var(--red-orange-5); }
.bg-red-orange-6 { background-color: var(--red-orange-6); }
.bg-red-orange-7 { background-color: var(--red-orange-7); }
.bg-red-orange-8 { background-color: var(--red-orange-8); }
.bg-red-orange-9 { background-color: var(--red-orange-9); }
.bg-red-orange-10 { background-color: var(--red-orange-10); }
.bg-red-orange-11 { background-color: var(--red-orange-11); }
.bg-orange-0 { background-color: var(--orange-0); }
.bg-orange-1 { background-color: var(--orange-1); }
.bg-orange-2 { background-color: var(--orange-2); }
.bg-orange-3 { background-color: var(--orange-3); }
.bg-orange-4 { background-color: var(--orange-4); }
.bg-orange-5 { background-color: var(--orange-5); }
.bg-orange-6 { background-color: var(--orange-6); }
.bg-orange-7 { background-color: var(--orange-7); }
.bg-orange-8 { background-color: var(--orange-8); }
.bg-orange-9 { background-color: var(--orange-9); }
.bg-orange-10 { background-color: var(--orange-10); }
.bg-orange-11 { background-color: var(--orange-11); }
.bg-gold-0 { background-color: var(--gold-0); }
.bg-gold-1 { background-color: var(--gold-1); }
.bg-gold-2 { background-color: var(--gold-2); }
.bg-gold-3 { background-color: var(--gold-3); }
.bg-gold-4 { background-color: var(--gold-4); }
.bg-gold-5 { background-color: var(--gold-5); }
.bg-gold-6 { background-color: var(--gold-6); }
.bg-gold-7 { background-color: var(--gold-7); }
.bg-gold-8 { background-color: var(--gold-8); }
.bg-gold-9 { background-color: var(--gold-9); }
.bg-gold-10 { background-color: var(--gold-10); }
.bg-gold-11 { background-color: var(--gold-11); }
.bg-yellow-0 { background-color: var(--yellow-0); }
.bg-yellow-1 { background-color: var(--yellow-1); }
.bg-yellow-2 { background-color: var(--yellow-2); }
.bg-yellow-3 { background-color: var(--yellow-3); }
.bg-yellow-4 { background-color: var(--yellow-4); }
.bg-yellow-5 { background-color: var(--yellow-5); }
.bg-yellow-6 { background-color: var(--yellow-6); }
.bg-yellow-7 { background-color: var(--yellow-7); }
.bg-yellow-8 { background-color: var(--yellow-8); }
.bg-yellow-9 { background-color: var(--yellow-9); }
.bg-yellow-10 { background-color: var(--yellow-10); }
.bg-yellow-11 { background-color: var(--yellow-11); }
.bg-green-0 { background-color: var(--green-0); }
.bg-green-1 { background-color: var(--green-1); }
.bg-green-2 { background-color: var(--green-2); }
.bg-green-3 { background-color: var(--green-3); }
.bg-green-4 { background-color: var(--green-4); }
.bg-green-5 { background-color: var(--green-5); }
.bg-green-6 { background-color: var(--green-6); }
.bg-green-7 { background-color: var(--green-7); }
.bg-green-8 { background-color: var(--green-8); }
.bg-green-9 { background-color: var(--green-9); }
.bg-green-10 { background-color: var(--green-10); }
.bg-green-11 { background-color: var(--green-11); }
.bg-teal-0 { background-color: var(--teal-0); }
.bg-teal-1 { background-color: var(--teal-1); }
.bg-teal-2 { background-color: var(--teal-2); }
.bg-teal-3 { background-color: var(--teal-3); }
.bg-teal-4 { background-color: var(--teal-4); }
.bg-teal-5 { background-color: var(--teal-5); }
.bg-teal-6 { background-color: var(--teal-6); }
.bg-teal-7 { background-color: var(--teal-7); }
.bg-teal-8 { background-color: var(--teal-8); }
.bg-teal-9 { background-color: var(--teal-9); }
.bg-teal-10 { background-color: var(--teal-10); }
.bg-teal-11 { background-color: var(--teal-11); }
.bg-cyan-0 { background-color: var(--cyan-0); }
.bg-cyan-1 { background-color: var(--cyan-1); }
.bg-cyan-2 { background-color: var(--cyan-2); }
.bg-cyan-3 { background-color: var(--cyan-3); }
.bg-cyan-4 { background-color: var(--cyan-4); }
.bg-cyan-5 { background-color: var(--cyan-5); }
.bg-cyan-6 { background-color: var(--cyan-6); }
.bg-cyan-7 { background-color: var(--cyan-7); }
.bg-cyan-8 { background-color: var(--cyan-8); }
.bg-cyan-9 { background-color: var(--cyan-9); }
.bg-cyan-10 { background-color: var(--cyan-10); }
.bg-cyan-11 { background-color: var(--cyan-11); }

.dark {
  background-color: var(--bg-dark, black);
  color: var(--color-dark, white);
}

.light {
  background-color: var(--bg-light, white);
  color: var(--color-light, black);
}

.blue {
  background-color: var(--blue-5);
  color: var(--gray-11);
}

.blue-dark {
  background-color: var(--blue-3);
  color: var(--blue-9);
}

.blue-light {
  color: var(--blue-3);
  background-color: var(--blue-10);
}

.indigo {
  background-color: var(--indigo-5);
  color: var(--gray-11);
}

.indigo-dark {
  background-color: var(--indigo-3);
  color: var(--indigo-9);
}

.indigo-light {
  color: var(--indigo-3);
  background-color: var(--indigo-10);
}

.violet {
  background-color: var(--violet-5);
  color: var(--gray-11);
}

.violet-dark {
  background-color: var(--violet-3);
  color: var(--violet-9);
}

.violet-light {
  color: var(--violet-3);
  background-color: var(--violet-10);
}

.magenta {
  background-color: var(--magenta-5);
  color: var(--gray-11);
}

.magenta-dark {
  background-color: var(--magenta-3);
  color: var(--magenta-9);
}

.magenta-light {
  color: var(--magenta-3);
  background-color: var(--magenta-10);
}

.red {
  background-color: var(--red-5);
  color: var(--gray-11);
}

.red-dark {
  background-color: var(--red-3);
  color: var(--red-9);
}

.red-light {
  color: var(--red-3);
  background-color: var(--red-10);
}

.red-orange {
  background-color: var(--red-orange-5);
  color: var(--gray-11);
}

.red-orange-dark {
  background-color: var(--red-orange-3);
  color: var(--red-orange-9);
}

.red-orange-light {
  color: var(--red-orange-3);
  background-color: var(--red-orange-10);
}

.orange {
  background-color: var(--orange-5);
  color: var(--gray-11);
}

.orange-dark {
  background-color: var(--orange-3);
  color: var(--orange-9);
}

.orange-light {
  color: var(--orange-3);
  background-color: var(--orange-10);
}

.gold {
  background-color: var(--gold-5);
  color: var(--gray-11);
}

.gold-dark {
  background-color: var(--gold-3);
  color: var(--gold-9);
}

.gold-light {
  color: var(--gold-3);
  background-color: var(--gold-10);
}

.yellow {
  background-color: var(--yellow-5);
  color: var(--gray-11);
}

.yellow-dark {
  background-color: var(--yellow-3);
  color: var(--yellow-9);
}

.yellow-light {
  color: var(--yellow-3);
  background-color: var(--yellow-10);
}

.green {
  background-color: var(--green-5);
  color: var(--gray-11);
}

.green-dark {
  background-color: var(--green-3);
  color: var(--green-9);
}

.green-light {
  color: var(--green-3);
  background-color: var(--green-10);
}

.teal {
  background-color: var(--teal-5);
  color: var(--gray-11);
}

.teal-dark {
  background-color: var(--teal-3);
  color: var(--teal-9);
}

.teal-light {
  color: var(--teal-3);
  background-color: var(--teal-10);
}

.cyan {
  background-color: var(--cyan-5);
  color: var(--gray-11);
}

.cyan-dark {
  background-color: var(--cyan-3);
  color: var(--cyan-9);
}

.cyan-light {
  color: var(--cyan-3);
  background-color: var(--cyan-10);
}
/* 
  
   SKINS:PSEUDO

   Customize the color of an element when
   it is focused or hovered over. This is a larger file. Feel
   free to remove and edit colors that aren't needed.
 
 */

.hover-tint-0:hover,
.hover-overlay-tint-0:hover { color: var(--tint-0); }
.hover-tint-1:hover,
.hover-overlay-tint-1:hover { color: var(--tint-1); }
.hover-tint-2:hover,
.hover-overlay-tint-2:hover { color: var(--tint-2); }
.hover-tint-3:hover,
.hover-overlay-tint-3:hover { color: var(--tint-3); }
.hover-tint-4:hover,
.hover-overlay-tint-4:hover { color: var(--tint-4); }
.hover-tint-5:hover,
.hover-overlay-tint-5:hover { color: var(--tint-5); }
.hover-tint-6:hover,
.hover-overlay-tint-6:hover { color: var(--tint-6); }
.hover-tint-7:hover,
.hover-overlay-tint-7:hover { color: var(--tint-7); }
.hover-tint-8:hover,
.hover-overlay-tint-8:hover { color: var(--tint-8); }
.hover-tint-9:hover,
.hover-overlay-tint-9:hover { color: var(--tint-9); }
.hover-tint-10:hover,
.hover-overlay-tint-10:hover { color: var(--tint-10); }
.hover-tint-11:hover,
.hover-overlay-tint-11:hover { color: var(--tint-11); }
.hover-shadow-0:hover,
.hover-overlay-shadow-0:hover { color: var(--shadow-0); }
.hover-shadow-1:hover,
.hover-overlay-shadow-1:hover { color: var(--shadow-1); }
.hover-shadow-2:hover,
.hover-overlay-shadow-2:hover { color: var(--shadow-2); }
.hover-shadow-3:hover,
.hover-overlay-shadow-3:hover { color: var(--shadow-3); }
.hover-shadow-4:hover,
.hover-overlay-shadow-4:hover { color: var(--shadow-4); }
.hover-shadow-5:hover,
.hover-overlay-shadow-5:hover { color: var(--shadow-5); }
.hover-shadow-6:hover,
.hover-overlay-shadow-6:hover { color: var(--shadow-6); }
.hover-shadow-7:hover,
.hover-overlay-shadow-7:hover { color: var(--shadow-7); }
.hover-shadow-8:hover,
.hover-overlay-shadow-8:hover { color: var(--shadow-8); }
.hover-shadow-9:hover,
.hover-overlay-shadow-9:hover { color: var(--shadow-9); }
.hover-shadow-10:hover,
.hover-overlay-shadow-10:hover { color: var(--shadow-10); }
.hover-shadow-11:hover,
.hover-overlay-shadow-11:hover { color: var(--shadow-11); }
.hover-gray-0:hover, .hover-grey-0:hover { color: var( --gray-0); }
.hover-gray-1:hover, .hover-grey-1:hover { color: var( --gray-1); }
.hover-gray-2:hover, .hover-grey-2:hover { color: var( --gray-2); }
.hover-gray-3:hover, .hover-grey-3:hover { color: var( --gray-3); }
.hover-gray-4:hover, .hover-grey-4:hover { color: var( --gray-4); }
.hover-gray-5:hover, .hover-grey-5:hover { color: var( --gray-5); }
.hover-gray-6:hover, .hover-grey-6:hover { color: var( --gray-6); }
.hover-gray-7:hover, .hover-grey-7:hover { color: var( --gray-7); }
.hover-gray-8:hover, .hover-grey-8:hover { color: var( --gray-8); }
.hover-gray-9:hover, .hover-grey-9:hover { color: var( --gray-9); }
.hover-gray-10:hover, .hover-grey-10:hover { color: var( --gray-10); }
.hover-gray-11:hover, .hover-grey-11:hover { color: var( --gray-11); }
.hover-slate-gray-0:hover, .hover-slate-grey-0:hover { color: var( --slate-gray-0); }
.hover-slate-gray-1:hover, .hover-slate-grey-1:hover { color: var( --slate-gray-1); }
.hover-slate-gray-2:hover, .hover-slate-grey-2:hover { color: var( --slate-gray-2); }
.hover-slate-gray-3:hover, .hover-slate-grey-3:hover { color: var( --slate-gray-3); }
.hover-slate-gray-4:hover, .hover-slate-grey-4:hover { color: var( --slate-gray-4); }
.hover-slate-gray-5:hover, .hover-slate-grey-5:hover { color: var( --slate-gray-5); }
.hover-slate-gray-6:hover, .hover-slate-grey-6:hover { color: var( --slate-gray-6); }
.hover-slate-gray-7:hover, .hover-slate-grey-7:hover { color: var( --slate-gray-7); }
.hover-slate-gray-8:hover, .hover-slate-grey-8:hover { color: var( --slate-gray-8); }
.hover-slate-gray-9:hover, .hover-slate-grey-9:hover { color: var( --slate-gray-9); }
.hover-slate-gray-10:hover, .hover-slate-grey-10:hover { color: var( --slate-gray-10); }
.hover-slate-gray-11:hover, .hover-slate-grey-11:hover { color: var( --slate-gray-11); }
.hover-blue-0:hover { color: var( --blue-0); }
.hover-blue-1:hover { color: var( --blue-1); }
.hover-blue-2:hover { color: var( --blue-2); }
.hover-blue-3:hover { color: var( --blue-3); }
.hover-blue-4:hover { color: var( --blue-4); }
.hover-blue-5:hover { color: var( --blue-5); }
.hover-blue-6:hover { color: var( --blue-6); }
.hover-blue-7:hover { color: var( --blue-7); }
.hover-blue-8:hover { color: var( --blue-8); }
.hover-blue-9:hover { color: var( --blue-9); }
.hover-blue-10:hover { color: var( --blue-10); }
.hover-blue-11:hover { color: var( --blue-11); }
.hover-indigo-0:hover { color: var( --indigo-0); }
.hover-indigo-1:hover { color: var( --indigo-1); }
.hover-indigo-2:hover { color: var( --indigo-2); }
.hover-indigo-3:hover { color: var( --indigo-3); }
.hover-indigo-4:hover { color: var( --indigo-4); }
.hover-indigo-5:hover { color: var( --indigo-5); }
.hover-indigo-6:hover { color: var( --indigo-6); }
.hover-indigo-7:hover { color: var( --indigo-7); }
.hover-indigo-8:hover { color: var( --indigo-8); }
.hover-indigo-9:hover { color: var( --indigo-9); }
.hover-indigo-10:hover { color: var( --indigo-10); }
.hover-indigo-11:hover { color: var( --indigo-11); }
.hover-violet-0:hover { color: var( --violet-0); }
.hover-violet-1:hover { color: var( --violet-1); }
.hover-violet-2:hover { color: var( --violet-2); }
.hover-violet-3:hover { color: var( --violet-3); }
.hover-violet-4:hover { color: var( --violet-4); }
.hover-violet-5:hover { color: var( --violet-5); }
.hover-violet-6:hover { color: var( --violet-6); }
.hover-violet-7:hover { color: var( --violet-7); }
.hover-violet-8:hover { color: var( --violet-8); }
.hover-violet-9:hover { color: var( --violet-9); }
.hover-violet-10:hover { color: var( --violet-10); }
.hover-violet-11:hover { color: var( --violet-11); }
.hover-magenta-0:hover { color: var( --magenta-0); }
.hover-magenta-1:hover { color: var( --magenta-1); }
.hover-magenta-2:hover { color: var( --magenta-2); }
.hover-magenta-3:hover { color: var( --magenta-3); }
.hover-magenta-4:hover { color: var( --magenta-4); }
.hover-magenta-5:hover { color: var( --magenta-5); }
.hover-magenta-6:hover { color: var( --magenta-6); }
.hover-magenta-7:hover { color: var( --magenta-7); }
.hover-magenta-8:hover { color: var( --magenta-8); }
.hover-magenta-9:hover { color: var( --magenta-9); }
.hover-magenta-10:hover { color: var( --magenta-10); }
.hover-magenta-11:hover { color: var( --magenta-11); }
.hover-red-0:hover { color: var( --red-0); }
.hover-red-1:hover { color: var( --red-1); }
.hover-red-2:hover { color: var( --red-2); }
.hover-red-3:hover { color: var( --red-3); }
.hover-red-4:hover { color: var( --red-4); }
.hover-red-5:hover { color: var( --red-5); }
.hover-red-6:hover { color: var( --red-6); }
.hover-red-7:hover { color: var( --red-7); }
.hover-red-8:hover { color: var( --red-8); }
.hover-red-9:hover { color: var( --red-9); }
.hover-red-10:hover { color: var( --red-10); }
.hover-red-11:hover { color: var( --red-11); }
.hover-red-orange-0:hover { color: var( --red-orange-0); }
.hover-red-orange-1:hover { color: var( --red-orange-1); }
.hover-red-orange-2:hover { color: var( --red-orange-2); }
.hover-red-orange-3:hover { color: var( --red-orange-3); }
.hover-red-orange-4:hover { color: var( --red-orange-4); }
.hover-red-orange-5:hover { color: var( --red-orange-5); }
.hover-red-orange-6:hover { color: var( --red-orange-6); }
.hover-red-orange-7:hover { color: var( --red-orange-7); }
.hover-red-orange-8:hover { color: var( --red-orange-8); }
.hover-red-orange-9:hover { color: var( --red-orange-9); }
.hover-red-orange-10:hover { color: var( --red-orange-10); }
.hover-red-orange-11:hover { color: var( --red-orange-11); }
.hover-orange-0:hover { color: var( --orange-0); }
.hover-orange-1:hover { color: var( --orange-1); }
.hover-orange-2:hover { color: var( --orange-2); }
.hover-orange-3:hover { color: var( --orange-3); }
.hover-orange-4:hover { color: var( --orange-4); }
.hover-orange-5:hover { color: var( --orange-5); }
.hover-orange-6:hover { color: var( --orange-6); }
.hover-orange-7:hover { color: var( --orange-7); }
.hover-orange-8:hover { color: var( --orange-8); }
.hover-orange-9:hover { color: var( --orange-9); }
.hover-orange-10:hover { color: var( --orange-10); }
.hover-orange-11:hover { color: var( --orange-11); }
.hover-gold-0:hover { color: var( --gold-0); }
.hover-gold-1:hover { color: var( --gold-1); }
.hover-gold-2:hover { color: var( --gold-2); }
.hover-gold-3:hover { color: var( --gold-3); }
.hover-gold-4:hover { color: var( --gold-4); }
.hover-gold-5:hover { color: var( --gold-5); }
.hover-gold-6:hover { color: var( --gold-6); }
.hover-gold-7:hover { color: var( --gold-7); }
.hover-gold-8:hover { color: var( --gold-8); }
.hover-gold-9:hover { color: var( --gold-9); }
.hover-gold-10:hover { color: var( --gold-10); }
.hover-gold-11:hover { color: var( --gold-11); }
.hover-yellow-0:hover { color: var( --yellow-0); }
.hover-yellow-1:hover { color: var( --yellow-1); }
.hover-yellow-2:hover { color: var( --yellow-2); }
.hover-yellow-3:hover { color: var( --yellow-3); }
.hover-yellow-4:hover { color: var( --yellow-4); }
.hover-yellow-5:hover { color: var( --yellow-5); }
.hover-yellow-6:hover { color: var( --yellow-6); }
.hover-yellow-7:hover { color: var( --yellow-7); }
.hover-yellow-8:hover { color: var( --yellow-8); }
.hover-yellow-9:hover { color: var( --yellow-9); }
.hover-yellow-10:hover { color: var( --yellow-10); }
.hover-yellow-11:hover { color: var( --yellow-11); }
.hover-green-0:hover { color: var( --green-0); }
.hover-green-1:hover { color: var( --green-1); }
.hover-green-2:hover { color: var( --green-2); }
.hover-green-3:hover { color: var( --green-3); }
.hover-green-4:hover { color: var( --green-4); }
.hover-green-5:hover { color: var( --green-5); }
.hover-green-6:hover { color: var( --green-6); }
.hover-green-7:hover { color: var( --green-7); }
.hover-green-8:hover { color: var( --green-8); }
.hover-green-9:hover { color: var( --green-9); }
.hover-green-10:hover { color: var( --green-10); }
.hover-green-11:hover { color: var( --green-11); }
.hover-teal-0:hover { color: var( --teal-0); }
.hover-teal-1:hover { color: var( --teal-1); }
.hover-teal-2:hover { color: var( --teal-2); }
.hover-teal-3:hover { color: var( --teal-3); }
.hover-teal-4:hover { color: var( --teal-4); }
.hover-teal-5:hover { color: var( --teal-5); }
.hover-teal-6:hover { color: var( --teal-6); }
.hover-teal-7:hover { color: var( --teal-7); }
.hover-teal-8:hover { color: var( --teal-8); }
.hover-teal-9:hover { color: var( --teal-9); }
.hover-teal-10:hover { color: var( --teal-10); }
.hover-teal-11:hover { color: var( --teal-11); }
.hover-cyan-0:hover { color: var( --cyan-0); }
.hover-cyan-1:hover { color: var( --cyan-1); }
.hover-cyan-2:hover { color: var( --cyan-2); }
.hover-cyan-3:hover { color: var( --cyan-3); }
.hover-cyan-4:hover { color: var( --cyan-4); }
.hover-cyan-5:hover { color: var( --cyan-5); }
.hover-cyan-6:hover { color: var( --cyan-6); }
.hover-cyan-7:hover { color: var( --cyan-7); }
.hover-cyan-8:hover { color: var( --cyan-8); }
.hover-cyan-9:hover { color: var( --cyan-9); }
.hover-cyan-10:hover { color: var( --cyan-10); }
.hover-cyan-11:hover { color: var( --cyan-11); }

/* Background colors */

.hover-bg-tint-0:hover,
.hover-bg-overlay-tint-0:hover { background-color: var(--tint-0); }
.hover-bg-tint-1:hover,
.hover-bg-overlay-tint-1:hover { background-color: var(--tint-1); }
.hover-bg-tint-2:hover,
.hover-bg-overlay-tint-2:hover { background-color: var(--tint-2); }
.hover-bg-tint-3:hover,
.hover-bg-overlay-tint-3:hover { background-color: var(--tint-3); }
.hover-bg-tint-4:hover,
.hover-bg-overlay-tint-4:hover { background-color: var(--tint-4); }
.hover-bg-tint-5:hover,
.hover-bg-overlay-tint-5:hover { background-color: var(--tint-5); }
.hover-bg-tint-6:hover,
.hover-bg-overlay-tint-6:hover { background-color: var(--tint-6); }
.hover-bg-tint-7:hover,
.hover-bg-overlay-tint-7:hover { background-color: var(--tint-7); }
.hover-bg-tint-8:hover,
.hover-bg-overlay-tint-8:hover { background-color: var(--tint-8); }
.hover-bg-tint-9:hover,
.hover-bg-overlay-tint-9:hover { background-color: var(--tint-9); }
.hover-bg-tint-10:hover,
.hover-bg-overlay-tint-10:hover { background-color: var(--tint-10); }
.hover-bg-tint-11:hover,
.hover-bg-overlay-tint-11:hover { background-color: var(--tint-11); }
.hover-bg-shadow-0:hover,
.hover-bg-overlay-shadow-0:hover { background-color: var(--shadow-0); }
.hover-bg-shadow-1:hover,
.hover-bg-overlay-shadow-1:hover { background-color: var(--shadow-1); }
.hover-bg-shadow-2:hover,
.hover-bg-overlay-shadow-2:hover { background-color: var(--shadow-2); }
.hover-bg-shadow-3:hover,
.hover-bg-overlay-shadow-3:hover { background-color: var(--shadow-3); }
.hover-bg-shadow-4:hover,
.hover-bg-overlay-shadow-4:hover { background-color: var(--shadow-4); }
.hover-bg-shadow-5:hover,
.hover-bg-overlay-shadow-5:hover { background-color: var(--shadow-5); }
.hover-bg-shadow-6:hover,
.hover-bg-overlay-shadow-6:hover { background-color: var(--shadow-6); }
.hover-bg-shadow-7:hover,
.hover-bg-overlay-shadow-7:hover { background-color: var(--shadow-7); }
.hover-bg-shadow-8:hover,
.hover-bg-overlay-shadow-8:hover { background-color: var(--shadow-8); }
.hover-bg-shadow-9:hover,
.hover-bg-overlay-shadow-9:hover { background-color: var(--shadow-9); }
.hover-bg-shadow-10:hover,
.hover-bg-overlay-shadow-10:hover { background-color: var(--shadow-10); }
.hover-bg-shadow-11:hover,
.hover-bg-overlay-shadow-11:hover { background-color: var(--shadow-11); }
.hover-bg-gray-0:hover, .hover-bg-grey-0:hover { background-color: var(--gray-0); }
.hover-bg-gray-1:hover, .hover-bg-grey-1:hover { background-color: var(--gray-1); }
.hover-bg-gray-2:hover, .hover-bg-grey-2:hover { background-color: var(--gray-2); }
.hover-bg-gray-3:hover, .hover-bg-grey-3:hover { background-color: var(--gray-3); }
.hover-bg-gray-4:hover, .hover-bg-grey-4:hover { background-color: var(--gray-4); }
.hover-bg-gray-5:hover, .hover-bg-grey-5:hover { background-color: var(--gray-5); }
.hover-bg-gray-6:hover, .hover-bg-grey-6:hover { background-color: var(--gray-6); }
.hover-bg-gray-7:hover, .hover-bg-grey-7:hover { background-color: var(--gray-7); }
.hover-bg-gray-8:hover, .hover-bg-grey-8:hover { background-color: var(--gray-8); }
.hover-bg-gray-9:hover, .hover-bg-grey-9:hover { background-color: var(--gray-9); }
.hover-bg-gray-10:hover, .hover-bg-grey-10:hover { background-color: var(--gray-10); }
.hover-bg-gray-11:hover, .hover-bg-grey-11:hover { background-color: var(--gray-11); }
.hover-bg-slate-gray-0:hover, .hover-bg-slate-grey-0:hover { background-color: var(--slate-gray-0); }
.hover-bg-slate-gray-1:hover, .hover-bg-slate-grey-1:hover { background-color: var(--slate-gray-1); }
.hover-bg-slate-gray-2:hover, .hover-bg-slate-grey-2:hover { background-color: var(--slate-gray-2); }
.hover-bg-slate-gray-3:hover, .hover-bg-slate-grey-3:hover { background-color: var(--slate-gray-3); }
.hover-bg-slate-gray-4:hover, .hover-bg-slate-grey-4:hover { background-color: var(--slate-gray-4); }
.hover-bg-slate-gray-5:hover, .hover-bg-slate-grey-5:hover { background-color: var(--slate-gray-5); }
.hover-bg-slate-gray-6:hover, .hover-bg-slate-grey-6:hover { background-color: var(--slate-gray-6); }
.hover-bg-slate-gray-7:hover, .hover-bg-slate-grey-7:hover { background-color: var(--slate-gray-7); }
.hover-bg-slate-gray-8:hover, .hover-bg-slate-grey-8:hover { background-color: var(--slate-gray-8); }
.hover-bg-slate-gray-9:hover, .hover-bg-slate-grey-9:hover { background-color: var(--slate-gray-9); }
.hover-bg-slate-gray-10:hover, .hover-bg-slate-grey-10:hover { background-color: var(--slate-gray-10); }
.hover-bg-slate-gray-11:hover, .hover-bg-slate-grey-11:hover { background-color: var(--slate-gray-11); }
.hover-bg-blue-0:hover { background-color: var( --blue-0); }
.hover-bg-blue-1:hover { background-color: var( --blue-1); }
.hover-bg-blue-2:hover { background-color: var( --blue-2); }
.hover-bg-blue-3:hover { background-color: var( --blue-3); }
.hover-bg-blue-4:hover { background-color: var( --blue-4); }
.hover-bg-blue-5:hover { background-color: var( --blue-5); }
.hover-bg-blue-6:hover { background-color: var( --blue-6); }
.hover-bg-blue-7:hover { background-color: var( --blue-7); }
.hover-bg-blue-8:hover { background-color: var( --blue-8); }
.hover-bg-blue-9:hover { background-color: var( --blue-9); }
.hover-bg-blue-10:hover { background-color: var( --blue-10); }
.hover-bg-blue-11:hover { background-color: var( --blue-11); }
.hover-bg-indigo-0:hover { background-color: var( --indigo-0); }
.hover-bg-indigo-1:hover { background-color: var( --indigo-1); }
.hover-bg-indigo-2:hover { background-color: var( --indigo-2); }
.hover-bg-indigo-3:hover { background-color: var( --indigo-3); }
.hover-bg-indigo-4:hover { background-color: var( --indigo-4); }
.hover-bg-indigo-5:hover { background-color: var( --indigo-5); }
.hover-bg-indigo-6:hover { background-color: var( --indigo-6); }
.hover-bg-indigo-7:hover { background-color: var( --indigo-7); }
.hover-bg-indigo-8:hover { background-color: var( --indigo-8); }
.hover-bg-indigo-9:hover { background-color: var( --indigo-9); }
.hover-bg-indigo-10:hover { background-color: var( --indigo-10); }
.hover-bg-indigo-11:hover { background-color: var( --indigo-11); }
.hover-bg-violet-0:hover { background-color: var( --violet-0); }
.hover-bg-violet-1:hover { background-color: var( --violet-1); }
.hover-bg-violet-2:hover { background-color: var( --violet-2); }
.hover-bg-violet-3:hover { background-color: var( --violet-3); }
.hover-bg-violet-4:hover { background-color: var( --violet-4); }
.hover-bg-violet-5:hover { background-color: var( --violet-5); }
.hover-bg-violet-6:hover { background-color: var( --violet-6); }
.hover-bg-violet-7:hover { background-color: var( --violet-7); }
.hover-bg-violet-8:hover { background-color: var( --violet-8); }
.hover-bg-violet-9:hover { background-color: var( --violet-9); }
.hover-bg-violet-10:hover { background-color: var( --violet-10); }
.hover-bg-violet-11:hover { background-color: var( --violet-11); }
.hover-bg-magenta-0:hover { background-color: var( --magenta-0); }
.hover-bg-magenta-1:hover { background-color: var( --magenta-1); }
.hover-bg-magenta-2:hover { background-color: var( --magenta-2); }
.hover-bg-magenta-3:hover { background-color: var( --magenta-3); }
.hover-bg-magenta-4:hover { background-color: var( --magenta-4); }
.hover-bg-magenta-5:hover { background-color: var( --magenta-5); }
.hover-bg-magenta-6:hover { background-color: var( --magenta-6); }
.hover-bg-magenta-7:hover { background-color: var( --magenta-7); }
.hover-bg-magenta-8:hover { background-color: var( --magenta-8); }
.hover-bg-magenta-9:hover { background-color: var( --magenta-9); }
.hover-bg-magenta-10:hover { background-color: var( --magenta-10); }
.hover-bg-magenta-11:hover { background-color: var( --magenta-11); }
.hover-bg-red-0:hover { background-color: var( --red-0); }
.hover-bg-red-1:hover { background-color: var( --red-1); }
.hover-bg-red-2:hover { background-color: var( --red-2); }
.hover-bg-red-3:hover { background-color: var( --red-3); }
.hover-bg-red-4:hover { background-color: var( --red-4); }
.hover-bg-red-5:hover { background-color: var( --red-5); }
.hover-bg-red-6:hover { background-color: var( --red-6); }
.hover-bg-red-7:hover { background-color: var( --red-7); }
.hover-bg-red-8:hover { background-color: var( --red-8); }
.hover-bg-red-9:hover { background-color: var( --red-9); }
.hover-bg-red-10:hover { background-color: var( --red-10); }
.hover-bg-red-11:hover { background-color: var( --red-11); }
.hover-bg-red-orange-0:hover { background-color: var( --red-orange-0); }
.hover-bg-red-orange-1:hover { background-color: var( --red-orange-1); }
.hover-bg-red-orange-2:hover { background-color: var( --red-orange-2); }
.hover-bg-red-orange-3:hover { background-color: var( --red-orange-3); }
.hover-bg-red-orange-4:hover { background-color: var( --red-orange-4); }
.hover-bg-red-orange-5:hover { background-color: var( --red-orange-5); }
.hover-bg-red-orange-6:hover { background-color: var( --red-orange-6); }
.hover-bg-red-orange-7:hover { background-color: var( --red-orange-7); }
.hover-bg-red-orange-8:hover { background-color: var( --red-orange-8); }
.hover-bg-red-orange-9:hover { background-color: var( --red-orange-9); }
.hover-bg-red-orange-10:hover { background-color: var( --red-orange-10); }
.hover-bg-red-orange-11:hover { background-color: var( --red-orange-11); }
.hover-bg-orange-0:hover { background-color: var( --orange-0); }
.hover-bg-orange-1:hover { background-color: var( --orange-1); }
.hover-bg-orange-2:hover { background-color: var( --orange-2); }
.hover-bg-orange-3:hover { background-color: var( --orange-3); }
.hover-bg-orange-4:hover { background-color: var( --orange-4); }
.hover-bg-orange-5:hover { background-color: var( --orange-5); }
.hover-bg-orange-6:hover { background-color: var( --orange-6); }
.hover-bg-orange-7:hover { background-color: var( --orange-7); }
.hover-bg-orange-8:hover { background-color: var( --orange-8); }
.hover-bg-orange-9:hover { background-color: var( --orange-9); }
.hover-bg-orange-10:hover { background-color: var( --orange-10); }
.hover-bg-orange-11:hover { background-color: var( --orange-11); }
.hover-bg-gold-0:hover { background-color: var( --gold-0); }
.hover-bg-gold-1:hover { background-color: var( --gold-1); }
.hover-bg-gold-2:hover { background-color: var( --gold-2); }
.hover-bg-gold-3:hover { background-color: var( --gold-3); }
.hover-bg-gold-4:hover { background-color: var( --gold-4); }
.hover-bg-gold-5:hover { background-color: var( --gold-5); }
.hover-bg-gold-6:hover { background-color: var( --gold-6); }
.hover-bg-gold-7:hover { background-color: var( --gold-7); }
.hover-bg-gold-8:hover { background-color: var( --gold-8); }
.hover-bg-gold-9:hover { background-color: var( --gold-9); }
.hover-bg-gold-10:hover { background-color: var( --gold-10); }
.hover-bg-gold-11:hover { background-color: var( --gold-11); }
.hover-bg-yellow-0:hover { background-color: var( --yellow-0); }
.hover-bg-yellow-1:hover { background-color: var( --yellow-1); }
.hover-bg-yellow-2:hover { background-color: var( --yellow-2); }
.hover-bg-yellow-3:hover { background-color: var( --yellow-3); }
.hover-bg-yellow-4:hover { background-color: var( --yellow-4); }
.hover-bg-yellow-5:hover { background-color: var( --yellow-5); }
.hover-bg-yellow-6:hover { background-color: var( --yellow-6); }
.hover-bg-yellow-7:hover { background-color: var( --yellow-7); }
.hover-bg-yellow-8:hover { background-color: var( --yellow-8); }
.hover-bg-yellow-9:hover { background-color: var( --yellow-9); }
.hover-bg-yellow-10:hover { background-color: var( --yellow-10); }
.hover-bg-yellow-11:hover { background-color: var( --yellow-11); }
.hover-bg-green-0:hover { background-color: var( --green-0); }
.hover-bg-green-1:hover { background-color: var( --green-1); }
.hover-bg-green-2:hover { background-color: var( --green-2); }
.hover-bg-green-3:hover { background-color: var( --green-3); }
.hover-bg-green-4:hover { background-color: var( --green-4); }
.hover-bg-green-5:hover { background-color: var( --green-5); }
.hover-bg-green-6:hover { background-color: var( --green-6); }
.hover-bg-green-7:hover { background-color: var( --green-7); }
.hover-bg-green-8:hover { background-color: var( --green-8); }
.hover-bg-green-9:hover { background-color: var( --green-9); }
.hover-bg-green-10:hover { background-color: var( --green-10); }
.hover-bg-green-11:hover { background-color: var( --green-11); }
.hover-bg-teal-0:hover { background-color: var( --teal-0); }
.hover-bg-teal-1:hover { background-color: var( --teal-1); }
.hover-bg-teal-2:hover { background-color: var( --teal-2); }
.hover-bg-teal-3:hover { background-color: var( --teal-3); }
.hover-bg-teal-4:hover { background-color: var( --teal-4); }
.hover-bg-teal-5:hover { background-color: var( --teal-5); }
.hover-bg-teal-6:hover { background-color: var( --teal-6); }
.hover-bg-teal-7:hover { background-color: var( --teal-7); }
.hover-bg-teal-8:hover { background-color: var( --teal-8); }
.hover-bg-teal-9:hover { background-color: var( --teal-9); }
.hover-bg-teal-10:hover { background-color: var( --teal-10); }
.hover-bg-teal-11:hover { background-color: var( --teal-11); }
.hover-bg-cyan-0:hover { background-color: var( --cyan-0); }
.hover-bg-cyan-1:hover { background-color: var( --cyan-1); }
.hover-bg-cyan-2:hover { background-color: var( --cyan-2); }
.hover-bg-cyan-3:hover { background-color: var( --cyan-3); }
.hover-bg-cyan-4:hover { background-color: var( --cyan-4); }
.hover-bg-cyan-5:hover { background-color: var( --cyan-5); }
.hover-bg-cyan-6:hover { background-color: var( --cyan-6); }
.hover-bg-cyan-7:hover { background-color: var( --cyan-7); }
.hover-bg-cyan-8:hover { background-color: var( --cyan-8); }
.hover-bg-cyan-9:hover { background-color: var( --cyan-9); }
.hover-bg-cyan-10:hover { background-color: var( --cyan-10); }
.hover-bg-cyan-11:hover { background-color: var( --cyan-11); }

.focus-tint-0:focus,
.focus-overlay-tint-0:focus { color: var(--tint-0); }
.focus-tint-1:focus,
.focus-overlay-tint-1:focus { color: var(--tint-1); }
.focus-tint-2:focus,
.focus-overlay-tint-2:focus { color: var(--tint-2); }
.focus-tint-3:focus,
.focus-overlay-tint-3:focus { color: var(--tint-3); }
.focus-tint-4:focus,
.focus-overlay-tint-4:focus { color: var(--tint-4); }
.focus-tint-5:focus,
.focus-overlay-tint-5:focus { color: var(--tint-5); }
.focus-tint-6:focus,
.focus-overlay-tint-6:focus { color: var(--tint-6); }
.focus-tint-7:focus,
.focus-overlay-tint-7:focus { color: var(--tint-7); }
.focus-tint-8:focus,
.focus-overlay-tint-8:focus { color: var(--tint-8); }
.focus-tint-9:focus,
.focus-overlay-tint-9:focus { color: var(--tint-9); }
.focus-tint-10:focus,
.focus-overlay-tint-10:focus { color: var(--tint-10); }
.focus-tint-11:focus,
.focus-overlay-tint-11:focus { color: var(--tint-11); }
.focus-shadow-0:focus,
.focus-overlay-shadow-0:focus { color: var(--shadow-0); }
.focus-shadow-1:focus,
.focus-overlay-shadow-1:focus { color: var(--shadow-1); }
.focus-shadow-2:focus,
.focus-overlay-shadow-2:focus { color: var(--shadow-2); }
.focus-shadow-3:focus,
.focus-overlay-shadow-3:focus { color: var(--shadow-3); }
.focus-shadow-4:focus,
.focus-overlay-shadow-4:focus { color: var(--shadow-4); }
.focus-shadow-5:focus,
.focus-overlay-shadow-5:focus { color: var(--shadow-5); }
.focus-shadow-6:focus,
.focus-overlay-shadow-6:focus { color: var(--shadow-6); }
.focus-shadow-7:focus,
.focus-overlay-shadow-7:focus { color: var(--shadow-7); }
.focus-shadow-8:focus,
.focus-overlay-shadow-8:focus { color: var(--shadow-8); }
.focus-shadow-9:focus,
.focus-overlay-shadow-9:focus { color: var(--shadow-9); }
.focus-shadow-10:focus,
.focus-overlay-shadow-10:focus { color: var(--shadow-10); }
.focus-shadow-11:focus,
.focus-overlay-shadow-11:focus { color: var(--shadow-11); }
.focus-gray-0:focus, .focus-grey-0:focus { color: var(--gray-0); }
.focus-gray-1:focus, .focus-grey-1:focus { color: var(--gray-1); }
.focus-gray-2:focus, .focus-grey-2:focus { color: var(--gray-2); }
.focus-gray-3:focus, .focus-grey-3:focus { color: var(--gray-3); }
.focus-gray-4:focus, .focus-grey-4:focus { color: var(--gray-4); }
.focus-gray-5:focus, .focus-grey-5:focus { color: var(--gray-5); }
.focus-gray-6:focus, .focus-grey-6:focus { color: var(--gray-6); }
.focus-gray-7:focus, .focus-grey-7:focus { color: var(--gray-7); }
.focus-gray-8:focus, .focus-grey-8:focus { color: var(--gray-8); }
.focus-gray-9:focus, .focus-grey-9:focus { color: var(--gray-9); }
.focus-gray-10:focus, .focus-grey-10:focus { color: var(--gray-10); }
.focus-gray-11:focus, .focus-grey-11:focus { color: var(--gray-11); }
.focus-slate-gray-0:focus, .focus-slate-grey-0:focus { color: var(--slate-gray-0); }
.focus-slate-gray-1:focus, .focus-slate-grey-1:focus { color: var(--slate-gray-1); }
.focus-slate-gray-2:focus, .focus-slate-grey-2:focus { color: var(--slate-gray-2); }
.focus-slate-gray-3:focus, .focus-slate-grey-3:focus { color: var(--slate-gray-3); }
.focus-slate-gray-4:focus, .focus-slate-grey-4:focus { color: var(--slate-gray-4); }
.focus-slate-gray-5:focus, .focus-slate-grey-5:focus { color: var(--slate-gray-5); }
.focus-slate-gray-6:focus, .focus-slate-grey-6:focus { color: var(--slate-gray-6); }
.focus-slate-gray-7:focus, .focus-slate-grey-7:focus { color: var(--slate-gray-7); }
.focus-slate-gray-8:focus, .focus-slate-grey-8:focus { color: var(--slate-gray-8); }
.focus-slate-gray-9:focus, .focus-slate-grey-9:focus { color: var(--slate-gray-9); }
.focus-slate-gray-10:focus, .focus-slate-grey-10:focus { color: var(--slate-gray-10); }
.focus-slate-gray-11:focus, .focus-slate-grey-11:focus { color: var(--slate-gray-11); }
.focus-blue-0:focus { color: var( --blue-0); }
.focus-blue-1:focus { color: var( --blue-1); }
.focus-blue-2:focus { color: var( --blue-2); }
.focus-blue-3:focus { color: var( --blue-3); }
.focus-blue-4:focus { color: var( --blue-4); }
.focus-blue-5:focus { color: var( --blue-5); }
.focus-blue-6:focus { color: var( --blue-6); }
.focus-blue-7:focus { color: var( --blue-7); }
.focus-blue-8:focus { color: var( --blue-8); }
.focus-blue-9:focus { color: var( --blue-9); }
.focus-blue-10:focus { color: var( --blue-10); }
.focus-blue-11:focus { color: var( --blue-11); }
.focus-indigo-0:focus { color: var( --indigo-0); }
.focus-indigo-1:focus { color: var( --indigo-1); }
.focus-indigo-2:focus { color: var( --indigo-2); }
.focus-indigo-3:focus { color: var( --indigo-3); }
.focus-indigo-4:focus { color: var( --indigo-4); }
.focus-indigo-5:focus { color: var( --indigo-5); }
.focus-indigo-6:focus { color: var( --indigo-6); }
.focus-indigo-7:focus { color: var( --indigo-7); }
.focus-indigo-8:focus { color: var( --indigo-8); }
.focus-indigo-9:focus { color: var( --indigo-9); }
.focus-indigo-10:focus { color: var( --indigo-10); }
.focus-indigo-11:focus { color: var( --indigo-11); }
.focus-violet-0:focus { color: var( --violet-0); }
.focus-violet-1:focus { color: var( --violet-1); }
.focus-violet-2:focus { color: var( --violet-2); }
.focus-violet-3:focus { color: var( --violet-3); }
.focus-violet-4:focus { color: var( --violet-4); }
.focus-violet-5:focus { color: var( --violet-5); }
.focus-violet-6:focus { color: var( --violet-6); }
.focus-violet-7:focus { color: var( --violet-7); }
.focus-violet-8:focus { color: var( --violet-8); }
.focus-violet-9:focus { color: var( --violet-9); }
.focus-violet-10:focus { color: var( --violet-10); }
.focus-violet-11:focus { color: var( --violet-11); }
.focus-magenta-0:focus { color: var( --magenta-0); }
.focus-magenta-1:focus { color: var( --magenta-1); }
.focus-magenta-2:focus { color: var( --magenta-2); }
.focus-magenta-3:focus { color: var( --magenta-3); }
.focus-magenta-4:focus { color: var( --magenta-4); }
.focus-magenta-5:focus { color: var( --magenta-5); }
.focus-magenta-6:focus { color: var( --magenta-6); }
.focus-magenta-7:focus { color: var( --magenta-7); }
.focus-magenta-8:focus { color: var( --magenta-8); }
.focus-magenta-9:focus { color: var( --magenta-9); }
.focus-magenta-10:focus { color: var( --magenta-10); }
.focus-magenta-11:focus { color: var( --magenta-11); }
.focus-red-0:focus { color: var( --red-0); }
.focus-red-1:focus { color: var( --red-1); }
.focus-red-2:focus { color: var( --red-2); }
.focus-red-3:focus { color: var( --red-3); }
.focus-red-4:focus { color: var( --red-4); }
.focus-red-5:focus { color: var( --red-5); }
.focus-red-6:focus { color: var( --red-6); }
.focus-red-7:focus { color: var( --red-7); }
.focus-red-8:focus { color: var( --red-8); }
.focus-red-9:focus { color: var( --red-9); }
.focus-red-10:focus { color: var( --red-10); }
.focus-red-11:focus { color: var( --red-11); }
.focus-red-orange-0:focus { color: var( --red-orange-0); }
.focus-red-orange-1:focus { color: var( --red-orange-1); }
.focus-red-orange-2:focus { color: var( --red-orange-2); }
.focus-red-orange-3:focus { color: var( --red-orange-3); }
.focus-red-orange-4:focus { color: var( --red-orange-4); }
.focus-red-orange-5:focus { color: var( --red-orange-5); }
.focus-red-orange-6:focus { color: var( --red-orange-6); }
.focus-red-orange-7:focus { color: var( --red-orange-7); }
.focus-red-orange-8:focus { color: var( --red-orange-8); }
.focus-red-orange-9:focus { color: var( --red-orange-9); }
.focus-red-orange-10:focus { color: var( --red-orange-10); }
.focus-red-orange-11:focus { color: var( --red-orange-11); }
.focus-orange-0:focus { color: var( --orange-0); }
.focus-orange-1:focus { color: var( --orange-1); }
.focus-orange-2:focus { color: var( --orange-2); }
.focus-orange-3:focus { color: var( --orange-3); }
.focus-orange-4:focus { color: var( --orange-4); }
.focus-orange-5:focus { color: var( --orange-5); }
.focus-orange-6:focus { color: var( --orange-6); }
.focus-orange-7:focus { color: var( --orange-7); }
.focus-orange-8:focus { color: var( --orange-8); }
.focus-orange-9:focus { color: var( --orange-9); }
.focus-orange-10:focus { color: var( --orange-10); }
.focus-orange-11:focus { color: var( --orange-11); }
.focus-gold-0:focus { color: var( --gold-0); }
.focus-gold-1:focus { color: var( --gold-1); }
.focus-gold-2:focus { color: var( --gold-2); }
.focus-gold-3:focus { color: var( --gold-3); }
.focus-gold-4:focus { color: var( --gold-4); }
.focus-gold-5:focus { color: var( --gold-5); }
.focus-gold-6:focus { color: var( --gold-6); }
.focus-gold-7:focus { color: var( --gold-7); }
.focus-gold-8:focus { color: var( --gold-8); }
.focus-gold-9:focus { color: var( --gold-9); }
.focus-gold-10:focus { color: var( --gold-10); }
.focus-gold-11:focus { color: var( --gold-11); }
.focus-yellow-0:focus { color: var( --yellow-0); }
.focus-yellow-1:focus { color: var( --yellow-1); }
.focus-yellow-2:focus { color: var( --yellow-2); }
.focus-yellow-3:focus { color: var( --yellow-3); }
.focus-yellow-4:focus { color: var( --yellow-4); }
.focus-yellow-5:focus { color: var( --yellow-5); }
.focus-yellow-6:focus { color: var( --yellow-6); }
.focus-yellow-7:focus { color: var( --yellow-7); }
.focus-yellow-8:focus { color: var( --yellow-8); }
.focus-yellow-9:focus { color: var( --yellow-9); }
.focus-yellow-10:focus { color: var( --yellow-10); }
.focus-yellow-11:focus { color: var( --yellow-11); }
.focus-green-0:focus { color: var( --green-0); }
.focus-green-1:focus { color: var( --green-1); }
.focus-green-2:focus { color: var( --green-2); }
.focus-green-3:focus { color: var( --green-3); }
.focus-green-4:focus { color: var( --green-4); }
.focus-green-5:focus { color: var( --green-5); }
.focus-green-6:focus { color: var( --green-6); }
.focus-green-7:focus { color: var( --green-7); }
.focus-green-8:focus { color: var( --green-8); }
.focus-green-9:focus { color: var( --green-9); }
.focus-green-10:focus { color: var( --green-10); }
.focus-green-11:focus { color: var( --green-11); }
.focus-teal-0:focus { color: var( --teal-0); }
.focus-teal-1:focus { color: var( --teal-1); }
.focus-teal-2:focus { color: var( --teal-2); }
.focus-teal-3:focus { color: var( --teal-3); }
.focus-teal-4:focus { color: var( --teal-4); }
.focus-teal-5:focus { color: var( --teal-5); }
.focus-teal-6:focus { color: var( --teal-6); }
.focus-teal-7:focus { color: var( --teal-7); }
.focus-teal-8:focus { color: var( --teal-8); }
.focus-teal-9:focus { color: var( --teal-9); }
.focus-teal-10:focus { color: var( --teal-10); }
.focus-teal-11:focus { color: var( --teal-11); }
.focus-cyan-0:focus { color: var( --cyan-0); }
.focus-cyan-1:focus { color: var( --cyan-1); }
.focus-cyan-2:focus { color: var( --cyan-2); }
.focus-cyan-3:focus { color: var( --cyan-3); }
.focus-cyan-4:focus { color: var( --cyan-4); }
.focus-cyan-5:focus { color: var( --cyan-5); }
.focus-cyan-6:focus { color: var( --cyan-6); }
.focus-cyan-7:focus { color: var( --cyan-7); }
.focus-cyan-8:focus { color: var( --cyan-8); }
.focus-cyan-9:focus { color: var( --cyan-9); }
.focus-cyan-10:focus { color: var( --cyan-10); }
.focus-cyan-11:focus { color: var( --cyan-11); }

/* Background colors */

.focus-bg-tint-0:focus,
.focus-bg-overlay-tint-0:focus { background-color: var(--tint-0); }
.focus-bg-tint-1:focus,
.focus-bg-overlay-tint-1:focus { background-color: var(--tint-1); }
.focus-bg-tint-2:focus,
.focus-bg-overlay-tint-2:focus { background-color: var(--tint-2); }
.focus-bg-tint-3:focus,
.focus-bg-overlay-tint-3:focus { background-color: var(--tint-3); }
.focus-bg-tint-4:focus,
.focus-bg-overlay-tint-4:focus { background-color: var(--tint-4); }
.focus-bg-tint-5:focus,
.focus-bg-overlay-tint-5:focus { background-color: var(--tint-5); }
.focus-bg-tint-6:focus,
.focus-bg-overlay-tint-6:focus { background-color: var(--tint-6); }
.focus-bg-tint-7:focus,
.focus-bg-overlay-tint-7:focus { background-color: var(--tint-7); }
.focus-bg-tint-8:focus,
.focus-bg-overlay-tint-8:focus { background-color: var(--tint-8); }
.focus-bg-tint-9:focus,
.focus-bg-overlay-tint-9:focus { background-color: var(--tint-9); }
.focus-bg-tint-10:focus,
.focus-bg-overlay-tint-10:focus { background-color: var(--tint-10); }
.focus-bg-tint-11:focus,
.focus-bg-overlay-tint-11:focus { background-color: var(--tint-11); }
.focus-bg-shadow-0:focus,
.focus-bg-overlay-shadow-0:focus { background-color: var(--shadow-0); }
.focus-bg-shadow-1:focus,
.focus-bg-overlay-shadow-1:focus { background-color: var(--shadow-1); }
.focus-bg-shadow-2:focus,
.focus-bg-overlay-shadow-2:focus { background-color: var(--shadow-2); }
.focus-bg-shadow-3:focus,
.focus-bg-overlay-shadow-3:focus { background-color: var(--shadow-3); }
.focus-bg-shadow-4:focus,
.focus-bg-overlay-shadow-4:focus { background-color: var(--shadow-4); }
.focus-bg-shadow-5:focus,
.focus-bg-overlay-shadow-5:focus { background-color: var(--shadow-5); }
.focus-bg-shadow-6:focus,
.focus-bg-overlay-shadow-6:focus { background-color: var(--shadow-6); }
.focus-bg-shadow-7:focus,
.focus-bg-overlay-shadow-7:focus { background-color: var(--shadow-7); }
.focus-bg-shadow-8:focus,
.focus-bg-overlay-shadow-8:focus { background-color: var(--shadow-8); }
.focus-bg-shadow-9:focus,
.focus-bg-overlay-shadow-9:focus { background-color: var(--shadow-9); }
.focus-bg-shadow-10:focus,
.focus-bg-overlay-shadow-10:focus { background-color: var(--shadow-10); }
.focus-bg-shadow-11:focus,
.focus-bg-overlay-shadow-11:focus { background-color: var(--shadow-11); }
.focus-bg-gray-0:focus, .focus-bg-grey-0:focus { background-color: var(--gray-0); }
.focus-bg-gray-1:focus, .focus-bg-grey-1:focus { background-color: var(--gray-1); }
.focus-bg-gray-2:focus, .focus-bg-grey-2:focus { background-color: var(--gray-2); }
.focus-bg-gray-3:focus, .focus-bg-grey-3:focus { background-color: var(--gray-3); }
.focus-bg-gray-4:focus, .focus-bg-grey-4:focus { background-color: var(--gray-4); }
.focus-bg-gray-5:focus, .focus-bg-grey-5:focus { background-color: var(--gray-5); }
.focus-bg-gray-6:focus, .focus-bg-grey-6:focus { background-color: var(--gray-6); }
.focus-bg-gray-7:focus, .focus-bg-grey-7:focus { background-color: var(--gray-7); }
.focus-bg-gray-8:focus, .focus-bg-grey-8:focus { background-color: var(--gray-8); }
.focus-bg-gray-9:focus, .focus-bg-grey-9:focus { background-color: var(--gray-9); }
.focus-bg-gray-10:focus, .focus-bg-grey-10:focus { background-color: var(--gray-10); }
.focus-bg-gray-11:focus, .focus-bg-grey-11:focus { background-color: var(--gray-11); }
.focus-bg-slate-gray-0:focus, .focus-bg-slate-grey-0:focus { background-color: var(--slate-gray-0); }
.focus-bg-slate-gray-1:focus, .focus-bg-slate-grey-1:focus { background-color: var(--slate-gray-1); }
.focus-bg-slate-gray-2:focus, .focus-bg-slate-grey-2:focus { background-color: var(--slate-gray-2); }
.focus-bg-slate-gray-3:focus, .focus-bg-slate-grey-3:focus { background-color: var(--slate-gray-3); }
.focus-bg-slate-gray-4:focus, .focus-bg-slate-grey-4:focus { background-color: var(--slate-gray-4); }
.focus-bg-slate-gray-5:focus, .focus-bg-slate-grey-5:focus { background-color: var(--slate-gray-5); }
.focus-bg-slate-gray-6:focus, .focus-bg-slate-grey-6:focus { background-color: var(--slate-gray-6); }
.focus-bg-slate-gray-7:focus, .focus-bg-slate-grey-7:focus { background-color: var(--slate-gray-7); }
.focus-bg-slate-gray-8:focus, .focus-bg-slate-grey-8:focus { background-color: var(--slate-gray-8); }
.focus-bg-slate-gray-9:focus, .focus-bg-slate-grey-9:focus { background-color: var(--slate-gray-9); }
.focus-bg-slate-gray-10:focus, .focus-bg-slate-grey-10:focus { background-color: var(--slate-gray-10); }
.focus-bg-slate-gray-11:focus, .focus-bg-slate-grey-11:focus { background-color: var(--slate-gray-11); }
.focus-bg-blue-0:focus { background-color: var( --blue-0); }
.focus-bg-blue-1:focus { background-color: var( --blue-1); }
.focus-bg-blue-2:focus { background-color: var( --blue-2); }
.focus-bg-blue-3:focus { background-color: var( --blue-3); }
.focus-bg-blue-4:focus { background-color: var( --blue-4); }
.focus-bg-blue-5:focus { background-color: var( --blue-5); }
.focus-bg-blue-6:focus { background-color: var( --blue-6); }
.focus-bg-blue-7:focus { background-color: var( --blue-7); }
.focus-bg-blue-8:focus { background-color: var( --blue-8); }
.focus-bg-blue-9:focus { background-color: var( --blue-9); }
.focus-bg-blue-10:focus { background-color: var( --blue-10); }
.focus-bg-blue-11:focus { background-color: var( --blue-11); }
.focus-bg-indigo-0:focus { background-color: var( --indigo-0); }
.focus-bg-indigo-1:focus { background-color: var( --indigo-1); }
.focus-bg-indigo-2:focus { background-color: var( --indigo-2); }
.focus-bg-indigo-3:focus { background-color: var( --indigo-3); }
.focus-bg-indigo-4:focus { background-color: var( --indigo-4); }
.focus-bg-indigo-5:focus { background-color: var( --indigo-5); }
.focus-bg-indigo-6:focus { background-color: var( --indigo-6); }
.focus-bg-indigo-7:focus { background-color: var( --indigo-7); }
.focus-bg-indigo-8:focus { background-color: var( --indigo-8); }
.focus-bg-indigo-9:focus { background-color: var( --indigo-9); }
.focus-bg-indigo-10:focus { background-color: var( --indigo-10); }
.focus-bg-indigo-11:focus { background-color: var( --indigo-11); }
.focus-bg-violet-0:focus { background-color: var( --violet-0); }
.focus-bg-violet-1:focus { background-color: var( --violet-1); }
.focus-bg-violet-2:focus { background-color: var( --violet-2); }
.focus-bg-violet-3:focus { background-color: var( --violet-3); }
.focus-bg-violet-4:focus { background-color: var( --violet-4); }
.focus-bg-violet-5:focus { background-color: var( --violet-5); }
.focus-bg-violet-6:focus { background-color: var( --violet-6); }
.focus-bg-violet-7:focus { background-color: var( --violet-7); }
.focus-bg-violet-8:focus { background-color: var( --violet-8); }
.focus-bg-violet-9:focus { background-color: var( --violet-9); }
.focus-bg-violet-10:focus { background-color: var( --violet-10); }
.focus-bg-violet-11:focus { background-color: var( --violet-11); }
.focus-bg-magenta-0:focus { background-color: var( --magenta-0); }
.focus-bg-magenta-1:focus { background-color: var( --magenta-1); }
.focus-bg-magenta-2:focus { background-color: var( --magenta-2); }
.focus-bg-magenta-3:focus { background-color: var( --magenta-3); }
.focus-bg-magenta-4:focus { background-color: var( --magenta-4); }
.focus-bg-magenta-5:focus { background-color: var( --magenta-5); }
.focus-bg-magenta-6:focus { background-color: var( --magenta-6); }
.focus-bg-magenta-7:focus { background-color: var( --magenta-7); }
.focus-bg-magenta-8:focus { background-color: var( --magenta-8); }
.focus-bg-magenta-9:focus { background-color: var( --magenta-9); }
.focus-bg-magenta-10:focus { background-color: var( --magenta-10); }
.focus-bg-magenta-11:focus { background-color: var( --magenta-11); }
.focus-bg-red-0:focus { background-color: var( --red-0); }
.focus-bg-red-1:focus { background-color: var( --red-1); }
.focus-bg-red-2:focus { background-color: var( --red-2); }
.focus-bg-red-3:focus { background-color: var( --red-3); }
.focus-bg-red-4:focus { background-color: var( --red-4); }
.focus-bg-red-5:focus { background-color: var( --red-5); }
.focus-bg-red-6:focus { background-color: var( --red-6); }
.focus-bg-red-7:focus { background-color: var( --red-7); }
.focus-bg-red-8:focus { background-color: var( --red-8); }
.focus-bg-red-9:focus { background-color: var( --red-9); }
.focus-bg-red-10:focus { background-color: var( --red-10); }
.focus-bg-red-11:focus { background-color: var( --red-11); }
.focus-bg-red-orange-0:focus { background-color: var( --red-orange-0); }
.focus-bg-red-orange-1:focus { background-color: var( --red-orange-1); }
.focus-bg-red-orange-2:focus { background-color: var( --red-orange-2); }
.focus-bg-red-orange-3:focus { background-color: var( --red-orange-3); }
.focus-bg-red-orange-4:focus { background-color: var( --red-orange-4); }
.focus-bg-red-orange-5:focus { background-color: var( --red-orange-5); }
.focus-bg-red-orange-6:focus { background-color: var( --red-orange-6); }
.focus-bg-red-orange-7:focus { background-color: var( --red-orange-7); }
.focus-bg-red-orange-8:focus { background-color: var( --red-orange-8); }
.focus-bg-red-orange-9:focus { background-color: var( --red-orange-9); }
.focus-bg-red-orange-10:focus { background-color: var( --red-orange-10); }
.focus-bg-red-orange-11:focus { background-color: var( --red-orange-11); }
.focus-bg-orange-0:focus { background-color: var( --orange-0); }
.focus-bg-orange-1:focus { background-color: var( --orange-1); }
.focus-bg-orange-2:focus { background-color: var( --orange-2); }
.focus-bg-orange-3:focus { background-color: var( --orange-3); }
.focus-bg-orange-4:focus { background-color: var( --orange-4); }
.focus-bg-orange-5:focus { background-color: var( --orange-5); }
.focus-bg-orange-6:focus { background-color: var( --orange-6); }
.focus-bg-orange-7:focus { background-color: var( --orange-7); }
.focus-bg-orange-8:focus { background-color: var( --orange-8); }
.focus-bg-orange-9:focus { background-color: var( --orange-9); }
.focus-bg-orange-10:focus { background-color: var( --orange-10); }
.focus-bg-orange-11:focus { background-color: var( --orange-11); }
.focus-bg-gold-0:focus { background-color: var( --gold-0); }
.focus-bg-gold-1:focus { background-color: var( --gold-1); }
.focus-bg-gold-2:focus { background-color: var( --gold-2); }
.focus-bg-gold-3:focus { background-color: var( --gold-3); }
.focus-bg-gold-4:focus { background-color: var( --gold-4); }
.focus-bg-gold-5:focus { background-color: var( --gold-5); }
.focus-bg-gold-6:focus { background-color: var( --gold-6); }
.focus-bg-gold-7:focus { background-color: var( --gold-7); }
.focus-bg-gold-8:focus { background-color: var( --gold-8); }
.focus-bg-gold-9:focus { background-color: var( --gold-9); }
.focus-bg-gold-10:focus { background-color: var( --gold-10); }
.focus-bg-gold-11:focus { background-color: var( --gold-11); }
.focus-bg-yellow-0:focus { background-color: var( --yellow-0); }
.focus-bg-yellow-1:focus { background-color: var( --yellow-1); }
.focus-bg-yellow-2:focus { background-color: var( --yellow-2); }
.focus-bg-yellow-3:focus { background-color: var( --yellow-3); }
.focus-bg-yellow-4:focus { background-color: var( --yellow-4); }
.focus-bg-yellow-5:focus { background-color: var( --yellow-5); }
.focus-bg-yellow-6:focus { background-color: var( --yellow-6); }
.focus-bg-yellow-7:focus { background-color: var( --yellow-7); }
.focus-bg-yellow-8:focus { background-color: var( --yellow-8); }
.focus-bg-yellow-9:focus { background-color: var( --yellow-9); }
.focus-bg-yellow-10:focus { background-color: var( --yellow-10); }
.focus-bg-yellow-11:focus { background-color: var( --yellow-11); }
.focus-bg-green-0:focus { background-color: var( --green-0); }
.focus-bg-green-1:focus { background-color: var( --green-1); }
.focus-bg-green-2:focus { background-color: var( --green-2); }
.focus-bg-green-3:focus { background-color: var( --green-3); }
.focus-bg-green-4:focus { background-color: var( --green-4); }
.focus-bg-green-5:focus { background-color: var( --green-5); }
.focus-bg-green-6:focus { background-color: var( --green-6); }
.focus-bg-green-7:focus { background-color: var( --green-7); }
.focus-bg-green-8:focus { background-color: var( --green-8); }
.focus-bg-green-9:focus { background-color: var( --green-9); }
.focus-bg-green-10:focus { background-color: var( --green-10); }
.focus-bg-green-11:focus { background-color: var( --green-11); }
.focus-bg-teal-0:focus { background-color: var( --teal-0); }
.focus-bg-teal-1:focus { background-color: var( --teal-1); }
.focus-bg-teal-2:focus { background-color: var( --teal-2); }
.focus-bg-teal-3:focus { background-color: var( --teal-3); }
.focus-bg-teal-4:focus { background-color: var( --teal-4); }
.focus-bg-teal-5:focus { background-color: var( --teal-5); }
.focus-bg-teal-6:focus { background-color: var( --teal-6); }
.focus-bg-teal-7:focus { background-color: var( --teal-7); }
.focus-bg-teal-8:focus { background-color: var( --teal-8); }
.focus-bg-teal-9:focus { background-color: var( --teal-9); }
.focus-bg-teal-10:focus { background-color: var( --teal-10); }
.focus-bg-teal-11:focus { background-color: var( --teal-11); }
.focus-bg-cyan-0:focus { background-color: var( --cyan-0); }
.focus-bg-cyan-1:focus { background-color: var( --cyan-1); }
.focus-bg-cyan-2:focus { background-color: var( --cyan-2); }
.focus-bg-cyan-3:focus { background-color: var( --cyan-3); }
.focus-bg-cyan-4:focus { background-color: var( --cyan-4); }
.focus-bg-cyan-5:focus { background-color: var( --cyan-5); }
.focus-bg-cyan-6:focus { background-color: var( --cyan-6); }
.focus-bg-cyan-7:focus { background-color: var( --cyan-7); }
.focus-bg-cyan-8:focus { background-color: var( --cyan-8); }
.focus-bg-cyan-9:focus { background-color: var( --cyan-9); }
.focus-bg-cyan-10:focus { background-color: var( --cyan-10); }
.focus-bg-cyan-11:focus { background-color: var( --cyan-11); }
/*
   SPACING

   An eight step powers of two scale ranging from 0 to 16rem.

   Base:
     p = padding
     m = margin

   Modifiers:
     a = all
     y = vertical
     x = horizontal
     t = top
     r = right
     b = bottom
     l = left

     0 = none
     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale
     8 = 8th step in spacing scale
     9 = 9th step in spacing scale

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/


.p0 { padding: var(--spacing-0, 0); }
.p1 { padding: var(--spacing-1, 2px); }
.p2 { padding: var(--spacing-2, 4px); }
.p3 { padding: var(--spacing-3, 8px); }
.p4 { padding: var(--spacing-4, 16px); }
.p5 { padding: var(--spacing-5, 32px); }
.p6 { padding: var(--spacing-6, 64px); }
.p7 { padding: var(--spacing-7, 128px); }
.p8 { padding: var(--spacing-8, 256px); }
.p9 { padding: var(--spacing-9, 512px); }

.pl0 { padding-left: var(--spacing-0, 0); }
.pl1 { padding-left: var(--spacing-1, 2px); }
.pl2 { padding-left: var(--spacing-2, 4px); }
.pl3 { padding-left: var(--spacing-3, 8px); }
.pl4 { padding-left: var(--spacing-4, 16px); }
.pl5 { padding-left: var(--spacing-5, 32px); }
.pl6 { padding-left: var(--spacing-6, 64px); }
.pl7 { padding-left: var(--spacing-7, 128px); }
.pl8 { padding-left: var(--spacing-8, 256px); }
.pl9 { padding-left: var(--spacing-9, 512px); }

.pr0 { padding-right: var(--spacing-0, 0); }
.pr1 { padding-right: var(--spacing-1, 2px); }
.pr2 { padding-right: var(--spacing-2, 4px); }
.pr3 { padding-right: var(--spacing-3, 8px); }
.pr4 { padding-right: var(--spacing-4, 16px); }
.pr5 { padding-right: var(--spacing-5, 32px); }
.pr6 { padding-right: var(--spacing-6, 64px); }
.pr7 { padding-right: var(--spacing-7, 128px); }
.pr8 { padding-right: var(--spacing-8, 256px); }
.pr9 { padding-right: var(--spacing-9, 512px); }

.pb0 { padding-bottom: var(--spacing-0, 0); }
.pb1 { padding-bottom: var(--spacing-1, 2px); }
.pb2 { padding-bottom: var(--spacing-2, 4px); }
.pb3 { padding-bottom: var(--spacing-3, 8px); }
.pb4 { padding-bottom: var(--spacing-4, 16px); }
.pb5 { padding-bottom: var(--spacing-5, 32px); }
.pb6 { padding-bottom: var(--spacing-6, 64px); }
.pb7 { padding-bottom: var(--spacing-7, 128px); }
.pb8 { padding-bottom: var(--spacing-8, 256px); }
.pb9 { padding-bottom: var(--spacing-9, 512px); }

.pt0 { padding-top: var(--spacing-0, 0); }
.pt1 { padding-top: var(--spacing-1, 2px); }
.pt2 { padding-top: var(--spacing-2, 4px); }
.pt3 { padding-top: var(--spacing-3, 8px); }
.pt4 { padding-top: var(--spacing-4, 16px); }
.pt5 { padding-top: var(--spacing-5, 32px); }
.pt6 { padding-top: var(--spacing-6, 64px); }
.pt7 { padding-top: var(--spacing-7, 128px); }
.pt8 { padding-top: var(--spacing-8, 256px); }
.pt9 { padding-top: var(--spacing-9, 512px); }

.py0 {
  padding-top: var(--spacing-0, 0);
  padding-bottom: var(--spacing-0, 0);
}
.py1 {
  padding-top: var(--spacing-1, 2px);
  padding-bottom: var(--spacing-1, 2px);
}
.py2 {
  padding-top: var(--spacing-2, 4px);
  padding-bottom: var(--spacing-2, 4px);
}
.py3 {
  padding-top: var(--spacing-3, 8px);
  padding-bottom: var(--spacing-3, 8px);
}
.py4 {
  padding-top: var(--spacing-4, 16px);
  padding-bottom: var(--spacing-4, 16px);
}
.py5 {
  padding-top: var(--spacing-5, 32px);
  padding-bottom: var(--spacing-5, 32px);
}
.py6 {
  padding-top: var(--spacing-6, 64px);
  padding-bottom: var(--spacing-6, 64px);
}
.py7 {
  padding-top: var(--spacing-7, 128px);
  padding-bottom: var(--spacing-7, 128px);
}
.py8 {
  padding-top: var(--spacing-8, 256px);
  padding-bottom: var(--spacing-8, 256px);
}
.py9 {
  padding-top: var(--spacing-9, 512px);
  padding-bottom: var(--spacing-9, 512px);
}

.px0 {
  padding-left: var(--spacing-0, 0);
  padding-right: var(--spacing-0, 0);
}
.px1 {
  padding-left: var(--spacing-1, 2px);
  padding-right: var(--spacing-1, 2px);
}
.px2 {
  padding-left: var(--spacing-2, 4px);
  padding-right: var(--spacing-2, 4px);
}
.px3 {
  padding-left: var(--spacing-3, 8px);
  padding-right: var(--spacing-3, 8px);
}
.px4 {
  padding-left: var(--spacing-4, 16px);
  padding-right: var(--spacing-4, 16px);
}
.px5 {
  padding-left: var(--spacing-5, 32px);
  padding-right: var(--spacing-5, 32px);
}
.px6 {
  padding-left: var(--spacing-6, 64px);
  padding-right: var(--spacing-6, 64px);
}
.px7 {
  padding-left: var(--spacing-7, 128px);
  padding-right: var(--spacing-7, 128px);
}
.px8 {
  padding-left: var(--spacing-8, 256px);
  padding-right: var(--spacing-8, 256px);
}
.px9 {
  padding-left: var(--spacing-9, 512px);
  padding-right: var(--spacing-9, 512px);
}

.m0 { margin: var(--spacing-0, 0); }
.m1 { margin: var(--spacing-1, 2px); }
.m2 { margin: var(--spacing-2, 4px); }
.m3 { margin: var(--spacing-3, 8px); }
.m4 { margin: var(--spacing-4, 16px); }
.m5 { margin: var(--spacing-5, 32px); }
.m6 { margin: var(--spacing-6, 64px); }
.m7 { margin: var(--spacing-7, 128px); }
.m8 { margin: var(--spacing-8, 256px); }
.m9 { margin: var(--spacing-9, 512px); }

.ml0 { margin-left: var(--spacing-0, 0); }
.ml1 { margin-left: var(--spacing-1, 2px); }
.ml2 { margin-left: var(--spacing-2, 4px); }
.ml3 { margin-left: var(--spacing-3, 8px); }
.ml4 { margin-left: var(--spacing-4, 16px); }
.ml5 { margin-left: var(--spacing-5, 32px); }
.ml6 { margin-left: var(--spacing-6, 64px); }
.ml7 { margin-left: var(--spacing-7, 128px); }
.ml8 { margin-left: var(--spacing-8, 256px); }
.ml9 { margin-left: var(--spacing-9, 512px); }

.mr0 { margin-right: var(--spacing-0, 0); }
.mr1 { margin-right: var(--spacing-1, 2px); }
.mr2 { margin-right: var(--spacing-2, 4px); }
.mr3 { margin-right: var(--spacing-3, 8px); }
.mr4 { margin-right: var(--spacing-4, 16px); }
.mr5 { margin-right: var(--spacing-5, 32px); }
.mr6 { margin-right: var(--spacing-6, 64px); }
.mr7 { margin-right: var(--spacing-7, 128px); }
.mr8 { margin-right: var(--spacing-8, 256px); }
.mr9 { margin-right: var(--spacing-9, 512px); }

.mb0 { margin-bottom: var(--spacing-0, 0); }
.mb1 { margin-bottom: var(--spacing-1, 2px); }
.mb2 { margin-bottom: var(--spacing-2, 4px); }
.mb3 { margin-bottom: var(--spacing-3, 8px); }
.mb4 { margin-bottom: var(--spacing-4, 16px); }
.mb5 { margin-bottom: var(--spacing-5, 32px); }
.mb6 { margin-bottom: var(--spacing-6, 64px); }
.mb7 { margin-bottom: var(--spacing-7, 128px); }
.mb8 { margin-bottom: var(--spacing-8, 256px); }
.mb9 { margin-bottom: var(--spacing-9, 512px); }

.mt0 { margin-top: var(--spacing-0, 0); }
.mt1 { margin-top: var(--spacing-1, 2px); }
.mt2 { margin-top: var(--spacing-2, 4px); }
.mt3 { margin-top: var(--spacing-3, 8px); }
.mt4 { margin-top: var(--spacing-4, 16px); }
.mt5 { margin-top: var(--spacing-5, 32px); }
.mt6 { margin-top: var(--spacing-6, 64px); }
.mt7 { margin-top: var(--spacing-7, 128px); }
.mt8 { margin-top: var(--spacing-8, 256px); }
.mt9 { margin-top: var(--spacing-9, 512px); }

.my0   {
  margin-top: var(--spacing-0, 0);
  margin-bottom: var(--spacing-0, 0);
}
.my1  {
  margin-top: var(--spacing-1, 2px);
  margin-bottom: var(--spacing-1, 2px);
}
.my2  {
  margin-top: var(--spacing-2, 4px);
  margin-bottom: var(--spacing-2, 4px);
}
.my3   {
  margin-top: var(--spacing-3, 8px);
  margin-bottom: var(--spacing-3, 8px);
}
.my4   {
  margin-top: var(--spacing-4, 16px);
  margin-bottom: var(--spacing-4, 16px);
}
.my5   {
  margin-top: var(--spacing-5, 32px);
  margin-bottom: var(--spacing-5, 32px);
}
.my6   {
  margin-top: var(--spacing-6, 64px);
  margin-bottom: var(--spacing-6, 64px);
}
.my7  {
  margin-top: var(--spacing-7, 128px);
  margin-bottom: var(--spacing-7, 128px);
}
.my8  {
  margin-top: var(--spacing-8, 256px);
  margin-bottom: var(--spacing-8, 256px);
}
.my9  {
  margin-top: var(--spacing-9, 512px);
  margin-bottom: var(--spacing-9, 512px);
}

.mx0   {
  margin-left: var(--spacing-0, 0);
  margin-right: var(--spacing-0, 0);
}
.mx1   {
  margin-left: var(--spacing-1, 2px);
  margin-right: var(--spacing-1, 2px);
}
.mx2   {
  margin-left: var(--spacing-2, 4px);
  margin-right: var(--spacing-2, 4px);
}
.mx3   {
  margin-left: var(--spacing-3, 8px);
  margin-right: var(--spacing-3, 8px);
}
.mx4   {
  margin-left: var(--spacing-4, 16px);
  margin-right: var(--spacing-4, 16px);
}
.mx5   {
  margin-left: var(--spacing-5, 32px);
  margin-right: var(--spacing-5, 32px);
}
.mx6   {
  margin-left: var(--spacing-6, 64px);
  margin-right: var(--spacing-6, 64px);
}
.mx7  {
  margin-left: var(--spacing-7, 128px);
  margin-right: var(--spacing-7, 128px);
}
.mx8  {
  margin-left: var(--spacing-8, 256px);
  margin-right: var(--spacing-8, 256px);
}
.mx9  {
  margin-left: var(--spacing-9, 512px);
  margin-right: var(--spacing-9, 512px);
}

@container (min-width:30em) {
  .p0-s { padding: var(--spacing-0, 0); }
  .p1-s { padding: var(--spacing-1, 2px); }
  .p2-s { padding: var(--spacing-2, 4px); }
  .p3-s { padding: var(--spacing-3, 8px); }
  .p4-s { padding: var(--spacing-4, 16px); }
  .p5-s { padding: var(--spacing-5, 32px); }
  .p6-s { padding: var(--spacing-6, 64px); }
  .p7-s { padding: var(--spacing-7, 128px); }
  .p8-s { padding: var(--spacing-8, 256px); }
  .p9-s { padding: var(--spacing-9, 512px); }

  .pl0-s { padding-left: var(--spacing-0, 0); }
  .pl1-s { padding-left: var(--spacing-1, 2px); }
  .pl2-s { padding-left: var(--spacing-2, 4px); }
  .pl3-s { padding-left: var(--spacing-3, 8px); }
  .pl4-s { padding-left: var(--spacing-4, 16px); }
  .pl5-s { padding-left: var(--spacing-5, 32px); }
  .pl6-s { padding-left: var(--spacing-6, 64px); }
  .pl7-s { padding-left: var(--spacing-7, 128px); }
  .pl8-s { padding-left: var(--spacing-8, 256px); }
  .pl9-s { padding-left: var(--spacing-9, 512px); }

  .pr0-s { padding-right: var(--spacing-0, 0); }
  .pr1-s { padding-right: var(--spacing-1, 2px); }
  .pr2-s { padding-right: var(--spacing-2, 4px); }
  .pr3-s { padding-right: var(--spacing-3, 8px); }
  .pr4-s { padding-right: var(--spacing-4, 16px); }
  .pr5-s { padding-right: var(--spacing-5, 32px); }
  .pr6-s { padding-right: var(--spacing-6, 64px); }
  .pr7-s { padding-right: var(--spacing-7, 128px); }
  .pr8-s { padding-right: var(--spacing-8, 256px); }
  .pr9-s { padding-right: var(--spacing-9, 512px); }

  .pb0-s  { padding-bottom: var(--spacing-0, 0); }
  .pb1-s { padding-bottom: var(--spacing-1, 2px); }
  .pb2-s { padding-bottom: var(--spacing-2, 4px); }
  .pb3-s  {  padding-bottom: var(--spacing-3, 8px); }
  .pb4-s  {  padding-bottom: var(--spacing-4, 16px); }
  .pb5-s  {  padding-bottom: var(--spacing-5, 32px); }
  .pb6-s  {  padding-bottom: var(--spacing-6, 64px); }
  .pb7-s {  padding-bottom: var(--spacing-7, 128px); }
  .pb8-s { padding-bottom: var(--spacing-8, 256px); }
  .pb9-s { padding-bottom: var(--spacing-9, 512px); }

  .pt0-s  {  padding-top: var(--spacing-0, 0); }
  .pt1-s {  padding-top: var(--spacing-1, 2px); }
  .pt2-s {  padding-top: var(--spacing-2, 4px); }
  .pt3-s  {  padding-top: var(--spacing-3, 8px); }
  .pt4-s  {  padding-top: var(--spacing-4, 16px); }
  .pt5-s  {  padding-top: var(--spacing-5, 32px); }
  .pt6-s  {  padding-top: var(--spacing-6, 64px); }
  .pt7-s {  padding-top: var(--spacing-7, 128px); }
  .pt8-s { padding-top: var(--spacing-8, 256px); }
  .pt9-s { padding-top: var(--spacing-9, 512px); }

  .py0-s {
    padding-top: var(--spacing-0, 0);
    padding-bottom: var(--spacing-0, 0);
  }
  .py1-s {
    padding-top: var(--spacing-1, 2px);
    padding-bottom: var(--spacing-1, 2px);
  }
  .py2-s {
    padding-top: var(--spacing-2, 4px);
    padding-bottom: var(--spacing-2, 4px);
  }
  .py3-s {
    padding-top: var(--spacing-3, 8px);
    padding-bottom: var(--spacing-3, 8px);
  }
  .py4-s {
    padding-top: var(--spacing-4, 16px);
    padding-bottom: var(--spacing-4, 16px);
  }
  .py5-s {
    padding-top: var(--spacing-5, 32px);
    padding-bottom: var(--spacing-5, 32px);
  }
  .py6-s {
    padding-top: var(--spacing-6, 64px);
    padding-bottom: var(--spacing-6, 64px);
  }
  .py7-s {
    padding-top: var(--spacing-7, 128px);
    padding-bottom: var(--spacing-7, 128px);
  }
  .py8-s {
    padding-top: var(--spacing-8, 256px);
    padding-bottom: var(--spacing-8, 256px);
  }
  .py9-s {
    padding-top: var(--spacing-9, 512px);
    padding-bottom: var(--spacing-9, 512px);
  }

  .px0-s {
    padding-left: var(--spacing-0, 0);
    padding-right: var(--spacing-0, 0);
  }
  .px1-s {
    padding-left: var(--spacing-1, 2px);
    padding-right: var(--spacing-1, 2px);
  }
  .px2-s {
    padding-left: var(--spacing-2, 4px);
    padding-right: var(--spacing-2, 4px);
  }
  .px3-s {
    padding-left: var(--spacing-3, 8px);
    padding-right: var(--spacing-3, 8px);
  }
  .px4-s {
    padding-left: var(--spacing-4, 16px);
    padding-right: var(--spacing-4, 16px);
  }
  .px5-s {
    padding-left: var(--spacing-5, 32px);
    padding-right: var(--spacing-5, 32px);
  }
  .px6-s {
    padding-left: var(--spacing-6, 64px);
    padding-right: var(--spacing-6, 64px);
  }
  .px7-s {
    padding-left: var(--spacing-7, 128px);
    padding-right: var(--spacing-7, 128px);
  }
  .px8-s {
    padding-left: var(--spacing-8, 256px);
    padding-right: var(--spacing-8, 256px);
  }
  .px9-s {
    padding-left: var(--spacing-9, 512px);
    padding-right: var(--spacing-9, 512px);
  }

  .m0-s  {  margin: var(--spacing-0, 0); }
  .m1-s {  margin: var(--spacing-1, 2px); }
  .m2-s {  margin: var(--spacing-2, 4px); }
  .m3-s  {  margin: var(--spacing-3, 8px); }
  .m4-s  {  margin: var(--spacing-4, 16px); }
  .m5-s  {  margin: var(--spacing-5, 32px); }
  .m6-s  {  margin: var(--spacing-6, 64px); }
  .m7-s {  margin: var(--spacing-7, 128px); }
  .m8-s { margin: var(--spacing-8, 256px); }
  .m9-s { margin: var(--spacing-9, 512px); }

  .ml0-s  {  margin-left: var(--spacing-0, 0); }
  .ml1-s {  margin-left: var(--spacing-1, 2px); }
  .ml2-s {  margin-left: var(--spacing-2, 4px); }
  .ml3-s  {  margin-left: var(--spacing-3, 8px); }
  .ml4-s  {  margin-left: var(--spacing-4, 16px); }
  .ml5-s  {  margin-left: var(--spacing-5, 32px); }
  .ml6-s  {  margin-left: var(--spacing-6, 64px); }
  .ml7-s {  margin-left: var(--spacing-7, 128px); }
  .ml8-s { margin-left: var(--spacing-8, 256px); }
  .ml9-s { margin-left: var(--spacing-9, 512px); }

  .mr0-s  {  margin-right: var(--spacing-0, 0); }
  .mr1-s {  margin-right: var(--spacing-1, 2px); }
  .mr2-s {  margin-right: var(--spacing-2, 4px); }
  .mr3-s  {  margin-right: var(--spacing-3, 8px); }
  .mr4-s  {  margin-right: var(--spacing-4, 16px); }
  .mr5-s  {  margin-right: var(--spacing-5, 32px); }
  .mr6-s  {  margin-right: var(--spacing-6, 64px); }
  .mr7-s {  margin-right: var(--spacing-7, 128px); }
  .mr8-s { margin-right: var(--spacing-8, 256px); }
  .mr9-s { margin-right: var(--spacing-9, 512px); }

  .mb0-s  {  margin-bottom: var(--spacing-0, 0); }
  .mb1-s {  margin-bottom: var(--spacing-1, 2px); }
  .mb2-s {  margin-bottom: var(--spacing-2, 4px); }
  .mb3-s  {  margin-bottom: var(--spacing-3, 8px); }
  .mb4-s  {  margin-bottom: var(--spacing-4, 16px); }
  .mb5-s  {  margin-bottom: var(--spacing-5, 32px); }
  .mb6-s  {  margin-bottom: var(--spacing-6, 64px); }
  .mb7-s {  margin-bottom: var(--spacing-7, 128px); }
  .mb8-s {  margin-bottom: var(--spacing-8, 256px); }
  .mb9-s { margin-bottom: var(--spacing-9, 512px); }

  .mt0-s  {  margin-top: var(--spacing-0, 0); }
  .mt1-s  {  margin-top: var(--spacing-1, 2px); }
  .mt2-s {  margin-top: var(--spacing-2, 4px); }
  .mt3-s  {  margin-top: var(--spacing-3, 8px); }
  .mt4-s  {  margin-top: var(--spacing-4, 16px); }
  .mt5-s  {  margin-top: var(--spacing-5, 32px); }
  .mt6-s  {  margin-top: var(--spacing-6, 64px); }
  .mt7-s {  margin-top: var(--spacing-7, 128px); }
  .mt8-s { margin-top: var(--spacing-8, 256px); }
  .mt9-s { margin-top: var(--spacing-9, 512px); }

  .my0-s   {
    margin-top: var(--spacing-0, 0);
    margin-bottom: var(--spacing-0, 0);
  }
  .my1-s  {
    margin-top: var(--spacing-1, 2px);
    margin-bottom: var(--spacing-1, 2px);
  }
  .my2-s  {
    margin-top: var(--spacing-2, 4px);
    margin-bottom: var(--spacing-2, 4px);
  }
  .my3-s   {
    margin-top: var(--spacing-3, 8px);
    margin-bottom: var(--spacing-3, 8px);
  }
  .my4-s   {
    margin-top: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-4, 16px);
  }
  .my5-s   {
    margin-top: var(--spacing-5, 32px);
    margin-bottom: var(--spacing-5, 32px);
  }
  .my6-s   {
    margin-top: var(--spacing-6, 64px);
    margin-bottom: var(--spacing-6, 64px);
  }
  .my7-s  {
    margin-top: var(--spacing-7, 128px);
    margin-bottom: var(--spacing-7, 128px);
  }
  .my8-s  {
    margin-top: var(--spacing-8, 256px);
    margin-bottom: var(--spacing-8, 256px);
  }
  .my9-s  {
    margin-top: var(--spacing-9, 512px);
    margin-bottom: var(--spacing-9, 512px);
  }

  .mx0-s   {
    margin-left: var(--spacing-0, 0);
    margin-right: var(--spacing-0, 0);
  }
  .mx1-s   {
    margin-left: var(--spacing-1, 2px);
    margin-right: var(--spacing-1, 2px);
  }
  .mx2-s   {
    margin-left: var(--spacing-2, 4px);
    margin-right: var(--spacing-2, 4px);
  }
  .mx3-s   {
    margin-left: var(--spacing-3, 8px);
    margin-right: var(--spacing-3, 8px);
  }
  .mx4-s   {
    margin-left: var(--spacing-4, 16px);
    margin-right: var(--spacing-4, 16px);
  }
  .mx5-s   {
    margin-left: var(--spacing-5, 32px);
    margin-right: var(--spacing-5, 32px);
  }
  .mx6-s   {
    margin-left: var(--spacing-6, 64px);
    margin-right: var(--spacing-6, 64px);
  }
  .mx7-s  {
    margin-left: var(--spacing-7, 128px);
    margin-right: var(--spacing-7, 128px);
  }
  .mx8-s  {
    margin-left: var(--spacing-8, 256px);
    margin-right: var(--spacing-8, 256px);
  }
  .mx9-s  {
    margin-left: var(--spacing-9, 512px);
    margin-right: var(--spacing-9, 512px);
  }

}

@container (min-width:48em) {
  .p0-m  {  padding: var(--spacing-0, 0); }
  .p1-m {  padding: var(--spacing-1, 2px); }
  .p2-m {  padding: var(--spacing-2, 4px); }
  .p3-m  {  padding: var(--spacing-3, 8px); }
  .p4-m  {  padding: var(--spacing-4, 16px); }
  .p5-m  {  padding: var(--spacing-5, 32px); }
  .p6-m  {  padding: var(--spacing-6, 64px); }
  .p7-m {  padding: var(--spacing-7, 128px); }
  .p8-m { padding: var(--spacing-8, 256px); }
  .p9-m { padding: var(--spacing-9, 512px); }

  .pl0-m  {  padding-left: var(--spacing-0, 0); }
  .pl1-m {  padding-left: var(--spacing-1, 2px); }
  .pl2-m {  padding-left: var(--spacing-2, 4px); }
  .pl3-m  {  padding-left: var(--spacing-3, 8px); }
  .pl4-m  {  padding-left: var(--spacing-4, 16px); }
  .pl5-m  {  padding-left: var(--spacing-5, 32px); }
  .pl6-m  {  padding-left: var(--spacing-6, 64px); }
  .pl7-m {  padding-left: var(--spacing-7, 128px); }
  .pl8-m { padding-left: var(--spacing-8, 256px); }
  .pl9-m { padding-left: var(--spacing-9, 512px); }

  .pr0-m  {  padding-right: var(--spacing-0, 0); }
  .pr1-m  {  padding-right: var(--spacing-1, 2px); }
  .pr2-m {  padding-right: var(--spacing-2, 4px); }
  .pr3-m  {  padding-right: var(--spacing-3, 8px); }
  .pr4-m  {  padding-right: var(--spacing-4, 16px); }
  .pr5-m  {  padding-right: var(--spacing-5, 32px); }
  .pr6-m  {  padding-right: var(--spacing-6, 64px); }
  .pr7-m {  padding-right: var(--spacing-7, 128px); }
  .pr8-m { padding-right: var(--spacing-8, 256px); }
  .pr9-m { padding-right: var(--spacing-9, 512px); }

  .pb0-m  {  padding-bottom: var(--spacing-0, 0); }
  .pb1-m {  padding-bottom: var(--spacing-1, 2px); }
  .pb2-m {  padding-bottom: var(--spacing-2, 4px); }
  .pb3-m  {  padding-bottom: var(--spacing-3, 8px); }
  .pb4-m  {  padding-bottom: var(--spacing-4, 16px); }
  .pb5-m  {  padding-bottom: var(--spacing-5, 32px); }
  .pb6-m  {  padding-bottom: var(--spacing-6, 64px); }
  .pb7-m {  padding-bottom: var(--spacing-7, 128px); }
  .pb8-m { padding-bottom: var(--spacing-8, 256px); }
  .pb9-m { padding-bottom: var(--spacing-9, 512px); }

  .pt0-m  {  padding-top: var(--spacing-0, 0); }
  .pt1-m {  padding-top: var(--spacing-1, 2px); }
  .pt2-m {  padding-top: var(--spacing-2, 4px); }
  .pt3-m  {  padding-top: var(--spacing-3, 8px); }
  .pt4-m  {  padding-top: var(--spacing-4, 16px); }
  .pt5-m  {  padding-top: var(--spacing-5, 32px); }
  .pt6-m  {  padding-top: var(--spacing-6, 64px); }
  .pt7-m {  padding-top: var(--spacing-7, 128px); }
  .pt8-m { padding-top: var(--spacing-8, 256px); }
  .pt9-m { padding-top: var(--spacing-9, 512px); }

  .py0-m {
    padding-top: var(--spacing-0, 0);
    padding-bottom: var(--spacing-0, 0);
  }
  .py1-m {
    padding-top: var(--spacing-1, 2px);
    padding-bottom: var(--spacing-1, 2px);
  }
  .py2-m {
    padding-top: var(--spacing-2, 4px);
    padding-bottom: var(--spacing-2, 4px);
  }
  .py3-m {
    padding-top: var(--spacing-3, 8px);
    padding-bottom: var(--spacing-3, 8px);
  }
  .py4-m {
    padding-top: var(--spacing-4, 16px);
    padding-bottom: var(--spacing-4, 16px);
  }
  .py5-m {
    padding-top: var(--spacing-5, 32px);
    padding-bottom: var(--spacing-5, 32px);
  }
  .py6-m {
    padding-top: var(--spacing-6, 64px);
    padding-bottom: var(--spacing-6, 64px);
  }
  .py7-m {
    padding-top: var(--spacing-7, 128px);
    padding-bottom: var(--spacing-7, 128px);
  }
  .py8-m {
    padding-top: var(--spacing-8, 256px);
    padding-bottom: var(--spacing-8, 256px);
  }
  .py9-m {
    padding-top: var(--spacing-9, 512px);
    padding-bottom: var(--spacing-9, 512px);
  }

  .px0-m {
    padding-left: var(--spacing-0, 0);
    padding-right: var(--spacing-0, 0);
  }
  .px1-m {
    padding-left: var(--spacing-1, 2px);
    padding-right: var(--spacing-1, 2px);
  }
  .px2-m {
    padding-left: var(--spacing-2, 4px);
    padding-right: var(--spacing-2, 4px);
  }
  .px3-m {
    padding-left: var(--spacing-3, 8px);
    padding-right: var(--spacing-3, 8px);
  }
  .px4-m {
    padding-left: var(--spacing-4, 16px);
    padding-right: var(--spacing-4, 16px);
  }
  .px5-m {
    padding-left: var(--spacing-5, 32px);
    padding-right: var(--spacing-5, 32px);
  }
  .px6-m {
    padding-left: var(--spacing-6, 64px);
    padding-right: var(--spacing-6, 64px);
  }
  .px7-m {
    padding-left: var(--spacing-7, 128px);
    padding-right: var(--spacing-7, 128px);
  }
  .px8-m {
    padding-left: var(--spacing-8, 256px);
    padding-right: var(--spacing-8, 256px);
  }
  .px9-m {
    padding-left: var(--spacing-9, 512px);
    padding-right: var(--spacing-9, 512px);
  }

  .m0-m  {  margin: var(--spacing-0, 0); }
  .m1-m {  margin: var(--spacing-1, 2px); }
  .m2-m {  margin: var(--spacing-2, 4px); }
  .m3-m  {  margin: var(--spacing-3, 8px); }
  .m4-m  {  margin: var(--spacing-4, 16px); }
  .m5-m  {  margin: var(--spacing-5, 32px); }
  .m6-m  {  margin: var(--spacing-6, 64px); }
  .m7-m {  margin: var(--spacing-7, 128px); }
  .m8-m { margin: var(--spacing-8, 256px); }
  .m9-m { margin: var(--spacing-9, 512px); }

  .ml0-m  {  margin-left: var(--spacing-0, 0); }
  .ml1-m  {  margin-left: var(--spacing-1, 2px); }
  .ml2-m {  margin-left: var(--spacing-2, 4px); }
  .ml3-m  {  margin-left: var(--spacing-3, 8px); }
  .ml4-m  {  margin-left: var(--spacing-4, 16px); }
  .ml5-m  {  margin-left: var(--spacing-5, 32px); }
  .ml6-m  {  margin-left: var(--spacing-6, 64px); }
  .ml7-m {  margin-left: var(--spacing-7, 128px); }
  .ml8-m { margin-left: var(--spacing-8, 256px); }
  .ml9-m { margin-left: var(--spacing-9, 512px); }

  .mr0-m  {  margin-right: var(--spacing-0, 0); }
  .mr1-m {  margin-right: var(--spacing-1, 2px); }
  .mr2-m {  margin-right: var(--spacing-2, 4px); }
  .mr3-m  {  margin-right: var(--spacing-3, 8px); }
  .mr4-m  {  margin-right: var(--spacing-4, 16px); }
  .mr5-m  {  margin-right: var(--spacing-5, 32px); }
  .mr6-m  {  margin-right: var(--spacing-6, 64px); }
  .mr7-m {  margin-right: var(--spacing-7, 128px); }
  .mr8-m { margin-right: var(--spacing-8, 256px); }
  .mr9-m { margin-right: var(--spacing-9, 512px); }

  .mb0-m  {  margin-bottom: var(--spacing-0, 0); }
  .mb1-m {  margin-bottom: var(--spacing-1, 2px); }
  .mb2-m {  margin-bottom: var(--spacing-2, 4px); }
  .mb3-m  {  margin-bottom: var(--spacing-3, 8px); }
  .mb4-m  {  margin-bottom: var(--spacing-4, 16px); }
  .mb5-m  {  margin-bottom: var(--spacing-5, 32px); }
  .mb6-m  {  margin-bottom: var(--spacing-6, 64px); }
  .mb7-m {  margin-bottom: var(--spacing-7, 128px); }
  .mb8-m { margin-bottom: var(--spacing-8, 256px); }
  .mb9-m { margin-bottom: var(--spacing-9, 512px); }

  .mt0-m  {  margin-top: var(--spacing-0, 0); }
  .mt1-m {  margin-top: var(--spacing-1, 2px); }
  .mt2-m {  margin-top: var(--spacing-2, 4px); }
  .mt3-m  {  margin-top: var(--spacing-3, 8px); }
  .mt4-m  {  margin-top: var(--spacing-4, 16px); }
  .mt5-m  {  margin-top: var(--spacing-5, 32px); }
  .mt6-m  {  margin-top: var(--spacing-6, 64px); }
  .mt7-m {  margin-top: var(--spacing-7, 128px); }
  .mt8-m { margin-top: var(--spacing-8, 256px); }
  .mt9-m { margin-top: var(--spacing-9, 512px); }

  .my0-m {
    margin-top: var(--spacing-0, 0);
    margin-bottom: var(--spacing-0, 0);
  }
  .my1-m {
    margin-top: var(--spacing-1, 2px);
    margin-bottom: var(--spacing-1, 2px);
  }
  .my2-m {
    margin-top: var(--spacing-2, 4px);
    margin-bottom: var(--spacing-2, 4px);
  }
  .my3-m {
    margin-top: var(--spacing-3, 8px);
    margin-bottom: var(--spacing-3, 8px);
  }
  .my4-m {
    margin-top: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-4, 16px);
  }
  .my5-m {
    margin-top: var(--spacing-5, 32px);
    margin-bottom: var(--spacing-5, 32px);
  }
  .my6-m {
    margin-top: var(--spacing-6, 64px);
    margin-bottom: var(--spacing-6, 64px);
  }
  .my7-m {
    margin-top: var(--spacing-7, 128px);
    margin-bottom: var(--spacing-7, 128px);
  }
  .my8-m {
    margin-top: var(--spacing-8, 256px);
    margin-bottom: var(--spacing-8, 256px);
  }
  .my9-m {
    margin-top: var(--spacing-9, 512px);
    margin-bottom: var(--spacing-9, 512px);
  }

  .mx0-m {
    margin-left: var(--spacing-0, 0);
    margin-right: var(--spacing-0, 0);
  }
  .mx1-m {
    margin-left: var(--spacing-1, 2px);
    margin-right: var(--spacing-1, 2px);
  }
  .mx2-m {
    margin-left: var(--spacing-2, 4px);
    margin-right: var(--spacing-2, 4px);
  }
  .mx3-m {
    margin-left: var(--spacing-3, 8px);
    margin-right: var(--spacing-3, 8px);
  }
  .mx4-m {
    margin-left: var(--spacing-4, 16px);
    margin-right: var(--spacing-4, 16px);
  }
  .mx5-m {
    margin-left: var(--spacing-5, 32px);
    margin-right: var(--spacing-5, 32px);
  }
  .mx6-m {
    margin-left: var(--spacing-6, 64px);
    margin-right: var(--spacing-6, 64px);
  }
  .mx7-m {
    margin-left: var(--spacing-7, 128px);
    margin-right: var(--spacing-7, 128px);
  }
  .mx8-m {
    margin-left: var(--spacing-8, 256px);
    margin-right: var(--spacing-8, 256px);
  }
  .mx9-m {
    margin-left: var(--spacing-9, 512px);
    margin-right: var(--spacing-9, 512px);
  }

}

@container (min-width:64em) {
  .p0-l  {  padding: var(--spacing-0, 0); }
  .p1-l {  padding: var(--spacing-1, 2px); }
  .p2-l {  padding: var(--spacing-2, 4px); }
  .p3-l  {  padding: var(--spacing-3, 8px); }
  .p4-l  {  padding: var(--spacing-4, 16px); }
  .p5-l  {  padding: var(--spacing-5, 32px); }
  .p6-l  {  padding: var(--spacing-6, 64px); }
  .p7-l {  padding: var(--spacing-7, 128px); }
  .p8-l { padding: var(--spacing-8, 256px); }
  .p9-l { padding: var(--spacing-9, 512px); }

  .pl0-l { padding-left: var(--spacing-0, 0); }
  .pl1-l { padding-left: var(--spacing-1, 2px); }
  .pl2-l { padding-left: var(--spacing-2, 4px); }
  .pl3-l { padding-left: var(--spacing-3, 8px); }
  .pl4-l { padding-left: var(--spacing-4, 16px); }
  .pl5-l { padding-left: var(--spacing-5, 32px); }
  .pl6-l { padding-left: var(--spacing-6, 64px); }
  .pl7-l { padding-left: var(--spacing-7, 128px); }
  .pl8-l { padding-left: var(--spacing-8, 256px); }
  .pl9-l { padding-left: var(--spacing-9, 512px); }

  .pr0-l { padding-right: var(--spacing-0, 0); }
  .pr1-l { padding-right: var(--spacing-1, 2px); }
  .pr2-l { padding-right: var(--spacing-2, 4px); }
  .pr3-l { padding-right: var(--spacing-3, 8px); }
  .pr4-l { padding-right: var(--spacing-4, 16px); }
  .pr5-l { padding-right: var(--spacing-5, 32px); }
  .pr6-l { padding-right: var(--spacing-6, 64px); }
  .pr7-l { padding-right: var(--spacing-7, 128px); }
  .pr8-l { padding-right: var(--spacing-8, 256px); }
  .pr9-l { padding-right: var(--spacing-9, 512px); }

  .pb0-l { padding-bottom: var(--spacing-0, 0); }
  .pb1-l { padding-bottom: var(--spacing-1, 2px); }
  .pb2-l { padding-bottom: var(--spacing-2, 4px); }
  .pb3-l { padding-bottom: var(--spacing-3, 8px); }
  .pb4-l { padding-bottom: var(--spacing-4, 16px); }
  .pb5-l { padding-bottom: var(--spacing-5, 32px); }
  .pb6-l { padding-bottom: var(--spacing-6, 64px); }
  .pb7-l { padding-bottom: var(--spacing-7, 128px); }
  .pb8-l { padding-bottom: var(--spacing-8, 256px); }
  .pb9-l { padding-bottom: var(--spacing-9, 512px); }

  .pt0-l { padding-top: var(--spacing-0, 0); }
  .pt1-l { padding-top: var(--spacing-1, 2px); }
  .pt2-l { padding-top: var(--spacing-2, 4px); }
  .pt3-l { padding-top: var(--spacing-3, 8px); }
  .pt4-l { padding-top: var(--spacing-4, 16px); }
  .pt5-l { padding-top: var(--spacing-5, 32px); }
  .pt6-l { padding-top: var(--spacing-6, 64px); }
  .pt7-l { padding-top: var(--spacing-7, 128px); }
  .pt8-l { padding-top: var(--spacing-8, 256px); }
  .pt9-l { padding-top: var(--spacing-9, 512px); }

  .py0-l {
    padding-top: var(--spacing-0, 0);
    padding-bottom: var(--spacing-0, 0);
  }
  .py1-l {
    padding-top: var(--spacing-1, 2px);
    padding-bottom: var(--spacing-1, 2px);
  }
  .py2-l {
    padding-top: var(--spacing-2, 4px);
    padding-bottom: var(--spacing-2, 4px);
  }
  .py3-l {
    padding-top: var(--spacing-3, 8px);
    padding-bottom: var(--spacing-3, 8px);
  }
  .py4-l {
    padding-top: var(--spacing-4, 16px);
    padding-bottom: var(--spacing-4, 16px);
  }
  .py5-l {
    padding-top: var(--spacing-5, 32px);
    padding-bottom: var(--spacing-5, 32px);
  }
  .py6-l {
    padding-top: var(--spacing-6, 64px);
    padding-bottom: var(--spacing-6, 64px);
  }
  .py7-l {
    padding-top: var(--spacing-7, 128px);
    padding-bottom: var(--spacing-7, 128px);
  }
  .py8-l {
    padding-top: var(--spacing-8, 256px);
    padding-bottom: var(--spacing-8, 256px);
  }
  .py9-l {
    padding-top: var(--spacing-9, 512px);
    padding-bottom: var(--spacing-9, 512px);
  }

  .px0-l {
    padding-left: var(--spacing-0, 0);
    padding-right: var(--spacing-0, 0);
  }
  .px1-l {
    padding-left: var(--spacing-1, 2px);
    padding-right: var(--spacing-1, 2px);
  }
  .px2-l {
    padding-left: var(--spacing-2, 4px);
    padding-right: var(--spacing-2, 4px);
  }
  .px3-l {
    padding-left: var(--spacing-3, 8px);
    padding-right: var(--spacing-3, 8px);
  }
  .px4-l {
    padding-left: var(--spacing-4, 16px);
    padding-right: var(--spacing-4, 16px);
  }
  .px5-l {
    padding-left: var(--spacing-5, 32px);
    padding-right: var(--spacing-5, 32px);
  }
  .px6-l {
    padding-left: var(--spacing-6, 64px);
    padding-right: var(--spacing-6, 64px);
  }
  .px7-l {
    padding-left: var(--spacing-7, 128px);
    padding-right: var(--spacing-7, 128px);
  }
  .px8-l {
    padding-left: var(--spacing-8, 256px);
    padding-right: var(--spacing-8, 256px);
  }
  .px9-l {
    padding-left: var(--spacing-9, 512px);
    padding-right: var(--spacing-9, 512px);
  }

  .m0-l  {  margin: var(--spacing-0, 0); }
  .m1-l {  margin: var(--spacing-1, 2px); }
  .m2-l {  margin: var(--spacing-2, 4px); }
  .m3-l  {  margin: var(--spacing-3, 8px); }
  .m4-l  {  margin: var(--spacing-4, 16px); }
  .m5-l  {  margin: var(--spacing-5, 32px); }
  .m6-l  {  margin: var(--spacing-6, 64px); }
  .m7-l {  margin: var(--spacing-7, 128px); }
  .m8-l { margin: var(--spacing-8, 256px); }
  .m9-l { margin: var(--spacing-9, 512px); }

  .ml0-l  {  margin-left: var(--spacing-0, 0); }
  .ml1-l {  margin-left: var(--spacing-1, 2px); }
  .ml2-l {  margin-left: var(--spacing-2, 4px); }
  .ml3-l  {  margin-left: var(--spacing-3, 8px); }
  .ml4-l  {  margin-left: var(--spacing-4, 16px); }
  .ml5-l  {  margin-left: var(--spacing-5, 32px); }
  .ml6-l  {  margin-left: var(--spacing-6, 64px); }
  .ml7-l {  margin-left: var(--spacing-7, 128px); }
  .ml8-l { margin-left: var(--spacing-8, 256px); }
  .ml9-l { margin-left: var(--spacing-9, 512px); }

  .mr0-l  {  margin-right: var(--spacing-0, 0); }
  .mr1-l {  margin-right: var(--spacing-1, 2px); }
  .mr2-l {  margin-right: var(--spacing-2, 4px); }
  .mr3-l  {  margin-right: var(--spacing-3, 8px); }
  .mr4-l  {  margin-right: var(--spacing-4, 16px); }
  .mr5-l  {  margin-right: var(--spacing-5, 32px); }
  .mr6-l  {  margin-right: var(--spacing-6, 64px); }
  .mr7-l {  margin-right: var(--spacing-7, 128px); }
  .mr8-l { margin-right: var(--spacing-8, 256px); }
  .mr9-l { margin-right: var(--spacing-9, 512px); }

  .mb0-l  {  margin-bottom: var(--spacing-0, 0); }
  .mb1-l {  margin-bottom: var(--spacing-1, 2px); }
  .mb2-l {  margin-bottom: var(--spacing-2, 4px); }
  .mb3-l  {  margin-bottom: var(--spacing-3, 8px); }
  .mb4-l  {  margin-bottom: var(--spacing-4, 16px); }
  .mb5-l  {  margin-bottom: var(--spacing-5, 32px); }
  .mb6-l  {  margin-bottom: var(--spacing-6, 64px); }
  .mb7-l {  margin-bottom: var(--spacing-7, 128px); }
  .mb8-l { margin-bottom: var(--spacing-8, 256px); }
  .mb9-l { margin-bottom: var(--spacing-9, 512px); }

  .mt0-l { margin-top: var(--spacing-0, 0); }
  .mt1-l { margin-top: var(--spacing-1, 2px); }
  .mt2-l { margin-top: var(--spacing-2, 4px); }
  .mt3-l { margin-top: var(--spacing-3, 8px); }
  .mt4-l { margin-top: var(--spacing-4, 16px); }
  .mt5-l { margin-top: var(--spacing-5, 32px); }
  .mt6-l { margin-top: var(--spacing-6, 64px); }
  .mt7-l { margin-top: var(--spacing-7, 128px); }
  .mt8-l { margin-top: var(--spacing-8, 256px); }
  .mt9-l { margin-top: var(--spacing-9, 512px); }

  .my0-l {
    margin-top: var(--spacing-0, 0);
    margin-bottom: var(--spacing-0, 0);
  }
  .my1-l {
    margin-top: var(--spacing-1, 2px);
    margin-bottom: var(--spacing-1, 2px);
  }
  .my2-l {
    margin-top: var(--spacing-2, 4px);
    margin-bottom: var(--spacing-2, 4px);
  }
  .my3-l {
    margin-top: var(--spacing-3, 8px);
    margin-bottom: var(--spacing-3, 8px);
  }
  .my4-l {
    margin-top: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-4, 16px);
  }
  .my5-l {
    margin-top: var(--spacing-5, 32px);
    margin-bottom: var(--spacing-5, 32px);
  }
  .my6-l {
    margin-top: var(--spacing-6, 64px);
    margin-bottom: var(--spacing-6, 64px);
  }
  .my7-l {
    margin-top: var(--spacing-7, 128px);
    margin-bottom: var(--spacing-7, 128px);
  }
  .my8-l {
    margin-top: var(--spacing-8, 256px);
    margin-bottom: var(--spacing-8, 256px);
  }
  .my9-l {
    margin-top: var(--spacing-9, 512px);
    margin-bottom: var(--spacing-9, 512px);
  }

  .mx0-l {
    margin-left: var(--spacing-0, 0);
    margin-right: var(--spacing-0, 0);
  }
  .mx1-l {
    margin-left: var(--spacing-1, 2px);
    margin-right: var(--spacing-1, 2px);
  }
  .mx2-l {
    margin-left: var(--spacing-2, 4px);
    margin-right: var(--spacing-2, 4px);
  }
  .mx3-l {
    margin-left: var(--spacing-3, 8px);
    margin-right: var(--spacing-3, 8px);
  }
  .mx4-l {
    margin-left: var(--spacing-4, 16px);
    margin-right: var(--spacing-4, 16px);
  }
  .mx5-l {
    margin-left: var(--spacing-5, 32px);
    margin-right: var(--spacing-5, 32px);
  }
  .mx6-l {
    margin-left: var(--spacing-6, 64px);
    margin-right: var(--spacing-6, 64px);
  }
  .mx7-l {
    margin-left: var(--spacing-7, 128px);
    margin-right: var(--spacing-7, 128px);
  }
  .mx8-l {
    margin-left: var(--spacing-8, 256px);
    margin-right: var(--spacing-8, 256px);
  }
  .mx9-l {
    margin-left: var(--spacing-9, 512px);
    margin-right: var(--spacing-9, 512px);
  }
}
/*
   NEGATIVE MARGINS

   Base:
     n = negative

   Modifiers:
     a = all
     t = top
     r = right
     b = bottom
     l = left

     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/



.na1 { margin: calc(-1 * var(--spacing-1)); }
.na2 { margin: calc(-1 * var(--spacing-2)); }
.na3 { margin: calc(-1 * var(--spacing-3)); }
.na4 { margin: calc(-1 * var(--spacing-4)); }
.na5 { margin: calc(-1 * var(--spacing-5)); }
.na6 { margin: calc(-1 * var(--spacing-6)); }
.na7 { margin: calc(-1 * var(--spacing-7)); }

.nl1 { margin-left: calc(-1 * var(--spacing-1)); }
.nl2 { margin-left: calc(-1 * var(--spacing-2)); }
.nl3 { margin-left: calc(-1 * var(--spacing-3)); }
.nl4 { margin-left: calc(-1 * var(--spacing-4)); }
.nl5 { margin-left: calc(-1 * var(--spacing-5)); }
.nl6 { margin-left: calc(-1 * var(--spacing-6)); }
.nl7 { margin-left: calc(-1 * var(--spacing-7)); }

.nr1 { margin-right: calc(-1 * var(--spacing-1)); }
.nr2 { margin-right: calc(-1 * var(--spacing-2)); }
.nr3 { margin-right: calc(-1 * var(--spacing-3)); }
.nr4 { margin-right: calc(-1 * var(--spacing-4)); }
.nr5 { margin-right: calc(-1 * var(--spacing-5)); }
.nr6 { margin-right: calc(-1 * var(--spacing-6)); }
.nr7 { margin-right: calc(-1 * var(--spacing-7)); }

.nb1 { margin-bottom: calc(-1 * var(--spacing-1)); }
.nb2 { margin-bottom: calc(-1 * var(--spacing-2)); }
.nb3 { margin-bottom: calc(-1 * var(--spacing-3)); }
.nb4 { margin-bottom: calc(-1 * var(--spacing-4)); }
.nb5 { margin-bottom: calc(-1 * var(--spacing-5)); }
.nb6 { margin-bottom: calc(-1 * var(--spacing-6)); }
.nb7 { margin-bottom: calc(-1 * var(--spacing-7)); }

.nt1 { margin-top: calc(-1 * var(--spacing-1)); }
.nt2 { margin-top: calc(-1 * var(--spacing-2)); }
.nt3 { margin-top: calc(-1 * var(--spacing-3)); }
.nt4 { margin-top: calc(-1 * var(--spacing-4)); }
.nt5 { margin-top: calc(-1 * var(--spacing-5)); }
.nt6 { margin-top: calc(-1 * var(--spacing-6)); }
.nt7 { margin-top: calc(-1 * var(--spacing-7)); }

@container (--breakpoint-2) {

  .na1-s { margin: calc(-1 * var(--spacing-1)); }
  .na2-s { margin: calc(-1 * var(--spacing-2)); }
  .na3-s { margin: calc(-1 * var(--spacing-3)); }
  .na4-s { margin: calc(-1 * var(--spacing-4)); }
  .na5-s { margin: calc(-1 * var(--spacing-5)); }
  .na6-s { margin: calc(-1 * var(--spacing-6)); }
  .na7-s { margin: calc(-1 * var(--spacing-7)); }

  .nl1-s { margin-left: calc(-1 * var(--spacing-1)); }
  .nl2-s { margin-left: calc(-1 * var(--spacing-2)); }
  .nl3-s { margin-left: calc(-1 * var(--spacing-3)); }
  .nl4-s { margin-left: calc(-1 * var(--spacing-4)); }
  .nl5-s { margin-left: calc(-1 * var(--spacing-5)); }
  .nl6-s { margin-left: calc(-1 * var(--spacing-6)); }
  .nl7-s { margin-left: calc(-1 * var(--spacing-7)); }

  .nr1-s { margin-right: calc(-1 * var(--spacing-1)); }
  .nr2-s { margin-right: calc(-1 * var(--spacing-2)); }
  .nr3-s { margin-right: calc(-1 * var(--spacing-3)); }
  .nr4-s { margin-right: calc(-1 * var(--spacing-4)); }
  .nr5-s { margin-right: calc(-1 * var(--spacing-5)); }
  .nr6-s { margin-right: calc(-1 * var(--spacing-6)); }
  .nr7-s { margin-right: calc(-1 * var(--spacing-7)); }

  .nb1-s { margin-bottom: calc(-1 * var(--spacing-1)); }
  .nb2-s { margin-bottom: calc(-1 * var(--spacing-2)); }
  .nb3-s { margin-bottom: calc(-1 * var(--spacing-3)); }
  .nb4-s { margin-bottom: calc(-1 * var(--spacing-4)); }
  .nb5-s { margin-bottom: calc(-1 * var(--spacing-5)); }
  .nb6-s { margin-bottom: calc(-1 * var(--spacing-6)); }
  .nb7-s { margin-bottom: calc(-1 * var(--spacing-7)); }

  .nt1-s { margin-top: calc(-1 * var(--spacing-1)); }
  .nt2-s { margin-top: calc(-1 * var(--spacing-2)); }
  .nt3-s { margin-top: calc(-1 * var(--spacing-3)); }
  .nt4-s { margin-top: calc(-1 * var(--spacing-4)); }
  .nt5-s { margin-top: calc(-1 * var(--spacing-5)); }
  .nt6-s { margin-top: calc(-1 * var(--spacing-6)); }
  .nt7-s { margin-top: calc(-1 * var(--spacing-7)); }

}

@container (--breakpoint-3) {
  .na1-m { margin: calc(-1 * var(--spacing-1)); }
  .na2-m { margin: calc(-1 * var(--spacing-2)); }
  .na3-m { margin: calc(-1 * var(--spacing-3)); }
  .na4-m { margin: calc(-1 * var(--spacing-4)); }
  .na5-m { margin: calc(-1 * var(--spacing-5)); }
  .na6-m { margin: calc(-1 * var(--spacing-6)); }
  .na7-m { margin: calc(-1 * var(--spacing-7)); }

  .nl1-m { margin-left: calc(-1 * var(--spacing-1)); }
  .nl2-m { margin-left: calc(-1 * var(--spacing-2)); }
  .nl3-m { margin-left: calc(-1 * var(--spacing-3)); }
  .nl4-m { margin-left: calc(-1 * var(--spacing-4)); }
  .nl5-m { margin-left: calc(-1 * var(--spacing-5)); }
  .nl6-m { margin-left: calc(-1 * var(--spacing-6)); }
  .nl7-m { margin-left: calc(-1 * var(--spacing-7)); }

  .nr1-m { margin-right: calc(-1 * var(--spacing-1)); }
  .nr2-m { margin-right: calc(-1 * var(--spacing-2)); }
  .nr3-m { margin-right: calc(-1 * var(--spacing-3)); }
  .nr4-m { margin-right: calc(-1 * var(--spacing-4)); }
  .nr5-m { margin-right: calc(-1 * var(--spacing-5)); }
  .nr6-m { margin-right: calc(-1 * var(--spacing-6)); }
  .nr7-m { margin-right: calc(-1 * var(--spacing-7)); }

  .nb1-m { margin-bottom: calc(-1 * var(--spacing-1)); }
  .nb2-m { margin-bottom: calc(-1 * var(--spacing-2)); }
  .nb3-m { margin-bottom: calc(-1 * var(--spacing-3)); }
  .nb4-m { margin-bottom: calc(-1 * var(--spacing-4)); }
  .nb5-m { margin-bottom: calc(-1 * var(--spacing-5)); }
  .nb6-m { margin-bottom: calc(-1 * var(--spacing-6)); }
  .nb7-m { margin-bottom: calc(-1 * var(--spacing-7)); }

  .nt1-m { margin-top: calc(-1 * var(--spacing-1)); }
  .nt2-m { margin-top: calc(-1 * var(--spacing-2)); }
  .nt3-m { margin-top: calc(-1 * var(--spacing-3)); }
  .nt4-m { margin-top: calc(-1 * var(--spacing-4)); }
  .nt5-m { margin-top: calc(-1 * var(--spacing-5)); }
  .nt6-m { margin-top: calc(-1 * var(--spacing-6)); }
  .nt7-m { margin-top: calc(-1 * var(--spacing-7)); }

}

@container (min-width:64em) {
  .na1-l { margin: calc(-1 * var(--spacing-1)); }
  .na2-l { margin: calc(-1 * var(--spacing-2)); }
  .na3-l { margin: calc(-1 * var(--spacing-3)); }
  .na4-l { margin: calc(-1 * var(--spacing-4)); }
  .na5-l { margin: calc(-1 * var(--spacing-5)); }
  .na6-l { margin: calc(-1 * var(--spacing-6)); }
  .na7-l { margin: calc(-1 * var(--spacing-7)); }

  .nl1-l { margin-left: calc(-1 * var(--spacing-1)); }
  .nl2-l { margin-left: calc(-1 * var(--spacing-2)); }
  .nl3-l { margin-left: calc(-1 * var(--spacing-3)); }
  .nl4-l { margin-left: calc(-1 * var(--spacing-4)); }
  .nl5-l { margin-left: calc(-1 * var(--spacing-5)); }
  .nl6-l { margin-left: calc(-1 * var(--spacing-6)); }
  .nl7-l { margin-left: calc(-1 * var(--spacing-7)); }

  .nr1-l { margin-right: calc(-1 * var(--spacing-1)); }
  .nr2-l { margin-right: calc(-1 * var(--spacing-2)); }
  .nr3-l { margin-right: calc(-1 * var(--spacing-3)); }
  .nr4-l { margin-right: calc(-1 * var(--spacing-4)); }
  .nr5-l { margin-right: calc(-1 * var(--spacing-5)); }
  .nr6-l { margin-right: calc(-1 * var(--spacing-6)); }
  .nr7-l { margin-right: calc(-1 * var(--spacing-7)); }

  .nb1-l { margin-bottom: calc(-1 * var(--spacing-1)); }
  .nb2-l { margin-bottom: calc(-1 * var(--spacing-2)); }
  .nb3-l { margin-bottom: calc(-1 * var(--spacing-3)); }
  .nb4-l { margin-bottom: calc(-1 * var(--spacing-4)); }
  .nb5-l { margin-bottom: calc(-1 * var(--spacing-5)); }
  .nb6-l { margin-bottom: calc(-1 * var(--spacing-6)); }
  .nb7-l { margin-bottom: calc(-1 * var(--spacing-7)); }

  .nt1-l { margin-top: calc(-1 * var(--spacing-1)); }
  .nt2-l { margin-top: calc(-1 * var(--spacing-2)); }
  .nt3-l { margin-top: calc(-1 * var(--spacing-3)); }
  .nt4-l { margin-top: calc(-1 * var(--spacing-4)); }
  .nt5-l { margin-top: calc(-1 * var(--spacing-5)); }
  .nt6-l { margin-top: calc(-1 * var(--spacing-6)); }
  .nt7-l { margin-top: calc(-1 * var(--spacing-7)); }
}
/*

  TABLES

*/

.collapse {
    border-collapse: collapse;
    border-spacing: 0;
}

.striped--light:nth-child(odd) {
  background-color: var(--gray-10);
}

.striped--dark:nth-child(odd) {
  background-color: var(--gray-0);
}
/*

   TEXT DECORATION


   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.strike       { text-decoration: line-through; }
.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }
/*

  TEXT ALIGN

  Base
    t = text-align

  Modifiers
    l = left
    r = right
    c = center
    j = justify

  Media Query Extensions:
    -s = small
    -m  = medium
    -l  = large

*/

.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }
.tj  { text-align: justify; }

@container (min-width:30em) {
  .tl-s  { text-align: left; }
  .tr-s  { text-align: right; }
  .tc-s  { text-align: center; }
  .tj-s  { text-align: justify; }
}

@container (min-width:48em) {
  .tl-m  { text-align: left; }
  .tr-m  { text-align: right; }
  .tc-m  { text-align: center; }
  .tj-m  { text-align: justify; }
}

@container (min-width:64em) {
  .tl-l  { text-align: left; }
  .tr-l  { text-align: right; }
  .tc-l  { text-align: center; }
  .tj-l  { text-align: justify; }
}
/*

   TEXT TRANSFORM

   Base:
     tt = text-transform

   Modifiers
     c = capitalize
     l = lowercase
     u = uppercase
     n = none

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }

@container (min-width:30em) {
  .ttc-s { text-transform: capitalize; }
  .ttl-s { text-transform: lowercase; }
  .ttu-s { text-transform: uppercase; }
  .ttn-s { text-transform: none; }
}

@container (min-width:48em) {
  .ttc-m { text-transform: capitalize; }
  .ttl-m { text-transform: lowercase; }
  .ttu-m { text-transform: uppercase; }
  .ttn-m { text-transform: none; }
}

@container (min-width:64em) {
  .ttc-l { text-transform: capitalize; }
  .ttl-l { text-transform: lowercase; }
  .ttu-l { text-transform: uppercase; }
  .ttn-l { text-transform: none; }
}
/* 

   TYPE SCALE

   Base:
    f = font-size

   Modifiers
     1 = 1st step in size scale
     2 = 2nd step in size scale
     3 = 3rd step in size scale
     4 = 4th step in size scale
     5 = 5th step in size scale
     6 = 6th step in size scale
     7 = 7th step in size scale
     8 = 8th step in size scale
     9 = 9th step in size scale
     10 = 10th step in size scale
     11 = 11th step in size scale
     12 = 12th step in size scale

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large
*/

/* Type Scale */

.f1 { font-size:  var(--font-size-1, .75rem); }
.f2 { font-size:  var(--font-size-2, .875rem); }
.f3 { font-size:  var(--font-size-3, 1rem); }
.f4 { font-size:  var(--font-size-4, 1.125rem); }
.f5 { font-size:  var(--font-size-5, 1.25rem); }
.f6 { font-size:  var(--font-size-6, 1.5rem); }
.f7 { font-size:  var(--font-size-7, 2rem); } 
.f8 { font-size:  var(--font-size-8, 3rem); } 
.f9 { font-size:  var(--font-size-9, 4rem); } 
.f10 { font-size: var(--font-size-10, 6rem); } 
.f11 { font-size: var(--font-size-11, 8rem); } 
.f12 { font-size: var(--font-size-12, 12rem); } 


@container (min-width:30em){
  .f1-s { font-size:  var(--font-size-1, .75rem); }
  .f2-s { font-size:  var(--font-size-2, .875rem); }
  .f3-s { font-size:  var(--font-size-3, 1rem); }
  .f4-s { font-size:  var(--font-size-4, 1.125rem); }
  .f5-s { font-size:  var(--font-size-5, 1.25rem); }
  .f6-s { font-size:  var(--font-size-6, 1.5rem); }
  .f7-s { font-size:  var(--font-size-7, 2rem); } 
  .f8-s { font-size:  var(--font-size-8, 3rem); } 
  .f9-s { font-size:  var(--font-size-9, 4rem); } 
  .f10-s { font-size: var(--font-size-10, 6rem); } 
  .f11-s { font-size: var(--font-size-11, 8rem); } 
  .f12-s { font-size: var(--font-size-12, 12rem); } 
}

@container (min-width:48em) {
  .f1-m { font-size:  var(--font-size-1, .75rem); }
  .f2-m { font-size:  var(--font-size-2, .875rem); }
  .f3-m { font-size:  var(--font-size-3, 1rem); }
  .f4-m { font-size:  var(--font-size-4, 1.125rem); }
  .f5-m { font-size:  var(--font-size-5, 1.25rem); }
  .f6-m { font-size:  var(--font-size-6, 1.5rem); }
  .f7-m { font-size:  var(--font-size-7, 2rem); } 
  .f8-m { font-size:  var(--font-size-8, 3rem); } 
  .f9-m { font-size:  var(--font-size-9, 4rem); } 
  .f10-m { font-size: var(--font-size-10, 6rem); } 
  .f11-m { font-size: var(--font-size-11, 8rem); } 
  .f12-m { font-size: var(--font-size-12, 12rem); } 
}

@container (min-width:64em) {
  .f1-l { font-size:  var(--font-size-1, .75rem); }
  .f2-l { font-size:  var(--font-size-2, .875rem); }
  .f3-l { font-size:  var(--font-size-3, 1rem); }
  .f4-l { font-size:  var(--font-size-4, 1.125rem); }
  .f5-l { font-size:  var(--font-size-5, 1.25rem); }
  .f6-l { font-size:  var(--font-size-6, 1.5rem); }
  .f7-l { font-size:  var(--font-size-7, 2rem); } 
  .f8-l { font-size:  var(--font-size-8, 3rem); } 
  .f9-l { font-size:  var(--font-size-9, 4rem); } 
  .f10-l { font-size: var(--font-size-10, 6rem); } 
  .f11-l { font-size: var(--font-size-11, 8rem); } 
  .f12-l { font-size: var(--font-size-12, 12rem); } 
}
/*

   TYPOGRAPHY

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/


/* Measure is limited to 66 characters */
.measure {
  max-width: var(--measure, 66ch);
}

/* Measure is limited to ~80 characters */
.measure-wide {
  max-width: var(--measure-wide, 80ch);
}

/* Measure is limited to 45 characters */
.measure-narrow {
  max-width: var(--measure-narrow, 45ch);
}

/* Book paragraph style - paragraphs are indented with no vertical spacing. */
.indent {
  text-indent: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.small-caps {
  font-variant: small-caps;
}

/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container (min-width:30em) {
  .measure-s { max-width: var(--measure, 66ch); }
  .measure-wide-s { max-width: var(--measure-wide, 80ch); }
  .measure-narrow-s { max-width: var(--measure-narrow, 45ch); }
  .small-caps-s { font-variant: small-caps; }
  .indent-s {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .truncate-s {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@container (min-width:48em) {
  .measure-m { max-width: var(--measure, 66ch); }
  .measure-wide-m { max-width: var(--measure-wide, 80ch); }
  .measure-narrow-m { max-width: var(--measure-narrow, 45ch); }
  .small-caps-m { font-variant: small-caps; }
  .indent-m {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .truncate-m {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@container (min-width:64em) {
  .measure-l { max-width: var(--measure, 66ch); }
  .measure-wide-l { max-width: var(--measure-wide, 80ch); }
  .measure-narrow-l { max-width: var(--measure-narrow, 45ch); }
  .small-caps-l { font-variant: small-caps; }
  .indent-l {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .truncate-l {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/*

   UTILITIES

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.center {
  margin-right: auto;
  margin-left: auto;
}

.mr-auto { margin-right: auto; }
.ml-auto { margin-left:  auto; }

@container (min-width:30em){
  .center-s {
    margin-right: auto;
    margin-left: auto;
  }
  .mr-auto-s { margin-right: auto; }
  .ml-auto-s { margin-left:  auto; }
}

@container (min-width:48em){
  .center-m {
    margin-right: auto;
    margin-left: auto;
  }
  .mr-auto-m { margin-right: auto; }
  .ml-auto-m { margin-left:  auto; }
}

@container (min-width:64em){
  .center-l {
    margin-right: auto;
    margin-left: auto;
  }
  .mr-auto-l { margin-right: auto; }
  .ml-auto-l { margin-left:  auto; }
}
/*

   VISIBILITY

   Media Query Extensions:
     -s  = small
     -m  = medium
     -l  = large

*/


/*
    Text that is hidden but accessible
    Ref: https://accessibility.18f.gov/hidden-content/
*/

.clip {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@container (min-width:30em) {
  .clip-s {
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

@container (min-width:48em) {
  .clip-m {
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

@container (min-width:64em) {
  .clip-l {
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
/*

   WHITE SPACE

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/


.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre-wrap { white-space: pre-wrap; }
.pre { white-space: pre; }

@container (min-width:30em) {
  .ws-normal-s { white-space: normal; }
  .nowrap-s { white-space: nowrap; }
  .pre-s { white-space: pre; }
}

@container (min-width:48em) {
  .ws-normal-m { white-space: normal; }
  .nowrap-m { white-space: nowrap; }
  .pre-m { white-space: pre; }
}

@container (min-width:64em) {
  .ws-normal-l { white-space: normal; }
  .nowrap-l { white-space: nowrap; }
  .pre-l { white-space: pre; }
}
/*

   VERTICAL ALIGN

   Media Query Extensions:
     -s = small
     -m  = medium
     -l  = large

*/

.v-base     { vertical-align: baseline; }
.v-mid      { vertical-align: middle; }
.v-top      { vertical-align: top; }
.v-btm      { vertical-align: bottom; }

@container (min-width:30em) {
  .v-base-s     { vertical-align: baseline; }
  .v-mid-s      { vertical-align: middle; }
  .v-top-s      { vertical-align: top; }
  .v-btm-s      { vertical-align: bottom; }
}

@container (min-width:48em) {
  .v-base-m     { vertical-align: baseline; }
  .v-mid-m      { vertical-align: middle; }
  .v-top-m      { vertical-align: top; }
  .v-btm-m      { vertical-align: bottom; }
}

@container (min-width:64em) {
  .v-base-l     { vertical-align: baseline; }
  .v-mid-l      { vertical-align: middle; }
  .v-top-l      { vertical-align: top; }
  .v-btm-l      { vertical-align: bottom; }
}
/*

  HOVER EFFECTS

    - Dim
    - Glow
    - Hide Child
    - Underline text
    - Grow
    - Pointer
    - Shadow
    - Colors

*/

/*

  Dim element on hover by adding the dim class.

*/
.dim {
  opacity: 1;
  transition: opacity .15s ease-in;
}
.dim:hover,
.dim:focus {
  opacity: .5;
  transition: opacity .15s ease-in;
}
.dim:active {
  opacity: .8; 
  transition: opacity .15s ease-out;
}

/*

  Animate opacity to 100% on hover by adding the glow class.

     on intersection(intersecting) having threshold 0.5
     if intersecting transition *opacity to :o
     else transition *opacity to 0
     

*/
.glow {
  transition: opacity .15s ease-in;
}
.glow:hover,
.glow:focus {
  opacity: 1;
  transition: opacity .15s ease-in;
}

/*

  Hide child & reveal on hover:

  Put the hide-child class on a parent element and any nested element with the
  child class will be hidden and displayed on hover or focus.

  <div class="hide-child">
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
  </div>
*/

.hide-child .child {
  opacity: 0;
  transition: opacity .15s ease-in;
}
.hide-child:hover  .child,
.hide-child:focus  .child,
.hide-child:active .child {
  opacity: 1;
  transition: opacity .15s ease-in;
}

.underline-hover:hover,
.underline-hover:focus {
  text-decoration: underline;
}

/* Can combine this with overflow-hidden to make background images grow on hover
 * even if you are using background-size: cover */

.grow {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.25s ease-out;
}

.grow:hover,
.grow:focus {
  transform: scale(1.05);
}

.grow:active {
  transform: scale(.90);
}

.grow-large {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .25s ease-in-out;
}

.grow-large:hover,
.grow-large:focus {
  transform: scale(1.2);
}

.grow-large:active {
  transform: scale(.95);
}

/* Add pointer on hover */

.pointer {
  cursor: pointer;
}

.trans-all {
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 
 * TODO: Test and rename
   Add shadow on hover.

   Performant box-shadow animation pattern from 
   Performant box-shadow animation

.shadow-hover {
  cursor: pointer;
  position: relative;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.shadow-hover::after {
  content: '';
  box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.shadow-hover:hover::after,
.shadow-hover:focus::after {
  opacity: 1;
}
*/

.fun {
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c, #ffd200, #4facfe, #667eea);
    background-size: 400% 400%;
    animation: fun-gradient 3s ease infinite;
    color: white;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transform: scale(1.1) rotate(-2deg);
}
@keyframes fun-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Combine with classes in skins and skins-pseudo for 
 * many different transition possibilities. */

.trans-bg {
  transition: background-color .25s ease-in-out; 
}

.trans-color {
  transition: color .25s ease-in-out; 
}

.hover-filter-none:hover { filter: none; }

.hover-filter-blur-none:hover { filter: blur(0); }
.hover-filter-blur:hover { filter: blur(96px); }

.grayscale1-hover:hover, .greyscale1-hover:hover { filter: grayscale(0); }
.grayscale2-hover:hover, .greyscale2-hover:hover { filter: grayscale(50%); }
.grayscale3-hover:hover, .greyscale3-hover:hover { filter: grayscale(100%); }
/*

  Z-INDEX

  Base
    z = z-index

  Modifiers
    -0 = literal value 0
    -1 = literal value 1
    -2 = literal value 2
    -3 = literal value 3
    -4 = literal value 4
    -5 = literal value 5
    -999 = literal value 999
    -9999 = literal value 9999

    -max = largest accepted z-index value as integer

    -inherit = string value inherit
    -initial = string value initial
    -unset = string value unset

  MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
  Spec: http://www.w3.org/TR/CSS2/zindex.html
  Articles:
    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

  Tips on extending:
  There might be a time worth using negative z-index values.
  Or if you are using tachyons with another project, you might need to
  adjust these values to suit your needs.

*/

.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }

.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }

.z-max {
  z-index: 2147483647;
}

.z-inherit { z-index: inherit; }
.z-initial { z-index: initial; }
.z-unset { z-index: unset; }

/*

  STYLES

  Add custom styles here.

*/

@container (min-width:80em) {
    #readme-app > div.xu-active {
        /* transition: width .15s ease-out; */
        /* transition: width .15s ease-in; */
        width: 40%;
        filter: none;
        overflow-x: hidden;
        overflow-y: scroll;
        opacity: 1;
    }
}

@container (max-width:80em) {
    #readme-app > div.xu-active {
        /* transition: width .15s ease-out; */
        /* transition: width .15s ease-in; */
        width: 70%;
        filter: none;
        overflow-x: hidden;
        overflow-y: scroll;
        opacity: 1;
    }
}

@container (min-width:80em) {
    div.xu-previous {
        /* transition: width .15s ease-out; */
        /* transition: width .15s ease-in; */
        width: 25%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@container (max-width:80em) {
    div.xu-previous {
        /* transition: width .15s ease-out; */
        /* transition: width .15s ease-in; */
        width: 10%;
        filter: blur(4px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@container (min-width:80em) {
    div.xu-next {
        /* transition: width .15s ease-out; */
        /* transition: width .15s ease-in; */
        width: 25%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@container (max-width:80em) {
    div.xu-next {
        /* transition: width .15s ease-out; */
        /* transition: width .15s ease-in; */
        width: 10%;
        filter: blur(4px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* o8 glow truncate w-25-xl w-10 h7 blur2-s blur1-m */

/* Debugging */
/*

  DEBUG CHILDREN

  Just add the debug class to any element to see outlines on its
  children.

*/

.debug * { 
  --debug-color: 128 0 90;
  --debug-opacity: .8;
  outline: 1px solid rbg(var(--debug-color, 128 0 90) / (--debug-opacity, .8)); 
}
/* 

   DEBUG GRID

   Can be useful for debugging layout issues
   or helping to make sure things line up perfectly.
   Just tack this class onto a parent element

*/

.debug-grid {
  --grid-size: 16px; 
  --grid-color: var(--magenta-9);

  background-image: 
    repeating-linear-gradient(0deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)), 
    repeating-linear-gradient(90deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size));
  background-size: 100% var(--grid-size);
}

/* Uncomment out the line below to help debug layout issues */
/* @import './_debug'; */