/*! Skelet. v3.3.0 | MIT License | (c) 2021 Selekkt. | https://selekkt.dk/skelet/v3/ */
*,html,body {box-sizing:border-box}

/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
h1{font-size:2em;margin:.67em 0}
hr{box-sizing:content-box;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}
a{background:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
img{border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}

/* ------------------
  css variables
------------------ */
:root {
/** Colors */
    --primary: #007FFF;
    --green: #34C84A;
    --yellow: #FDBC40;
    --red: #FC615D;
    --blue: #007FFF;
    --white: #FFF;
    --black: #000;
    --light: #efefef;
    --dark: #181818;
    --shadow: rgba(10, 10, 10, 0.1);

    --linkColor: var(--primary);
    --linkHover: #3298ff;

    --bgColor: #FFF;
    --color: #000;
    --colorInverse: #FFF;
    --hColor: var(--color);

    --selectionBg: rgba(0,0,0,.95);
    --selectionText: #FFF;

    --codeBg: #f8f8f8;
    --codeColor: #000FFF;

    --hrColor: var(--boxBorderColor);
    --hrGradient: rgba(255, 255, 255, 0);

    /* typography */
    --fontFamily: "Inter", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", -apple-system, BlinkMacSystemFont, -system-ui, system-ui, sans-serif;
    --fontFamilyVar: "Inter var", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", -apple-system, BlinkMacSystemFont, -system-ui, system-ui, sans-serif;
    --hFontFamily: var(--fontFamily);

    --fontSize: 1.7rem;
    --fontLine: 1.6;
    --fontSpace: normal;
    --fontWeight: 400;

    --h1Size: 5.0rem;
    --h2Size: 4.2rem;
    --h3Size: 3.6rem;
    --h4Size: 3.0rem;
    --h5Size: 2.4rem;
    --h6Size: 1.8rem;

    --hSpace: normal;
    --hWeight: 600;

    --hLine: 1.5;
    --h1Line: var(--hLine);
    --h2Line: var(--hLine);
    --h3Line: var(--hLine);
    --h4Line: var(--hLine);
    --h5Line: var(--hLine);
    --h6Line: var(--hLine);

    /* other */
    --padding: 1rem;
    --margin: 1.5rem;
    --radius: 0.5rem;
    --borderWidth: 1px;
    --borderStyle: solid;
    --hrMargin: var(--margin);
    --pMargin: var(--margin) 0;

    /* input/textarea/tables etc. */
    --boxPadding: 1.15rem;
    --boxMargin: 0;
    --boxRadius: var(--radius);
    --boxBorderWidth: var(--borderWidth);
    --boxBorderStyle: var(--borderStyle);
    --boxFontSize: var(--fontSize);
    --boxHeight: 21px;

    --boxBg: #FEFEFE;
    --boxBgHover: var(--boxBg);
    --boxBgActive: var(--boxBg);
    --boxColor: var(--color);
    --boxPlaceholderColor: var(--boxColor);
    --boxBorderColor: #E1E1E1;
    --boxBorderHover: #BABABA;
    --boxBorderActive: var(--primary);

    /* @for checkbox/radio/.switch */
    --boxActive: var(--primary);
    --boxActiveInner: var(--white);
    --boxFocus: rgba(41, 145, 248, .7);

    /* buttons */
    --buttonPadding: 1.3rem;
    --buttonMargin: 0;
    --buttonRadius: var(--radius);
    --buttonBorderWidth: var(--borderWidth);
    --buttonBorderStyle: var(--borderStyle);
    --buttonFontSize: var(--fontSize);

    --buttonBg: var(--primary);
    --buttonBgHover: var(--primary);
    --buttonColor: #FFF;
    --buttonColorHover: var(--buttonColor);
    --buttonBorderColor: transparent;
    --buttonBorderHover: transparent;

    /* grids */
    --columnGap: 1rem;
    --rowGap: 2rem;

    /* tooltip */
    --tooltipRadius: 0.5rem;
    --tooltipFontSize: 1.2rem;
    --tooltipMove: 4px; 
    --tooltipDuration: 190ms;

    --tooltipBg: var(--dark);
    --tooltipColor: var(--white);
}

/*** Dark Mode */
.dark-mode, #dark-mode, [dark-mode], [data-mode="dark"] {
    --bgColor: #000;
    --color: #FFF;
    --colorInverse: #000;
    --hColor: var(--color);

    --boxBg: #181818;
    --boxBgHover: var(--boxBg);
    --boxBgActive: var(--boxBg);
    --boxBorderColor: #333;
    --boxBorderHover: #444;
    --boxBorderActive: var(--primary);
    --boxColor: var(--color);
    --boxPlaceholderColor: var(--boxColor);

    --buttonColor: var(--color);
    --buttonColorHover: var(--color);
    --buttonBorderColor: transparent;
    --buttonBorderHover: transparent;

    --selectionBg: rgba(255,255,255,.99);
    --selectionText: #000;

    --codeColor: #00F900;
    --codeBg: #111;

    --hrColor: var(--boxBorderColor);
    --hrGradient: rgba(0, 0, 0, 0);
}

/* ------------------
  more resets
------------------ */
:not(pre) > code, :not(pre) > kbd, :not(pre) > samp { font-size: 1.2rem; font-family: Consolas, monospace, serif; white-space: nowrap; }
img,svg,video,canvas,audio,iframe,embed,object,dd { display: block; vertical-align: middle; box-sizing: border-box; max-width: 100%; height: auto; }
dt {font-weight:bold}
dd {margin-inline-start:4rem}
figure {margin:0}
[hidden],[type="hidden"],.hidden {display:none!important}
[disabled],[disabled]:hover,.disabled { opacity:0.6!important; cursor:not-allowed!important; }

/* ------------------
  basics
------------------ */
::selection { background: var(--selectionBg); color: var(--selectionText); }
::-moz-selection { background: var(--selectionBg); color: var(--selectionText); }

html { height: 100%; font-size: 62.5%; scroll-behavior: smooth; }
body { background: var(--bgColor); color: var(--color); font-size: var(--fontSize); line-height: var(--fontLine); letter-spacing: var(--fontSpace); font-weight: var(--fontWeight); font-family: var(--fontFamily); }

#app { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1; }

/* ------------------
  typography
------------------ */
h1, h2, h3, h4, h5, h6, 
.h1,.h2,.h3,.h4,.h5,.h6 { 
    font-family: var(--hFontFamily); 
    font-size: var(--hSize); 
    font-weight: var(--hWeight); 
    line-height: var(--hLine); 
    letter-spacing: var(--hSpace); 
    color: var(--hColor); 
    margin-top: 0; margin-bottom: 0.7rem; 
}

h1,.h1 { --hSize: var(--h1Size); --hLine: var(--h1Line); }
h2,.h2 { --hSize: var(--h2Size); --hLine: var(--h2Line); }
h3,.h3 { --hSize: var(--h3Size); --hLine: var(--h3Line); }
h4,.h4 { --hSize: var(--h4Size); --hLine: var(--h4Line); }
h5,.h5 { --hSize: var(--h5Size); --hLine: var(--h5Line); }
h6,.h6 { --hSize: var(--h6Size); --hLine: var(--h6Line); }

@media (max-width: 600px) {
    :root {
        --h1Size: 4.0rem;
        --h2Size: 3.6rem;
        --h3Size: 3.0rem;
        --h4Size: 2.4rem;
        --h5Size: 2.1rem;
        --h6Size: 1.8rem;

        --hLine: 1.2;
        --h1Line: var(--hLine);
        --h2Line: var(--hLine);
        --h3Line: var(--hLine);
        --h4Line: var(--hLine);
        --h5Line: var(--hLine);
        --h6Line: var(--hLine);
    }
}

p {margin:var(--pMargin)}
blockquote { max-width: 90%; margin: 2rem auto; font-style: italic; }

a:not(.button) { color:var(--linkColor); cursor:pointer }
a:not(.button):hover { color:var(--linkHover) }
a.no-style { text-decoration:none }

/*** Accessibility */
*:focus { outline:0; }
.a11y *:focus, .a11y a:focus { outline:2px solid -webkit-focus-ring-color; outline-offset:1px; }
.a11y--custom *:focus { 
    box-shadow: var(--a11yStyle, 0 0 0 0.35rem) var(--a11yColor, var(--boxFocus)); 
    /* fallback: Visible in Windows high-contrast themes */
    outline: 2px solid transparent;
}

code {
    padding: calc(var(--boxPadding) - 0.5rem);
    margin: calc(var(--boxPadding) - 0.75rem);
    font-size: 90%;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--codeBg);
    border: 1px solid var(--boxBorderColor);
    color: var(--codeColor);
    border-radius: var(--boxRadius);
    overflow:hidden;
    display: inline-block;
}

code:hover { overflow:auto; }
pre > code { display: block; padding: calc(var(--boxPadding) * 1); white-space: pre; }

/* ------------------
  utilities
------------------ */
.fullwidth { width: 100%; box-sizing: border-box; }
.fullwidth-max { max-width: 100%; box-sizing: border-box; }

.block { display:block; }
.inline { display: inline; margin: 0; }
.inline-block { display: inline-block; margin: 0; }
.center { display: block; text-align: center; margin: 0 auto; }

.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-start { text-align: start; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-justify { text-align: justify; }
.text-normal { font-weight: 400; }
.text-uppercase { text-transform:uppercase }
.text-lowercase { text-transform:lowercase }
.text-capitalize { text-transform:capitalize }

.float-right { float: right; }
.float-left { float: left; }
.float-none { float: none; }
.clearfix:after, .container:after { content: ""; display: table; clear: both; }

.sticky { position: sticky; top: 0; }
.sticky-bottom { position: sticky; bottom: 0; }
.sticky-none { position: inherit; }

@media (max-width: 600px) { 
    .fullwidth-s { width: 100%; box-sizing: border-box; }
    .fullwidth-max-s { max-width: 100%; box-sizing: border-box; }

    .block-s { display: block; }
    .inline-s { display: inline; margin: 0; }
    .inline-block-s { display: inline-block; margin: 0; }
    .center-s { display: block; text-align: center; margin: 0 auto; }

    .nowrap-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .text-start-s { text-align: start; }
    .text-center-s { text-align: center; }
    .text-end-s { text-align: end; }
    .text-justify-s { text-align: justify; }
    .text-normal-s { font-weight: 400; }
    .text-uppercase-s { text-transform:uppercase }
    .text-lowercase-s { text-transform:lowercase }
    .text-capitalize-s { text-transform:capitalize }

    .float-right-s { float: right; }
    .float-left-s { float: left; }
    .float-none-s { float: none; }
    .clearfix-s:after, .container-s:after { content: ""; display: table; clear: both; }

    .sticky-s { position: sticky; top: 0; }
    .sticky-bottom-s { position: sticky; bottom: 0; }
    .sticky-none-s { position: inherit; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .fullwidth-m { width: 100%; box-mizing: border-box; }
    .fullwidth-max-m { max-width: 100%; box-mizing: border-box; }

    .block-m { display: block; }
    .inline-m { display: inline; margin: 0; }
    .inline-block-m { display: inline-block; margin: 0; }
    .center-m { display: block; text-align: center; margin: 0 auto; }

    .nowrap-m { white-mpace: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .text-mtart-m { text-align: start; }
    .text-center-m { text-align: center; }
    .text-end-m { text-align: end; }
    .text-justify-m { text-align: justify; }
    .text-normal-m { font-weight: 400; }
    .text-uppercase-m { text-transform:uppercase }
    .text-lowercase-m { text-transform:lowercase }
    .text-capitalize-m { text-transform:capitalize }

    .float-right-m { float: right; }
    .float-left-m { float: left; }
    .float-none-m { float: none; }
    .clearfix-m:after, .container-m:after { content: ""; display: table; clear: both; }

    .sticky-m { position: sticky; top: 0; }
    .sticky-bottom-m { position: sticky; bottom: 0; }
    .sticky-none-m { position: inherit; }
}

@media (min-width: 1599px) { 
    .fullwidth-l { width: 100%; box-lizing: border-box; }
    .fullwidth-lax-l { max-width: 100%; box-lizing: border-box; }

    .block-l { display: block; }
    .inline-l { display: inline; margin: 0; }
    .inline-block-l { display: inline-block; margin: 0; }
    .center-l { display: block; text-align: center; margin: 0 auto; }

    .nowrap-l { white-lpace: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .text-ltart-l { text-align: start; }
    .text-center-l { text-align: center; }
    .text-end-l { text-align: end; }
    .text-justify-l { text-align: justify; }
    .text-normal-l { font-weight: 400; }
    .text-uppercase-l { text-transform:uppercase }
    .text-lowercase-l { text-transform:lowercase }
    .text-capitalize-l { text-transform:capitalize }

    .float-right-l { float: right; }
    .float-left-l { float: left; }
    .float-none-l { float: none; }
    .clearfix-l:after, .container-l:after { content: ""; display: table; clear: both; }

    .sticky-l { position: sticky; top: 0; }
    .sticky-bottom-l { position: sticky; bottom: 0; }
    .sticky-none-l { position: inherit; }
}

/* Vertical and Horizontal align :: you need to create a parent container to which the object itself will be aligned. */
.center-axyz, .center-axys { display: flex; align-items: center; justify-content: center; }
.center-axyz.full, .center-axys.full { height: 100vh; width: 100%; }
@media (max-width: 600px) { .center-axyz-s, .center-axys-s { display: flex; align-items: center; justify-content: center; } .center-axyz-s.full-s, .center-axys-s.full-s  { height: 100vh; width: 100%; } }
@media (min-width: 1024px) { .center-axyz-m, .center-axys-m { display: flex; align-items: center; justify-content: center; } .center-axyz-m.full-m, .center-axys-m.full-m { height: 100vh; width: 100%; } }
@media (min-width: 1599px) { .center-axyz-l, .center-axys-l { display: flex; align-items: center; justify-content: center; } .center-axyz-l.full-l, .center-axys-l.full-l { height: 100vh; width: 100%; } }

.mob-scroller { display: flex; flex-wrap: nowrap; overflow: hidden; overflow-x: auto; height: auto; width: 100%; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
@media (max-width: 1024px) { .mob-scroller::-webkit-scrollbar { display:none } }

@media (max-width: 600px) { .large-only, .only-large  { display:none!important } }
@media (min-width: 601px) { .small-only, .only-small  { display:none!important } }

.no-scrollbars { scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbars::-webkit-scrollbar { display:none }
@media (max-width: 600px) { .no-scrollbars-s { scrollbar-width:none; -ms-overflow-style:none; } .no-scrollbars-s::-webkit-scrollbar { display: none; } }
@media (min-width: 1024px) { .no-scrollbars-m { scrollbar-width:none; -ms-overflow-style:none; } .no-scrollbars-m::-webkit-scrollbar { display: none; } }
@media (min-width: 1599px) { .no-scrollbars-l { scrollbar-width:none; -ms-overflow-style:none; } .no-scrollbars-l::-webkit-scrollbar { display: none; } }

.scroll-snap {
    --scrollDirection: x;
    --scrollType: mandatory;
    --scrollAlign: start;
    --scrollMargin: 1rem;
    --scrollStop: normal;
    --scrollJustifyContent: start;
    --scrollAlignItems: center;
    --scrollFlexFlow: row nowrap;
    display: flex;
    flex: none;
    flex-flow: var(--scrollFlexFlow);
    gap: var(--scrollMargin);
    justify-content: var(--scrollJustifyContent);
    align-items: var(--scrollAlignItems);
    white-space: nowrap;
    overflow: auto;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-margin: var(--scrollMargin);
    scroll-snap-stop: var(--scrollStop);
    scroll-snap-type: var(--scrollDirection) var(--scrollType);
}

.scroll-snap > * { width: auto; flex: none; scroll-snap-align: var(--scrollAlign); }
.scroll-snap.y { --scrollDirection: y; --scrollFlexFlow: column nowrap; --scrollAlignItems: start; } 
.scroll-snap.mandatory { --scrollType: mandatory; } /* default */
.scroll-snap.proximity { --scrollType: proximity; }
.scroll-snap.align-start { --scrollAlign: start; }
.scroll-snap.align-center { --scrollAlign: center; }
.scroll-snap.align-end { --scrollAlign: end; }
.scroll-snap.stop-always { --scrollStop: always; } /* default */

/* ------------------
  tooltips
------------------ */
button[data-tooltip][data-tooltip-pos] { overflow: visible; }
[data-tooltip][data-tooltip-pos] { position: relative; cursor: pointer; }

[data-tooltip][data-tooltip-pos]:after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 99;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    background-color: var(--tooltipBg);
    border-radius: var(--tooltipRadius);
    color: var(--tooltipColor);
    font-family: var(--fontFamily);
    font-size: var(--tooltipFontSize)!important;
    font-weight: normal;
    font-style: normal;
    text-shadow: none;
    text-indent: 0;
    text-transform: initial;
    text-align: center;
    letter-spacing: normal;
    line-height: 1.3;
    white-space: nowrap;
    transition: all var(--tooltipDuration) ease-in-out var(--tooltipDuration);
}
[data-tooltip][data-tooltip-pos]:before {
    content: "";
    position: absolute;
    z-index: 99;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: var(--tooltipBg);
    opacity: 0;
    pointer-events: none;
    transition: all var(--tooltipDuration) ease-in-out var(--tooltipDuration);
}
[data-tooltip][data-tooltip-pos]:hover:before, [data-tooltip][data-tooltip-pos]:hover:after, [data-tooltip][data-tooltip-pos][data-tooltip-visible]:before,[data-tooltip][data-tooltip-pos][data-tooltip-visible]:after,[data-tooltip][data-tooltip-pos]:not([data-tooltip-nofocus]):focus:before,[data-tooltip][data-tooltip-pos]:not([data-tooltip-nofocus]):focus:after { opacity: 1; pointer-events: none;  }
[data-tooltip][data-tooltip-pos].font-awesome:after { font-family: FontAwesome, var(--fontFamily); }
[data-tooltip][data-tooltip-pos][data-tooltip-break]:after { white-space: pre; }
[data-tooltip][data-tooltip-pos][data-tooltip-break][data-tooltip-length]:after { white-space: pre-line; word-break: break-word; }
[data-tooltip][data-tooltip-pos][data-tooltip-blunt]:before, [data-tooltip][data-tooltip-pos][data-tooltip-blunt]:after { transition: none; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="up"]:hover:after,[data-tooltip][data-tooltip-pos][data-tooltip-pos="up"][data-tooltip-visible]:after,[data-tooltip][data-tooltip-pos][data-tooltip-pos="down"]:hover:after, [data-tooltip][data-tooltip-pos][data-tooltip-pos="down"][data-tooltip-visible]:after { transform: translate(-50%, 0); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="up"]:hover:before,[data-tooltip][data-tooltip-pos][data-tooltip-pos="up"][data-tooltip-visible]:before,[data-tooltip][data-tooltip-pos][data-tooltip-pos="down"]:hover:before, [data-tooltip][data-tooltip-pos][data-tooltip-pos="down"][data-tooltip-visible]:before { transform: translate(-50%, 0); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-left"]:after { left: 0; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-left"]:before { left: 5px; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-right"]:after { right: 0; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-right"]:before { right: 5px; }
[data-tooltip][data-tooltip-pos][data-tooltip-po*="-left"]:hover:after, [data-tooltip][data-tooltip-pos][data-tooltip-po*="-left"][data-tooltip-visible]:after,[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-right"]:hover:after,[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-right"][data-tooltip-visible]:after { transform: translate(0, 0); }
[data-tooltip][data-tooltip-pos][data-tooltip-po*="-left"]:hover:before, [data-tooltip][data-tooltip-pos][data-tooltip-po*="-left"][data-tooltip-visible]:before,[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-right"]:hover:before,[data-tooltip][data-tooltip-pos][data-tooltip-pos*="-right"][data-tooltip-visible]:before { transform: translate(0, 0); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos^="up"]:before, [data-tooltip][data-tooltip-pos][data-tooltip-pos^="up"]:after { bottom: 100%; transform-origin: top; transform: translate(0, var(--tooltipMove)); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos^="up"]:after { margin-bottom: 10px; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="up"]:before, [data-tooltip][data-tooltip-pos][data-tooltip-pos="up"]:after { left: 50%; transform: translate(-50%, var(--tooltipMove)); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos^="down"]:before, [data-tooltip][data-tooltip-pos][data-tooltip-pos^="down"]:after { top: 100%; transform: translate(0, calc(var(--tooltipMove) * -1)); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos^="down"]:after { margin-top: 10px; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos^="down"]:before { width: 0; height: 0; border: 5px solid transparent; border-bottom-color: var(--tooltipBg); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="down"]:after, [data-tooltip][data-tooltip-pos][data-tooltip-pos="down"]:before { left: 50%; transform: translate(-50%, calc(var(--tooltipMove) * -1)); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="left"]:hover:after, [data-tooltip][data-tooltip-pos][data-tooltip-pos="left"][data-tooltip-visible]:after, [data-tooltip][data-tooltip-pos][data-tooltip-pos="right"]:hover:after, [data-tooltip][data-tooltip-pos][data-tooltip-pos="right"][data-tooltip-visible]:after { transform: translate(0, -50%); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="left"]:hover:before, [data-tooltip][data-tooltip-pos][data-tooltip-pos="left"][data-tooltip-visible]:before, [data-tooltip][data-tooltip-pos][data-tooltip-pos="right"]:hover:before, [data-tooltip][data-tooltip-pos][data-tooltip-pos="right"][data-tooltip-visible]:before { transform: translate(0, -50%); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="left"]:after, [data-tooltip][data-tooltip-pos][data-tooltip-pos="left"]:before { right: 100%; top: 50%; transform: translate(var(--tooltipMove), -50%); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="left"]:after { margin-right: 10px; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="left"]:before { width: 0; height: 0; border: 5px solid transparent; border-left-color: var(--tooltipBg); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="right"]:after, [data-tooltip][data-tooltip-pos][data-tooltip-pos="right"]:before { left: 100%; top: 50%; transform: translate(calc(var(--tooltipMove) * -1), -50%); }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="right"]:after { margin-left: 10px; }
[data-tooltip][data-tooltip-pos][data-tooltip-pos="right"]:before { width: 0; height: 0; border: 5px solid transparent; border-right-color: var(--tooltipBg); }
[data-tooltip][data-tooltip-pos][data-tooltip-length]:after { white-space: normal; }
[data-tooltip][data-tooltip-pos][data-tooltip-length="small"]:after { width: 80px; }
[data-tooltip][data-tooltip-pos][data-tooltip-length="medium"]:after { width: 150px; }
[data-tooltip][data-tooltip-pos][data-tooltip-length="large"]:after { width: 260px; }
[data-tooltip][data-tooltip-pos][data-tooltip-length="xlarge"]:after { width: 380px; }
[data-tooltip][data-tooltip-pos][data-tooltip-length="fit"]:after { width: 100%; }
@media (max-width: 1024px) { [data-tooltip][data-tooltip-pos][data-tooltip-length="xlarge"]:after { width: 90vw; }  }

/* ------------------
  elements
------------------ */
.is-green { border-color: var(--green); }
.is-red, input:invalid { border-color: var(--red); }

/* ------------------
  buttons
------------------ */
button,.button,[type=button],[type=submit],[type=reset] {
    padding: var(--buttonPadding);
    margin: var(--buttonMargin);
    border-radius: var(--buttonRadius);
    border: var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor);
    background: var(--buttonBg);
    --buttonBorderHover: var(--buttonBorderColor);
    --buttonBgHover: var(--buttonBg);
    --buttonColorHover: var(--buttonColor);
    font-size: var(--buttonFontSize);
    color: var(--buttonColor);
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
    font-style: inherit;
    text-decoration: none;
    line-height: 1;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

:is(button,.button,[type=button],[type=submit],[type=reset]):hover { opacity: 0.9; background: var(--buttonBgHover); color: var(--buttonColorHover); border-color: var(--buttonBorderHover); }

.has-shadow:is(button,.button,[type=button],[type=submit],[type=reset]) { box-shadow: 0 5px 25px -5px rgba(0,0,0,0.2); }
.has-shadow:is(button,.button,[type=button],[type=submit],[type=reset]):hover { transform: translateY(2px); box-shadow: 0 2px 7px 1px rgba(0,0,0,0.1); }
.has-icon:is(button,.button,[type=button],[type=submit],[type=reset]) { display:inline-flex; align-items:center; justify-content:center; }
.has-icon:is(button,.button,[type=button],[type=submit],[type=reset]) i { font-size: max(15px, var(--buttonFontSize)) }

.has-icon:is(button,.button,[type=button],[type=submit],[type=reset]) i:first-child:not(:last-child) { padding-right:1rem; }
.has-icon:is(button,.button,[type=button],[type=submit],[type=reset]) i:last-child:not(:first-child) { padding-left:1rem; }

.is-small:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonFontSize: min(0.75em, 1.4rem) }
.is-large:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonFontSize:1.45em; }

.is-pill:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonRadius:100vw; }
.is-circle:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonRadius:100vw; padding:1em; width:1em; height:1em; }
.is-square:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonRadius:0; }

.is-loading:is(button,.button,[type=button],[type=submit],[type=reset]):after {
    content: "";
    animation: loading 500ms infinite linear;
    border: 2px solid var(--buttonColor);
    border-radius: 100%;
    border-right-color: transparent;
    border-top-color: transparent;
    display: block;
    height: 1em;
    width: 1em;
    position: relative;
}

.is-loading:is(button,.button,[type=button],[type=submit],[type=reset]):not(:empty):after { margin-left: 1rem; }

.is-blank:is(button,.button,[type=button],[type=submit],[type=reset]) { background: transparent; --buttonBorderColor: transparent; --buttonBorderHover: var(--buttonBorderColor); --buttonColor: currentColor; --buttonColorHover: currentColor; }
.is-outline:is(button,.button,[type=button],[type=submit],[type=reset]) { background: transparent; --buttonColor: var(--buttonBg); --buttonBorderColor: var(--buttonBg); }
.is-outline:is(button,.button,[type=button],[type=submit],[type=reset]):not(.is-white,.is-black,.is-currentcolor):hover { background: var(--buttonBg); --buttonColor: var(--white); }

.is-white:is(button,.button,[type=button],[type=submit],[type=reset]):not(.is-outline) { --buttonBg:var(--white); --buttonBgHover:var(--buttonBg); --buttonColor:var(--black); 
    --buttonColorHover: var(--black); }
.is-black:is(button,.button,[type=button],[type=submit],[type=reset]):not(.is-outline) { --buttonBg:var(--black); --buttonBgHover:var(--buttonBg); --buttonColor:var(--white); }

.is-currentcolor.is-outline:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonColor: currentColor; --buttonBorderColor: var(--buttonColor); --buttonColorHover: var(--buttonColor);  --buttonBorderHover: var(--buttonColor) }
.is-white.is-outline:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonColor: var(--white); --buttonBorderColor: var(--white);--buttonColorHover: var(--white);  --buttonBorderHover: var(--white) }
.is-black.is-outline:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonColor: var(--black); --buttonBorderColor: var(--black); --buttonColorHover: var(--black); --buttonBorderHover: var(--black) }

:is(.is-primary,.is-blue,.is-green,.is-yellow,.is-red):is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonBg:var(--primary); --buttonBgHover:var(--buttonBg); --buttonBorderColor:var(--buttonBg); --buttonBorderColorHover:var(--buttonBg); --a11yColor:var(--buttonBg) }

.is-primary:is(button,.button,[type=button],[type=submit],[type=reset]) { --buttonBg: var(--primary); }
.is-blue:is(button,.button,[type=button],[type=submit],[type=reset])    { --buttonBg: var(--blue); }
.is-green:is(button,.button,[type=button],[type=submit],[type=reset])   { --buttonBg: var(--green); }
.is-yellow:is(button,.button,[type=button],[type=submit],[type=reset])  { --buttonBg: var(--yellow); }
.is-red:is(button,.button,[type=button],[type=submit],[type=reset])     { --buttonBg: var(--red); }

/** Radio Checkbox Switch */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--boxHeight);
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--boxBorderColor));
    background: var(--b, var(--boxBgColor));
    transition: background .3s, border-color .3s, box-shadow .2s;
}

input[type="checkbox"]:after,
input[type="radio"]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    --b: var(--boxActive);
    --bc: var(--boxActive);
    --d-o: 100ms;
    --d-t: 300ms;
    --d-t-e: var(--easeInOutSine);
}

/* Disabled */
input[type="checkbox"]:disabled,input[type="radio"]:disabled { filter: grayscale(100%); cursor: not-allowed; opacity: .9; }
input[type="checkbox"]:disabled:checked,input[type="radio"]:disabled:checked { filter: grayscale(100%); }
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label { cursor: not-allowed; }

input[type="checkbox"]:hover:not(:checked):not(:disabled),
input[type="radio"]:hover:not(:checked):not(:disabled) { --bc: var(--boxBorderHover); }

input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: 0 0 0 2px var(--boxFocus); }  
input[type="checkbox"]:not(.switch), input[type="radio"]:not(.switch) { width: 21px; }
input[type="checkbox"]:not(.switch):after, input[type="radio"]:not(.switch):after { opacity: var(--o, 0); }  
input[type="checkbox"]:not(.switch):checked, input[type="radio"]:not(.switch):checked { --o: 1; }
  
input[type="checkbox"] + label,
input[type="radio"] + label {
    font-size: 1.4rem;
    line-height: var(--boxHeight);
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
    user-select: none;
}

input[type="checkbox"]:not(.switch) { border-radius: 3px; }

input[type="checkbox"]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--boxActiveInner);
    border-top: 0;
    border-left: 0;
    left: 6px;
    top: 2.5px;
    -webkit-transform: rotate(43deg);
    transform: rotate(43deg);
}

/* Switch */
input[type="checkbox"].switch { width: 38px; border-radius: 11px; }

input[type="checkbox"].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--primary));
    -webkit-transform: translateX(var(--x, 0));
    transform: translateX(var(--x, 0));
}

input[type="checkbox"].switch:checked { --ab: var(--boxActiveInner); --x: 17px; }
input[type="checkbox"].switch:disabled:not(:checked):after { opacity: .6; }

/* Radio */
input[type="radio"] { border-radius: 50%; }

input[type="radio"]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--boxActiveInner);
    opacity: 0;
    -webkit-transform: scale(var(--s, 0.7));
    transform: scale(var(--s, 0.7));
}

input[type="radio"]:checked { --s: .5; }

/* ------------------
  forms
------------------ */
::placeholder { color: var(--boxPlaceholderColor); }

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="color"],
input[inputmode],
select,
textarea {
    width: 100%;
    padding: var(--boxPadding);
    margin: var(--boxMargin);
    border-radius: var(--boxRadius);
    border: var(--boxBorderWidth) var(--boxBorderStyle) var(--boxBorderColor);
    background-color: var(--boxBg);
    font-size: var(--boxFontSize);
    color: var(--boxColor);
    transition: border 200ms ease-out;
    -webkit-appearance: none;
    appearance: none;
}

input[type="color"]:hover, 
input[type="date"]:hover,
input[type="datetime-local"]:hover, 
input[type="email"]:hover,
input[type="file"]:hover, 
input[type="month"]:hover, 
input[type="number"]:hover, 
input[type="password"]:hover, 
input[type="search"]:hover, 
input[type="tel"]:hover, 
input[type="text"]:hover, 
input[type="time"]:hover, 
input[type="url"]:hover, 
input[type="week"]:hover,
input[type="color"]:hover,
input[inputmode]:hover,
select:hover,
textarea:hover {
    background-color: var(--boxBgHover);
    border: var(--boxBorderWidth) var(--boxBorderStyle) var(--boxBorderHover);
}

input[type="color"]:focus, 
input[type="date"]:focus,
input[type="datetime-local"]:focus, 
input[type="email"]:focus,
input[type="file"]:focus, 
input[type="month"]:focus, 
input[type="number"]:focus, 
input[type="password"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="text"]:focus, 
input[type="time"]:focus, 
input[type="url"]:focus, 
input[type="week"]:focus,
input[type="color"]:focus,
input[inputmode]:focus,
select:focus, 
textarea:focus {
    background-color: var(--boxBgActive);
    border: var(--boxBorderWidth) var(--boxBorderStyle) var(--boxBorderActive);
}

input[type="range"] { height:2.25rem; line-height: 2.25rem; vertical-align: middle; width: 100%; }
input[type="color"] { height:4rem; min-width:6em; padding:calc(.25rem - 1px) 0.5rem; display:block; width:auto; cursor:pointer }
input[type="file"] { cursor:pointer; display:block; width:auto; height:auto; font-size:1; }

textarea { min-height: 6.5rem; padding: var(--boxPadding); }
label, legend { display: inline-flex; margin-bottom: var(--boxMargin); font-weight: 600; align-items: center; }
fieldset { border: 1px solid var(--boxBorderColor); border-radius: var(--boxRadius); }
legend { padding: var(--boxPadding); }
option { padding: 5px; }
label span { color: var(--color); margin: 0 0.5rem; font-weight: normal;  }

/* Float placeholder */
label.float { position: relative; }
label.float span { user-select: none; cursor: text; display: block; position: absolute; top: 0; left: 0; padding: 0; line-height: 1.3; margin: var(--boxPadding); color: var(--color); transition: all 0.2s var(--easeInOutSine); }
label.float input:focus + span, label.float input:not(:placeholder-shown) + span, 
label.float textarea:focus + span, label.float textarea:not(:placeholder-shown) + span { top: -3.5rem; left: 0; margin-left: var(--boxPadding); font-size: 70%; }
label.float input:not(:focus) + span, label.float textarea:not(:focus) + span { color: var(--boxPlaceholderColor); }
label.float input:placeholder-shown:not(:focus)::placeholder, label.float textarea:placeholder-shown:not(:focus)::placeholder { opacity: 0; }

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--boxBorderColor) 50%), linear-gradient(135deg, var(--boxBorderColor) 50%, transparent 50%), linear-gradient(to right, var(--boxBorderColor), var(--boxBorderColor));
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.35em;
    background-repeat: no-repeat;
    color: var(--boxColor);
    padding-right: 45px;
}

select:hover { color: var(--boxColor); background-image: linear-gradient(45deg, transparent 50%, var(--boxBorderHover) 50%), linear-gradient(135deg, var(--boxBorderHover) 50%, transparent 50%), linear-gradient(to right, var(--boxBorderHover), var(--boxBorderHover)); }
select:focus { color: var(--boxColor); background-image: linear-gradient(45deg, transparent 50%, var(--boxBorderActive) 50%), linear-gradient(135deg, var(--boxBorderActive) 50%, transparent 50%), linear-gradient(to right, var(--boxBorderActive), var(--boxBorderActive)); }
select:-moz-focusring { color:transparent; text-shadow: 0 0 0 var(--color); }

/* ------------------
  lists
------------------ */
ul { list-style: disc inside; }
ol { list-style: decimal inside; }
ul, ol { padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 100%; }
li { margin-bottom: var(--margin); }

.inline li { display: inline-block; list-style: none; margin: 0; padding: 0; }
ul.no-style, ol.no-style { list-style: none; margin: 0; padding: 0; }
ul.no-style ul, ol.no-style ol {list-style:none}
ul.indent, ol.indent { margin: 1.5rem 0 1.5rem 3rem; }

ul.disc {list-style-type:disc}
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.roman {list-style-type:upper-roman}
ol.alpha {list-style-type:lower-alpha}
ol.decimal {list-style-type:decimal}
ul.inside,ol.inside {list-style-position:inside}
ul.outside,ol.outside {list-style-position:outside}

/* ---------------------
  hr - horizontal rules
--------------------- */
hr { margin: var(--hrMargin) auto; background-color: var(--hrColor); border: 0 none; width: 95%; }
hr:not([size]) { height: 1px; }
hr.full { width: 100%; }
hr.gradient { background-color: transparent; background-image: linear-gradient(to right, var(--hrGradient) 0%, var(--hrColor) 50%, var(--hrGradient) 100%); }

/* Line w/ text: --- text --- */
.text-hr { display: flex; align-items: center; text-align: center; margin: calc(var(--margin) * 1) auto; }
.text-hr::before, .text-hr::after { content: ""; flex: 1; border-bottom: 1px solid var(--boxBorderColor); }
.text-hr::before { margin-right: var(--padding); }
.text-hr::after { margin-left: var(--padding); }

/* ------------------
  tables
------------------ */
table { width: 100%; }
th, td { padding: var(--padding); text-align: start; border-bottom: 1px solid var(--boxBorderColor); }

table.is-bordered { border: 1px solid var(--boxBorderColor); border-radius: var(--radius); }
table.is-bordered th { background-color: var(--boxBorderColor); }
table.is-bordered th, table.is-bordered td { border-bottom: 1px solid var(--boxBorderColor); }
table.is-bordered > tbody > tr:last-child td { border-bottom: none; }
table.is-striped tbody tr:nth-child(2n) { background-color: var(--boxBorderColor); }
table.is-striped td { border:none; }

/* ------------------
  css grid
------------------ */
x-grid {
    display: grid;
    grid-row-gap: var(--rowGap, 2rem);
    grid-column-gap: var(--columnGap, 1rem);
    gap: var(--rowGap, 2rem) var(--columnGap, 1rem);
    grid-template-columns: var(--grid-tc); /* default columns */ 
    --grid-tc: repeat(4, 1fr);
    --grid-cs: 1; /* column start */
    --grid-ce: -1 /* column end */
}

x-grid.compact { grid-row-gap: 0; row-gap: 0; }
x-grid > x-col > img, x-grid > x-col > p > img { -o-object-fit: contain; object-fit: contain; max-width: 100% }

/* x-col -- column */
x-grid > x-col { display: block; appearance: none; -webkit-appearance: none; }

x-grid[columns="1"] { --grid-tc: repeat(1, 1fr) }
x-grid[columns="2"] { --grid-tc: repeat(2, 1fr) }
x-grid[columns="3"] { --grid-tc: repeat(3, 1fr) }
x-grid[columns="4"] { --grid-tc: repeat(4, 1fr) }
x-grid[columns="5"] { --grid-tc: repeat(5, 1fr) }
x-grid[columns="6"] { --grid-tc: repeat(6, 1fr) }
x-grid[columns="7"] { --grid-tc: repeat(7, 1fr) }
x-grid[columns="8"] { --grid-tc: repeat(8, 1fr) }
x-grid[columns="9"] { --grid-tc: repeat(9, 1fr) }
x-grid[columns="10"] { --grid-tc: repeat(10, 1fr) }
x-grid[columns="11"] { --grid-tc: repeat(11, 1fr) }
x-grid[columns="12"] { --grid-tc: repeat(12, 1fr) }
x-grid[columns="13"] { --grid-tc: repeat(13, 1fr) }
x-grid[columns="14"] { --grid-tc: repeat(14, 1fr) }
x-grid[columns="15"] { --grid-tc: repeat(15, 1fr) }
x-grid[columns="16"] { --grid-tc: repeat(16, 1fr) }

/* span=start... */
x-grid > x-col[span^="1"] { --grid-cs: 1 }
x-grid > x-col[span^="2"] { --grid-cs: 2 }
x-grid > x-col[span^="3"] { --grid-cs: 3 }
x-grid > x-col[span^="4"] { --grid-cs: 4 }
x-grid > x-col[span^="5"] { --grid-cs: 5 }
x-grid > x-col[span^="6"] { --grid-cs: 6 }
x-grid > x-col[span^="7"] { --grid-cs: 7 }
x-grid > x-col[span^="8"] { --grid-cs: 8 }
x-grid > x-col[span^="9"] { --grid-cs: 9 }
x-grid > x-col[span^="10"] { --grid-cs: 10 }
x-grid > x-col[span^="11"] { --grid-cs: 11 }
x-grid > x-col[span^="12"] { --grid-cs: 12 }
x-grid > x-col[span^="13"] { --grid-cs: 13 }
x-grid > x-col[span^="14"] { --grid-cs: 14 }
x-grid > x-col[span^="15"] { --grid-cs: 15 }
x-grid > x-col[span^="16"] { --grid-cs: 16 }

/* span=...+width, span=...-end */
x-grid > x-col[span$="+1"], x-grid > x-col[span="1"] { --grid-ce: 1 }
x-grid > x-col[span$="+2"], x-grid > x-col[span$="-1"], x-grid > x-col[span="2"] { --grid-ce: 2 }
x-grid > x-col[span$="+3"], x-grid > x-col[span$="-2"], x-grid > x-col[span="3"] { --grid-ce: 3 }
x-grid > x-col[span$="+4"], x-grid > x-col[span$="-3"], x-grid > x-col[span="4"] { --grid-ce: 4 }
x-grid > x-col[span$="+5"], x-grid > x-col[span$="-4"], x-grid > x-col[span="5"] { --grid-ce: 5 }
x-grid > x-col[span$="+6"], x-grid > x-col[span$="-5"], x-grid > x-col[span="6"] { --grid-ce: 6 }
x-grid > x-col[span$="+7"], x-grid > x-col[span$="-6"], x-grid > x-col[span="7"] { --grid-ce: 7 }
x-grid > x-col[span$="+8"], x-grid > x-col[span$="-7"], x-grid > x-col[span="8"] { --grid-ce: 8 }
x-grid > x-col[span$="+9"], x-grid > x-col[span$="-8"], x-grid > x-col[span="9"] { --grid-ce: 9 }
x-grid > x-col[span$="+10"], x-grid > x-col[span$="-9"], x-grid > x-col[span="10"] { --grid-ce: 10 }
x-grid > x-col[span$="+11"], x-grid > x-col[span$="-10"], x-grid > x-col[span="11"] { --grid-ce: 11 }
x-grid > x-col[span$="+12"], x-grid > x-col[span$="-11"], x-grid > x-col[span="12"] { --grid-ce: 12 }
x-grid > x-col[span$="+13"], x-grid > x-col[span$="-12"], x-grid > x-col[span="13"] { --grid-ce: 13 }
x-grid > x-col[span$="+14"], x-grid > x-col[span$="-13"], x-grid > x-col[span="14"] { --grid-ce: 14 }
x-grid > x-col[span$="+15"], x-grid > x-col[span$="-14"], x-grid > x-col[span="15"] { --grid-ce: 15 }
x-grid > x-col[span$="+16"], x-grid > x-col[span$="-15"], x-grid > x-col[span="16"] { --grid-ce: 16 }
x-grid > x-col[span$="-16"] { --grid-ce: 17 }

/* connect vars */
x-grid > x-col[span] { grid-column-end: span var(--grid-ce); }
x-grid > x-col[span*="+"], x-grid > x-col[span*="-"], x-grid > x-col[span*=".."] { grid-column-start: var(--grid-cs); }
x-grid > x-col[span*="-"], x-grid > x-col[span*=".."] { grid-column-end: var(--grid-ce); }
x-grid > x-col[span="row"] { grid-column: 1 / -1 }

/* Justify CONTENT - for <x-grid> */
x-grid[jc="start"] { justify-content: start; }
x-grid[jc="center"] { justify-content: center; }
x-grid[jc="end"] { justify-content: end; }
x-grid[jc="stretch"] { justify-content: stretch; }
x-grid[jc="around"] { justify-content: space-around; }
x-grid[jc="between"] { justify-content: space-between; }
x-grid[jc="evenly"] { justify-content: space-evenly; }

/* Justify ITEMS - for <x-grid> */
x-grid[ji="start"] { justify-items: start; }
x-grid[ji="center"] { justify-items: center; }
x-grid[ji="end"] { justify-items: end; }
x-grid[ji="stretch"] { justify-items: stretch; }

/* Align ITEMS - for <x-grid> */
x-grid[ai="start"] { align-items: start; }
x-grid[ai="center"] { align-items: center; }
x-grid[ai="end"] { align-items: end; }
x-grid[ai="stretch"] { align-items: stretch; }

/* Align CONTENT - for <x-grid> */
x-grid[ac="start"] { align-content: start; }
x-grid[ac="center"] { align-content: center; }
x-grid[ac="end"] { align-content: end; }
x-grid[ac="stretch"] { align-content: stretch; }
x-grid[ac="around"] { align-content: space-around; }
x-grid[ac="between"] { align-content: space-between; }
x-grid[ac="evenly"] { align-content: space-evenly; }

/* Align SELF - for <x-col> */
x-grid > x-col[as="start"] { align-self: start; }
x-grid > x-col[as="center"] { align-self: center; }
x-grid > x-col[as="end"] { align-self: end; }
x-grid > x-col[as="stretch"] { align-self: stretch; }

/* Justify SELF - for <x-col> */
x-grid > x-col[js="start"] { justify-self: start; }
x-grid > x-col[js="center"] { justify-self: center; }
x-grid > x-col[js="end"] { justify-self: end; }
x-grid > x-col[js="stretch"] { justify-self: stretch; }


/* Place ITEMS - for <x-grid> – place-items: align-items justify-items; */
x-grid[pi="start"] { place-items: start; }
x-grid[pi="center"] { place-items: center; }
x-grid[pi="end"] { place-items: end; }
x-grid[pi="stretch"] { place-items: stretch; }

x-grid[pi="start center"] { place-items: start center; }
x-grid[pi="start end"] { place-items: start end; }
x-grid[pi="start stretch"] { place-items: start stretch; }

x-grid[pi="center start"] { place-items: center start; }
x-grid[pi="center end"] { place-items: center end; }
x-grid[pi="center stretch"] { place-items: center stretch; }

x-grid[pi="end start"] { place-items: end start; }
x-grid[pi="end center"] { place-items: end center; }
x-grid[pi="end stretch"] { place-items: end stretch; }

x-grid[pi="stretch start"] { place-items: stretch start; }
x-grid[pi="stretch center"] { place-items: stretch center; }
x-grid[pi="stretch end"] { place-items: stretch end; }

/* Place SELF - for <x-col> – place-self: align-self justify-self; */
x-grid > x-col[ps="start"] { place-self: start; }
x-grid > x-col[ps="center"] { place-self: center; }
x-grid > x-col[ps="end"] { place-self: end; }
x-grid > x-col[ps="stretch"] { place-self: stretch; }

x-grid > x-col[ps="start center"] { place-self: start center; }
x-grid > x-col[ps="start end"] { place-self: start end; }
x-grid > x-col[ps="start stretch"] { place-self: start stretch; }

x-grid > x-col[ps="center start"] { place-self: center start; }
x-grid > x-col[ps="center end"] { place-self: center end; }
x-grid > x-col[ps="center stretch"] { place-self: center stretch; }

x-grid > x-col[ps="end start"] { place-self: end start; }
x-grid > x-col[ps="end center"] { place-self: end center; }
x-grid > x-col[ps="end stretch"] { place-self: end stretch; }

x-grid > x-col[ps="stretch start"] { place-self: stretch start; }
x-grid > x-col[ps="stretch center"] { place-self: stretch center; }
x-grid > x-col[ps="stretch end"] { place-self: stretch end; }

/* VISUAL ORDER */
[order="first"] { order: -1; }
[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="9"] { order: 9; }
[order="10"] { order: 10; }
[order="11"] { order: 11; }
[order="12"] { order: 12; }
[order="13"] { order: 13; }
[order="14"] { order: 14; }
[order="15"] { order: 15; }
[order="16"] { order: 16; }
[order="last"] { order: 99; }

/* for window width <= 600 */
@media (max-width: 600px) {
  x-grid[columns-s="1"] { --grid-tc: repeat(1, 1fr) }
  x-grid[columns-s="2"] { --grid-tc: repeat(2, 1fr) }
  x-grid[columns-s="3"] { --grid-tc: repeat(3, 1fr) }
  x-grid[columns-s="4"] { --grid-tc: repeat(4, 1fr) }
  x-grid[columns-s="5"] { --grid-tc: repeat(5, 1fr) }
  x-grid[columns-s="6"] { --grid-tc: repeat(6, 1fr) }
  x-grid[columns-s="7"] { --grid-tc: repeat(7, 1fr) }
  x-grid[columns-s="8"] { --grid-tc: repeat(8, 1fr) }
  x-grid[columns-s="9"] { --grid-tc: repeat(9, 1fr) }
  x-grid[columns-s="10"] { --grid-tc: repeat(10, 1fr) }
  x-grid[columns-s="11"] { --grid-tc: repeat(11, 1fr) }
  x-grid[columns-s="12"] { --grid-tc: repeat(12, 1fr) }
  x-grid[columns-s="13"] { --grid-tc: repeat(13, 1fr) }
  x-grid[columns-s="14"] { --grid-tc: repeat(14, 1fr) }
  x-grid[columns-s="15"] { --grid-tc: repeat(15, 1fr) }
  x-grid[columns-s="16"] { --grid-tc: repeat(16, 1fr) }
  
  /* span-s=start... */
  x-grid > x-col[span-s^="1"] { --grid-cs: 1 }
  x-grid > x-col[span-s^="2"] { --grid-cs: 2 }
  x-grid > x-col[span-s^="3"] { --grid-cs: 3 }
  x-grid > x-col[span-s^="4"] { --grid-cs: 4 }
  x-grid > x-col[span-s^="5"] { --grid-cs: 5 }
  x-grid > x-col[span-s^="6"] { --grid-cs: 6 }
  x-grid > x-col[span-s^="7"] { --grid-cs: 7 }
  x-grid > x-col[span-s^="8"] { --grid-cs: 8 }
  x-grid > x-col[span-s^="9"] { --grid-cs: 9 }
  x-grid > x-col[span-s^="10"] { --grid-cs: 10 }
  x-grid > x-col[span-s^="11"] { --grid-cs: 11 }
  x-grid > x-col[span-s^="12"] { --grid-cs: 12 }
  x-grid > x-col[span-s^="13"] { --grid-cs: 13 }
  x-grid > x-col[span-s^="14"] { --grid-cs: 14 }
  x-grid > x-col[span-s^="15"] { --grid-cs: 15 }
  x-grid > x-col[span-s^="16"] { --grid-cs: 16 }
  
  /* span-s=...+width, span-s=...-end */
  x-grid > x-col[span-s$="+1"], x-grid > x-col[span-s="1"] { --grid-ce: 1 }
  x-grid > x-col[span-s$="+2"], x-grid > x-col[span-s$="-1"], x-grid > x-col[span-s="2"] { --grid-ce: 2 }
  x-grid > x-col[span-s$="+3"], x-grid > x-col[span-s$="-2"], x-grid > x-col[span-s="3"] { --grid-ce: 3 }
  x-grid > x-col[span-s$="+4"], x-grid > x-col[span-s$="-3"], x-grid > x-col[span-s="4"] { --grid-ce: 4 }
  x-grid > x-col[span-s$="+5"], x-grid > x-col[span-s$="-4"], x-grid > x-col[span-s="5"] { --grid-ce: 5 }
  x-grid > x-col[span-s$="+6"], x-grid > x-col[span-s$="-5"], x-grid > x-col[span-s="6"] { --grid-ce: 6 }
  x-grid > x-col[span-s$="+7"], x-grid > x-col[span-s$="-6"], x-grid > x-col[span-s="7"] { --grid-ce: 7 }
  x-grid > x-col[span-s$="+8"], x-grid > x-col[span-s$="-7"], x-grid > x-col[span-s="8"] { --grid-ce: 8 }
  x-grid > x-col[span-s$="+9"], x-grid > x-col[span-s$="-8"], x-grid > x-col[span-s="9"] { --grid-ce: 9 }
  x-grid > x-col[span-s$="+10"], x-grid > x-col[span-s$="-9"], x-grid > x-col[span-s="10"] { --grid-ce: 10 }
  x-grid > x-col[span-s$="+11"], x-grid > x-col[span-s$="-10"], x-grid > x-col[span-s="11"] { --grid-ce: 11 }
  x-grid > x-col[span-s$="+12"], x-grid > x-col[span-s$="-11"], x-grid > x-col[span-s="12"] { --grid-ce: 12 }
  x-grid > x-col[span-s$="+13"], x-grid > x-col[span-s$="-12"], x-grid > x-col[span-s="13"] { --grid-ce: 13 }
  x-grid > x-col[span-s$="+14"], x-grid > x-col[span-s$="-13"], x-grid > x-col[span-s="14"] { --grid-ce: 14 }
  x-grid > x-col[span-s$="+15"], x-grid > x-col[span-s$="-14"], x-grid > x-col[span-s="15"] { --grid-ce: 15 }
  x-grid > x-col[span-s$="+16"], x-grid > x-col[span-s$="-15"], x-grid > x-col[span-s="16"] { --grid-ce: 16 }
  x-grid > x-col[span-s$="-16"] { --grid-ce: 17 }
  
  /* connect vars */
  x-grid > x-col[span-s] { grid-column-end: span var(--grid-ce) }
  x-grid > x-col[span-s*="+"], x-grid > x-col[span-s*="-"], x-grid > x-col[span-s*=".."] { grid-column-start: var(--grid-cs) }
  x-grid > x-col[span-s*="-"], x-grid > x-col[span-s*=".."] { grid-column-end: var(--grid-ce) }
  x-grid > x-col[span-s="row"] { grid-column: 1 / -1 }

  /* Justify CONTENT - for <x-grid> */
  x-grid[jc-s="start"] { justify-content: start; }
  x-grid[jc-s="center"] { justify-content: center; }
  x-grid[jc-s="end"] { justify-content: end; }
  x-grid[jc-s="stretch"] { justify-content: stretch; }
  x-grid[jc-s="around"] { justify-content: space-around; }
  x-grid[jc-s="between"] { justify-content: space-between; }
  x-grid[jc-s="evenly"] { justify-content: space-evenly; }
  
  /* Justify ITEMS - for <x-grid> */
  x-grid[ji-s="start"] { justify-items: start; }
  x-grid[ji-s="center"] { justify-items: center; }
  x-grid[ji-s="end"] { justify-items: end; }
  x-grid[ji-s="stretch"] { justify-items: stretch; }
  
  /* Align ITEMS - for <x-grid> */
  x-grid[ai-s="start"] { align-items: start; }
  x-grid[ai-s="center"] { align-items: center; }
  x-grid[ai-s="end"] { align-items: end; }
  x-grid[ai-s="stretch"] { align-items: stretch; }
  
  /* Align CONTENT - for <x-grid> */
  x-grid[ac-s="start"] { align-content: start; }
  x-grid[ac-s="center"] { align-content: center; }
  x-grid[ac-s="end"] { align-content: end; }
  x-grid[ac-s="stretch"] { align-content: stretch; }
  x-grid[ac-s="around"] { align-content: space-around; }
  x-grid[ac-s="between"] { align-content: space-between; }
  x-grid[ac-s="evenly"] { align-content: space-evenly; }
  
  /* Align SELF - for <x-col> */
  x-grid > x-col[as-s="start"] { align-self: start; }
  x-grid > x-col[as-s="center"] { align-self: center; }
  x-grid > x-col[as-s="end"] { align-self: end; }
  x-grid > x-col[as-s="stretch"] { align-self: stretch; }
  
  /* Justify SELF - for <x-col> */
  x-grid > x-col[js-s="start"] { justify-self: start; }
  x-grid > x-col[js-s="center"] { justify-self: center; }
  x-grid > x-col[js-s="end"] { justify-self: end; }
  x-grid > x-col[js-s="stretch"] { justify-self: stretch; }


  /* Place ITEMS - for <x-grid> */
  x-grid[pi-s="start"] { place-items: start; }
  x-grid[pi-s="center"] { place-items: center; }
  x-grid[pi-s="end"] { place-items: end; }
  x-grid[pi-s="stretch"] { place-items: stretch; }

  x-grid[pi-s="start center"] { place-items: start center; }
  x-grid[pi-s="start end"] { place-items: start end; }
  x-grid[pi-s="start stretch"] { place-items: start stretch; }

  x-grid[pi-s="center start"] { place-items: center start; }
  x-grid[pi-s="center end"] { place-items: center end; }
  x-grid[pi-s="center stretch"] { place-items: center stretch; }

  x-grid[pi-s="end start"] { place-items: end start; }
  x-grid[pi-s="end center"] { place-items: end center; }
  x-grid[pi-s="end stretch"] { place-items: end stretch; }

  x-grid[pi-s="stretch start"] { place-items: stretch start; }
  x-grid[pi-s="stretch center"] { place-items: stretch center; }
  x-grid[pi-s="stretch end"] { place-items: stretch end; }

  /* Place SELF - for <x-col> */
  x-grid > x-col[ps-s="start"] { place-self: start; }
  x-grid > x-col[ps-s="center"] { place-self: center; }
  x-grid > x-col[ps-s="end"] { place-self: end; }
  x-grid > x-col[ps-s="stretch"] { place-self: stretch; }

  x-grid > x-col[ps-s="start center"] { place-self: start center; }
  x-grid > x-col[ps-s="start end"] { place-self: start end; }
  x-grid > x-col[ps-s="start stretch"] { place-self: start stretch; }

  x-grid > x-col[ps-s="center start"] { place-self: center start; }
  x-grid > x-col[ps-s="center end"] { place-self: center end; }
  x-grid > x-col[ps-s="center stretch"] { place-self: center stretch; }

  x-grid > x-col[ps-s="end start"] { place-self: end start; }
  x-grid > x-col[ps-s="end center"] { place-self: end center; }
  x-grid > x-col[ps-s="end stretch"] { place-self: end stretch; }

  x-grid > x-col[ps-s="stretch start"] { place-self: stretch start; }
  x-grid > x-col[ps-s="stretch center"] { place-self: stretch center; }
  x-grid > x-col[ps-s="stretch end"] { place-self: stretch end; }

  /* VISUAL ORDER */
  [order-s="first"] { order: -1; }
  [order-s="1"] { order: 1; }
  [order-s="2"] { order: 2; }
  [order-s="3"] { order: 3; }
  [order-s="4"] { order: 4; }
  [order-s="5"] { order: 5; }
  [order-s="6"] { order: 6; }
  [order-s="7"] { order: 7; }
  [order-s="8"] { order: 8; }
  [order-s="9"] { order: 9; }
  [order-s="10"] { order: 10; }
  [order-s="11"] { order: 11; }
  [order-s="12"] { order: 12; }
  [order-s="13"] { order: 13; }
  [order-s="14"] { order: 14; }
  [order-s="15"] { order: 15; }
  [order-s="16"] { order: 16; }
  [order-s="last"] { order: 99; }
}

/* for window width 601px <> 1024px */
@media (min-width: 601px) and (max-width: 1024px) {
  x-grid[columns-m="1"] { --grid-tc: repeat(1, 1fr) }
  x-grid[columns-m="2"] { --grid-tc: repeat(2, 1fr) }
  x-grid[columns-m="3"] { --grid-tc: repeat(3, 1fr) }
  x-grid[columns-m="4"] { --grid-tc: repeat(4, 1fr) }
  x-grid[columns-m="5"] { --grid-tc: repeat(5, 1fr) }
  x-grid[columns-m="6"] { --grid-tc: repeat(6, 1fr) }
  x-grid[columns-m="7"] { --grid-tc: repeat(7, 1fr) }
  x-grid[columns-m="8"] { --grid-tc: repeat(8, 1fr) }
  x-grid[columns-m="9"] { --grid-tc: repeat(9, 1fr) }
  x-grid[columns-m="10"] { --grid-tc: repeat(10, 1fr) }
  x-grid[columns-m="11"] { --grid-tc: repeat(11, 1fr) }
  x-grid[columns-m="12"] { --grid-tc: repeat(12, 1fr) }
  x-grid[columns-m="13"] { --grid-tc: repeat(13, 1fr) }
  x-grid[columns-m="14"] { --grid-tc: repeat(14, 1fr) }
  x-grid[columns-m="15"] { --grid-tc: repeat(15, 1fr) }
  x-grid[columns-m="16"] { --grid-tc: repeat(16, 1fr) }
  
  /* span-m=start... */
  x-grid > x-col[span-m^="1"] { --grid-cs: 1 }
  x-grid > x-col[span-m^="2"] { --grid-cs: 2 }
  x-grid > x-col[span-m^="3"] { --grid-cs: 3 }
  x-grid > x-col[span-m^="4"] { --grid-cs: 4 }
  x-grid > x-col[span-m^="5"] { --grid-cs: 5 }
  x-grid > x-col[span-m^="6"] { --grid-cs: 6 }
  x-grid > x-col[span-m^="7"] { --grid-cs: 7 }
  x-grid > x-col[span-m^="8"] { --grid-cs: 8 }
  x-grid > x-col[span-m^="9"] { --grid-cs: 9 }
  x-grid > x-col[span-m^="10"] { --grid-cs: 10 }
  x-grid > x-col[span-m^="11"] { --grid-cs: 11 }
  x-grid > x-col[span-m^="12"] { --grid-cs: 12 }
  x-grid > x-col[span-m^="13"] { --grid-cs: 13 }
  x-grid > x-col[span-m^="14"] { --grid-cs: 14 }
  x-grid > x-col[span-m^="15"] { --grid-cs: 15 }
  x-grid > x-col[span-m^="16"] { --grid-cs: 16 }
  
  /* span-m=...+width, span-m=...-end */
  x-grid > x-col[span-m$="+1"], x-grid > x-col[span-m="1"] { --grid-ce: 1 }
  x-grid > x-col[span-m$="+2"], x-grid > x-col[span-m$="-1"], x-grid > x-col[span-m="2"] { --grid-ce: 2 }
  x-grid > x-col[span-m$="+3"], x-grid > x-col[span-m$="-2"], x-grid > x-col[span-m="3"] { --grid-ce: 3 }
  x-grid > x-col[span-m$="+4"], x-grid > x-col[span-m$="-3"], x-grid > x-col[span-m="4"] { --grid-ce: 4 }
  x-grid > x-col[span-m$="+5"], x-grid > x-col[span-m$="-4"], x-grid > x-col[span-m="5"] { --grid-ce: 5 }
  x-grid > x-col[span-m$="+6"], x-grid > x-col[span-m$="-5"], x-grid > x-col[span-m="6"] { --grid-ce: 6 }
  x-grid > x-col[span-m$="+7"], x-grid > x-col[span-m$="-6"], x-grid > x-col[span-m="7"] { --grid-ce: 7 }
  x-grid > x-col[span-m$="+8"], x-grid > x-col[span-m$="-7"], x-grid > x-col[span-m="8"] { --grid-ce: 8 }
  x-grid > x-col[span-m$="+9"], x-grid > x-col[span-m$="-8"], x-grid > x-col[span-m="9"] { --grid-ce: 9 }
  x-grid > x-col[span-m$="+10"], x-grid > x-col[span-m$="-9"], x-grid > x-col[span-m="10"] { --grid-ce: 10 }
  x-grid > x-col[span-m$="+11"], x-grid > x-col[span-m$="-10"], x-grid > x-col[span-m="11"] { --grid-ce: 11 }
  x-grid > x-col[span-m$="+12"], x-grid > x-col[span-m$="-11"], x-grid > x-col[span-m="12"] { --grid-ce: 12 }
  x-grid > x-col[span-m$="+13"], x-grid > x-col[span-m$="-12"], x-grid > x-col[span-m="13"] { --grid-ce: 13 }
  x-grid > x-col[span-m$="+14"], x-grid > x-col[span-m$="-13"], x-grid > x-col[span-m="14"] { --grid-ce: 14 }
  x-grid > x-col[span-m$="+15"], x-grid > x-col[span-m$="-14"], x-grid > x-col[span-m="15"] { --grid-ce: 15 }
  x-grid > x-col[span-m$="+16"], x-grid > x-col[span-m$="-15"], x-grid > x-col[span-m="16"] { --grid-ce: 16 }
  x-grid > x-col[span-m$="-16"] { --grid-ce: 17 }
  
  /* connect vars */
  x-grid > x-col[span-m] { grid-column-end: span var(--grid-ce) }
  x-grid > x-col[span-m*="+"], x-grid > x-col[span-m*="-"], x-grid > x-col[span-m*=".."] { grid-column-start: var(--grid-cs) }
  x-grid > x-col[span-m*="-"], x-grid > x-col[span-m*=".."] { grid-column-end: var(--grid-ce) }
  x-grid > x-col[span-m="row"] { grid-column: 1 / -1 }

  /* Justify CONTENT - for <x-grid> */
  x-grid[jc-m="start"] { justify-content: start; }
  x-grid[jc-m="center"] { justify-content: center; }
  x-grid[jc-m="end"] { justify-content: end; }
  x-grid[jc-m="stretch"] { justify-content: stretch; }
  x-grid[jc-m="around"] { justify-content: space-around; }
  x-grid[jc-m="between"] { justify-content: space-between; }
  x-grid[jc-m="evenly"] { justify-content: space-evenly; }

  /* Justify ITEMS - for <x-grid> */
  x-grid[ji-m="start"] { justify-items: start; }
  x-grid[ji-m="center"] { justify-items: center; }
  x-grid[ji-m="end"] { justify-items: end; }
  x-grid[ji-m="stretch"] { justify-items: stretch; }

  /* Align ITEMS - for <x-grid> */
  x-grid[ai-m="start"] { align-items: start; }
  x-grid[ai-m="center"] { align-items: center; }
  x-grid[ai-m="end"] { align-items: end; }
  x-grid[ai-m="stretch"] { align-items: stretch; }

  /* Align CONTENT - for <x-grid> */
  x-grid[ac-m="start"] { align-content: start; }
  x-grid[ac-m="center"] { align-content: center; }
  x-grid[ac-m="end"] { align-content: end; }
  x-grid[ac-m="stretch"] { align-content: stretch; }
  x-grid[ac-m="around"] { align-content: space-around; }
  x-grid[ac-m="between"] { align-content: space-between; }
  x-grid[ac-m="evenly"] { align-content: space-evenly; }

  /* Align SELF - for <x-col> */
  x-grid > x-col[as-m="start"] { align-self: start; }
  x-grid > x-col[as-m="center"] { align-self: center; }
  x-grid > x-col[as-m="end"] { align-self: end; }
  x-grid > x-col[as-m="stretch"] { align-self: stretch; }

  /* Justify SELF - for <x-col> */
  x-grid > x-col[js-m="start"] { justify-self: start; }
  x-grid > x-col[js-m="center"] { justify-self: center; }
  x-grid > x-col[js-m="end"] { justify-self: end; }
  x-grid > x-col[js-m="stretch"] { justify-self: stretch; }


  /* Place ITEMS - for <x-grid> */
  x-grid[pi-m="start"] { place-items: start; }
  x-grid[pi-m="center"] { place-items: center; }
  x-grid[pi-m="end"] { place-items: end; }
  x-grid[pi-m="stretch"] { place-items: stretch; }

  x-grid[pi-m="start center"] { place-items: start center; }
  x-grid[pi-m="start end"] { place-items: start end; }
  x-grid[pi-m="start stretch"] { place-items: start stretch; }

  x-grid[pi-m="center start"] { place-items: center start; }
  x-grid[pi-m="center end"] { place-items: center end; }
  x-grid[pi-m="center stretch"] { place-items: center stretch; }

  x-grid[pi-m="end start"] { place-items: end start; }
  x-grid[pi-m="end center"] { place-items: end center; }
  x-grid[pi-m="end stretch"] { place-items: end stretch; }

  x-grid[pi-m="stretch start"] { place-items: stretch start; }
  x-grid[pi-m="stretch center"] { place-items: stretch center; }
  x-grid[pi-m="stretch end"] { place-items: stretch end; }

  /* Place SELF - for <x-col> */
  x-grid > x-col[ps-m="start"] { place-self: start; }
  x-grid > x-col[ps-m="center"] { place-self: center; }
  x-grid > x-col[ps-m="end"] { place-self: end; }
  x-grid > x-col[ps-m="stretch"] { place-self: stretch; }

  x-grid > x-col[ps-m="start center"] { place-self: start center; }
  x-grid > x-col[ps-m="start end"] { place-self: start end; }
  x-grid > x-col[ps-m="start stretch"] { place-self: start stretch; }

  x-grid > x-col[ps-m="center start"] { place-self: center start; }
  x-grid > x-col[ps-m="center end"] { place-self: center end; }
  x-grid > x-col[ps-m="center stretch"] { place-self: center stretch; }

  x-grid > x-col[ps-m="end start"] { place-self: end start; }
  x-grid > x-col[ps-m="end center"] { place-self: end center; }
  x-grid > x-col[ps-m="end stretch"] { place-self: end stretch; }

  x-grid > x-col[ps-m="stretch start"] { place-self: stretch start; }
  x-grid > x-col[ps-m="stretch center"] { place-self: stretch center; }
  x-grid > x-col[ps-m="stretch end"] { place-self: stretch end; }

  /* VISUAL ORDER */
  [order-m="first"] { order: -1; }
  [order-m="1"] { order: 1; }
  [order-m="2"] { order: 2; }
  [order-m="3"] { order: 3; }
  [order-m="4"] { order: 4; }
  [order-m="5"] { order: 5; }
  [order-m="6"] { order: 6; }
  [order-m="7"] { order: 7; }
  [order-m="8"] { order: 8; }
  [order-m="9"] { order: 9; }
  [order-m="10"] { order: 10; }
  [order-m="11"] { order: 11; }
  [order-m="12"] { order: 12; }
  [order-m="13"] { order: 13; }
  [order-m="14"] { order: 14; }
  [order-m="15"] { order: 15; }
  [order-m="16"] { order: 16; }
  [order-m="last"] { order: 99; }
}

/* for window width >= 1600 */
@media (min-width: 1599px) {
  x-grid[columns-l="1"] { --grid-tc: repeat(1, 1fr) }
  x-grid[columns-l="2"] { --grid-tc: repeat(2, 1fr) }
  x-grid[columns-l="3"] { --grid-tc: repeat(3, 1fr) }
  x-grid[columns-l="4"] { --grid-tc: repeat(4, 1fr) }
  x-grid[columns-l="5"] { --grid-tc: repeat(5, 1fr) }
  x-grid[columns-l="6"] { --grid-tc: repeat(6, 1fr) }
  x-grid[columns-l="7"] { --grid-tc: repeat(7, 1fr) }
  x-grid[columns-l="8"] { --grid-tc: repeat(8, 1fr) }
  x-grid[columns-l="9"] { --grid-tc: repeat(9, 1fr) }
  x-grid[columns-l="10"] { --grid-tc: repeat(10, 1fr) }
  x-grid[columns-l="11"] { --grid-tc: repeat(11, 1fr) }
  x-grid[columns-l="12"] { --grid-tc: repeat(12, 1fr) }
  x-grid[columns-l="13"] { --grid-tc: repeat(13, 1fr) }
  x-grid[columns-l="14"] { --grid-tc: repeat(14, 1fr) }
  x-grid[columns-l="15"] { --grid-tc: repeat(15, 1fr) }
  x-grid[columns-l="16"] { --grid-tc: repeat(16, 1fr) }
  
  /* span-l=start... */
  x-grid > x-col[span-l^="1"] { --grid-cs: 1 }
  x-grid > x-col[span-l^="2"] { --grid-cs: 2 }
  x-grid > x-col[span-l^="3"] { --grid-cs: 3 }
  x-grid > x-col[span-l^="4"] { --grid-cs: 4 }
  x-grid > x-col[span-l^="5"] { --grid-cs: 5 }
  x-grid > x-col[span-l^="6"] { --grid-cs: 6 }
  x-grid > x-col[span-l^="7"] { --grid-cs: 7 }
  x-grid > x-col[span-l^="8"] { --grid-cs: 8 }
  x-grid > x-col[span-l^="9"] { --grid-cs: 9 }
  x-grid > x-col[span-l^="10"] { --grid-cs: 10 }
  x-grid > x-col[span-l^="11"] { --grid-cs: 11 }
  x-grid > x-col[span-l^="12"] { --grid-cs: 12 }
  x-grid > x-col[span-l^="13"] { --grid-cs: 13 }
  x-grid > x-col[span-l^="14"] { --grid-cs: 14 }
  x-grid > x-col[span-l^="15"] { --grid-cs: 15 }
  x-grid > x-col[span-l^="16"] { --grid-cs: 16 }
  
  /* span-l=...+width, span-l=...-end */
  x-grid > x-col[span-l$="+1"], x-grid > x-col[span-l="1"] { --grid-ce: 1 }
  x-grid > x-col[span-l$="+2"], x-grid > x-col[span-l$="-1"], x-grid > x-col[span-l="2"] { --grid-ce: 2 }
  x-grid > x-col[span-l$="+3"], x-grid > x-col[span-l$="-2"], x-grid > x-col[span-l="3"] { --grid-ce: 3 }
  x-grid > x-col[span-l$="+4"], x-grid > x-col[span-l$="-3"], x-grid > x-col[span-l="4"] { --grid-ce: 4 }
  x-grid > x-col[span-l$="+5"], x-grid > x-col[span-l$="-4"], x-grid > x-col[span-l="5"] { --grid-ce: 5 }
  x-grid > x-col[span-l$="+6"], x-grid > x-col[span-l$="-5"], x-grid > x-col[span-l="6"] { --grid-ce: 6 }
  x-grid > x-col[span-l$="+7"], x-grid > x-col[span-l$="-6"], x-grid > x-col[span-l="7"] { --grid-ce: 7 }
  x-grid > x-col[span-l$="+8"], x-grid > x-col[span-l$="-7"], x-grid > x-col[span-l="8"] { --grid-ce: 8 }
  x-grid > x-col[span-l$="+9"], x-grid > x-col[span-l$="-8"], x-grid > x-col[span-l="9"] { --grid-ce: 9 }
  x-grid > x-col[span-l$="+10"], x-grid > x-col[span-l$="-9"], x-grid > x-col[span-l="10"] { --grid-ce: 10 }
  x-grid > x-col[span-l$="+11"], x-grid > x-col[span-l$="-10"], x-grid > x-col[span-l="11"] { --grid-ce: 11 }
  x-grid > x-col[span-l$="+12"], x-grid > x-col[span-l$="-11"], x-grid > x-col[span-l="12"] { --grid-ce: 12 }
  x-grid > x-col[span-l$="+13"], x-grid > x-col[span-l$="-12"], x-grid > x-col[span-l="13"] { --grid-ce: 13 }
  x-grid > x-col[span-l$="+14"], x-grid > x-col[span-l$="-13"], x-grid > x-col[span-l="14"] { --grid-ce: 14 }
  x-grid > x-col[span-l$="+15"], x-grid > x-col[span-l$="-14"], x-grid > x-col[span-l="15"] { --grid-ce: 15 }
  x-grid > x-col[span-l$="+16"], x-grid > x-col[span-l$="-15"], x-grid > x-col[span-l="16"] { --grid-ce: 16 }
  x-grid > x-col[span-l$="-16"] { --grid-ce: 17 }
  
  /* connect vars */
  x-grid > x-col[span-l] { grid-column-end: span var(--grid-ce) }
  x-grid > x-col[span-l*="+"], x-grid > x-col[span-l*="-"], x-grid > x-col[span-l*=".."] { grid-column-start: var(--grid-cs) }
  x-grid > x-col[span-l*="-"], x-grid > x-col[span-l*=".."] { grid-column-end: var(--grid-ce) }
  x-grid > x-col[span-l="row"] { grid-column: 1 / -1 }

  /* Justify CONTENT - for <x-grid> */
  x-grid[jc-l="start"] { justify-content: start; }
  x-grid[jc-l="center"] { justify-content: center; }
  x-grid[jc-l="end"] { justify-content: end; }
  x-grid[jc-l="stretch"] { justify-content: stretch; }
  x-grid[jc-l="around"] { justify-content: space-around; }
  x-grid[jc-l="between"] { justify-content: space-between; }
  x-grid[jc-l="evenly"] { justify-content: space-evenly; }

  /* Justify ITEMS - for <x-grid> */
  x-grid[ji-l="start"] { justify-items: start; }
  x-grid[ji-l="center"] { justify-items: center; }
  x-grid[ji-l="end"] { justify-items: end; }
  x-grid[ji-l="stretch"] { justify-items: stretch; }

  /* Align ITEMS - for <x-grid> */
  x-grid[ai-l="start"] { align-items: start; }
  x-grid[ai-l="center"] { align-items: center; }
  x-grid[ai-l="end"] { align-items: end; }
  x-grid[ai-l="stretch"] { align-items: stretch; }

  /* Align CONTENT - for <x-grid> */
  x-grid[ac-l="start"] { align-content: start; }
  x-grid[ac-l="center"] { align-content: center; }
  x-grid[ac-l="end"] { align-content: end; }
  x-grid[ac-l="stretch"] { align-content: stretch; }
  x-grid[ac-l="around"] { align-content: space-around; }
  x-grid[ac-l="between"] { align-content: space-between; }
  x-grid[ac-l="evenly"] { align-content: space-evenly; }

  /* Align SELF - for <x-col> */
  x-grid > x-col[as-l="start"] { align-self: start; }
  x-grid > x-col[as-l="center"] { align-self: center; }
  x-grid > x-col[as-l="end"] { align-self: end; }
  x-grid > x-col[as-l="stretch"] { align-self: stretch; }

  /* Justify SELF - for <x-col> */
  x-grid > x-col[js-l="start"] { justify-self: start; }
  x-grid > x-col[js-l="center"] { justify-self: center; }
  x-grid > x-col[js-l="end"] { justify-self: end; }
  x-grid > x-col[js-l="stretch"] { justify-self: stretch; }


  /* Place ITEMS - for <x-grid> */
  x-grid[pi-l="start"] { place-items: start; }
  x-grid[pi-l="center"] { place-items: center; }
  x-grid[pi-l="end"] { place-items: end; }
  x-grid[pi-l="stretch"] { place-items: stretch; }

  x-grid[pi-l="start center"] { place-items: start center; }
  x-grid[pi-l="start end"] { place-items: start end; }
  x-grid[pi-l="start stretch"] { place-items: start stretch; }

  x-grid[pi-l="center start"] { place-items: center start; }
  x-grid[pi-l="center end"] { place-items: center end; }
  x-grid[pi-l="center stretch"] { place-items: center stretch; }

  x-grid[pi-l="end start"] { place-items: end start; }
  x-grid[pi-l="end center"] { place-items: end center; }
  x-grid[pi-l="end stretch"] { place-items: end stretch; }

  x-grid[pi-l="stretch start"] { place-items: stretch start; }
  x-grid[pi-l="stretch center"] { place-items: stretch center; }
  x-grid[pi-l="stretch end"] { place-items: stretch end; }

  /* Place SELF - for <x-col> */
  x-grid > x-col[ps-l="start"] { place-self: start; }
  x-grid > x-col[ps-l="center"] { place-self: center; }
  x-grid > x-col[ps-l="end"] { place-self: end; }
  x-grid > x-col[ps-l="stretch"] { place-self: stretch; }

  x-grid > x-col[ps-l="start center"] { place-self: start center; }
  x-grid > x-col[ps-l="start end"] { place-self: start end; }
  x-grid > x-col[ps-l="start stretch"] { place-self: start stretch; }

  x-grid > x-col[ps-l="center start"] { place-self: center start; }
  x-grid > x-col[ps-l="center end"] { place-self: center end; }
  x-grid > x-col[ps-l="center stretch"] { place-self: center stretch; }

  x-grid > x-col[ps-l="end start"] { place-self: end start; }
  x-grid > x-col[ps-l="end center"] { place-self: end center; }
  x-grid > x-col[ps-l="end stretch"] { place-self: end stretch; }

  x-grid > x-col[ps-l="stretch start"] { place-self: stretch start; }
  x-grid > x-col[ps-l="stretch center"] { place-self: stretch center; }
  x-grid > x-col[ps-l="stretch end"] { place-self: stretch end; }

  /* VISUAL ORDER */
  [order-l="first"] { order: -1; }
  [order-l="1"] { order: 1; }
  [order-l="2"] { order: 2; }
  [order-l="3"] { order: 3; }
  [order-l="4"] { order: 4; }
  [order-l="5"] { order: 5; }
  [order-l="6"] { order: 6; }
  [order-l="7"] { order: 7; }
  [order-l="8"] { order: 8; }
  [order-l="9"] { order: 9; }
  [order-l="10"] { order: 10; }
  [order-l="11"] { order: 11; }
  [order-l="12"] { order: 12; }
  [order-l="13"] { order: 13; }
  [order-l="14"] { order: 14; }
  [order-l="15"] { order: 15; }
  [order-l="16"] { order: 16; }
  [order-l="last"] { order: 99; }
}

/* .debug can be added to a grid to visualize its effective columns */
x-grid.debug>*{ --color:rgba(248,110,91,0.3); background-image:-webkit-gradient(linear,left top,left bottom,from(var(--color)),to(var(--color))); background-image:linear-gradient(180deg,var(--color) 0,var(--color)) }
x-grid.debug>:nth-child(6n+2){ --color:rgba(103,126,208,0.3) }
x-grid.debug>:nth-child(6n+3){ --color:rgba(224,174,72,0.3) }
x-grid.debug>:nth-child(6n+4){ --color:rgba(77,214,115,0.3) }
x-grid.debug>:nth-child(6n+5){ --color:rgba(217,103,219,0.3) }
x-grid.debug>:nth-child(6n+6){ --color:rgba(94,204,211,0.3) }
x-grid.debug>:nth-child(6n+7){ --color:rgba(248,110,91,0.3) }

/* ------------------
  flexbox
------------------ */
/*  FLEX CONTAINER */
x-flex { display: flex; gap: var(--rowGap, 2rem) var(--columnGap, 1rem); }
x-flex > * { flex: 0 1 auto; appearance: none; -webkit-appearance: none; }
x-flex > * > img, x-flex > * > p > img { -o-object-fit: contain; object-fit: contain; max-width: 100% }

/*  FLEX DIRECTION */
x-flex[direction="column"] { flex-direction: column; }
x-flex[direction="column-reverse"] { flex-direction: column-reverse; }
x-flex[direction="row"] { flex-direction: row; }
x-flex[direction="row-reverse"] { flex-direction: row-reverse; }

/* WRAPPING */
x-flex[wrap],x-flex[wrap="wrap"] { flex-wrap: wrap; }
x-flex[wrap="nowrap"] { flex-wrap: nowrap; }
x-flex[wrap="reverse"] { flex-wrap: wrap-reverse; }

/* JUSTIFICATION */
x-flex[jc="start"] { justify-content: flex-start; }
x-flex[jc="center"] { justify-content: center; }
x-flex[jc="end"] { justify-content: flex-end; }
x-flex[jc="between"] { justify-content: space-between; }
x-flex[jc="around"] { justify-content: space-around; }

/* ALIGN CONTENT */
x-flex[ac="start"] { align-content: flex-start; }
x-flex[ac="center"] { align-content: center; }
x-flex[ac="end"] { align-content: flex-end; }
x-flex[ac="between"] { align-content: space-between; }
x-flex[ac="around"] { align-content: space-around; }
x-flex[ac="stretch"] { align-content: stretch; }

/* ALIGN ITEMS */
x-flex[ai="start"] { align-items: flex-start; }
x-flex[ai="center"] { align-items: center; }
x-flex[ai="end"] { align-items: flex-end; }
x-flex[ai="baseline"] { align-items: baseline; }
x-flex[ai="stretch"] { align-items: stretch; }
/* Baseline alignment */
x-flex[ai="first baseline"] { align-items: first baseline; }
x-flex[ai="last baseline"] { align-items: last baseline; } /* Overflow alignment (for positional alignment only) */ 
x-flex[ai="safe center"] { align-items: safe center; }
x-flex[ai="unsafe center"] { align-items: unsafe center; }

/* ALIGN SELF */
x-flex > x-col[as="auto"] { align-self: auto; }
x-flex > x-col[as="start"] { align-self: flex-start; }
x-flex > x-col[as="center"] { align-self: center; }
x-flex > x-col[as="end"] { align-self: flex-end; }
x-flex > x-col[as="baseline"] { align-self: baseline; }
x-flex > x-col[as="stretch"] { align-self: stretch; }

/* for window width <= 600 */
@media (max-width: 600px) {
    /*  FLEX DIRECTION */
    x-flex[direction-s="column"] { flex-direction: column; }
    x-flex[direction-s="column-reverse"] { flex-direction: column-reverse; }
    x-flex[direction-s="row"] { flex-direction: row; }
    x-flex[direction-s="row-reverse"] { flex-direction: row-reverse; }

    /* WRAPPING */
    x-flex[wrap],x-flex[wrap-s="wrap"] { flex-wrap: wrap; }
    x-flex[wrap-s="nowrap"] { flex-wrap: nowrap; }
    x-flex[wrap-s="reverse"] { flex-wrap: wrap-reverse; }

    /* JUSTIFICATION */
    x-flex[jc-s="start"] { justify-content: flex-start; }
    x-flex[jc-s="center"] { justify-content: center; }
    x-flex[jc-s="end"] { justify-content: flex-end; }
    x-flex[jc-s="between"] { justify-content: space-between; }
    x-flex[jc-s="around"] { justify-content: space-around; }

    /* ALIGN CONTENT */
    x-flex[ac-s="start"] { align-content: flex-start; }
    x-flex[ac-s="center"] { align-content: center; }
    x-flex[ac-s="end"] { align-content: flex-end; }
    x-flex[ac-s="between"] { align-content: space-between; }
    x-flex[ac-s="around"] { align-content: space-around; }
    x-flex[ac-s="stretch"] { align-content: stretch; }

    /* ALIGN ITEMS */
    x-flex[ai-s="start"] { align-items: flex-start; }
    x-flex[ai-s="center"] { align-items: center; }
    x-flex[ai-s="end"] { align-items: flex-end; }
    x-flex[ai-s="baseline"] { align-items: baseline; }
    x-flex[ai-s="stretch"] { align-items: stretch; }
    /* Baseline alignment */
    x-flex[ai-s="first baseline"] { align-items: first baseline; }
    x-flex[ai-s="last baseline"] { align-items: last baseline; } /* Overflow alignment (for positional alignment only) */ 
    x-flex[ai-s="safe center"] { align-items: safe center; }
    x-flex[ai-s="unsafe center"] { align-items: unsafe center; }

    /* ALIGN SELF */
    x-flex > x-col[as-s="auto"] { align-self: auto; }
    x-flex > x-col[as-s="start"] { align-self: flex-start; }
    x-flex > x-col[as-s="center"] { align-self: center; }
    x-flex > x-col[as-s="end"] { align-self: flex-end; }
    x-flex > x-col[as-s="baseline"] { align-self: baseline; }
    x-flex > x-col[as-s="stretch"] { align-self: stretch; }
}

/* for window width 601px <> 1024px */
@media (min-width: 601px) and (max-width: 1024px) {
    /*  FLEX DIRECTION */
    x-flex[direction-m="column"] { flex-direction: column; }
    x-flex[direction-m="column-reverse"] { flex-direction: column-reverse; }
    x-flex[direction-m="row"] { flex-direction: row; }
    x-flex[direction-m="row-reverse"] { flex-direction: row-reverse; }

    /* WRAPPING */
    x-flex[wrap],x-flex[wrap-m="wrap"] { flex-wrap: wrap; }
    x-flex[wrap-m="nowrap"] { flex-wrap: nowrap; }
    x-flex[wrap-m="reverse"] { flex-wrap: wrap-reverse; }

    /* JUSTIFICATION */
    x-flex[jc-m="start"] { justify-content: flex-start; }
    x-flex[jc-m="center"] { justify-content: center; }
    x-flex[jc-m="end"] { justify-content: flex-end; }
    x-flex[jc-m="between"] { justify-content: space-between; }
    x-flex[jc-m="around"] { justify-content: space-around; }

    /* ALIGN CONTENT */
    x-flex[ac-m="start"] { align-content: flex-start; }
    x-flex[ac-m="center"] { align-content: center; }
    x-flex[ac-m="end"] { align-content: flex-end; }
    x-flex[ac-m="between"] { align-content: space-between; }
    x-flex[ac-m="around"] { align-content: space-around; }
    x-flex[ac-m="stretch"] { align-content: stretch; }

    /* ALIGN ITEMS */
    x-flex[ai-m="start"] { align-items: flex-start; }
    x-flex[ai-m="center"] { align-items: center; }
    x-flex[ai-m="end"] { align-items: flex-end; }
    x-flex[ai-m="baseline"] { align-items: baseline; }
    x-flex[ai-m="stretch"] { align-items: stretch; }
    /* Baseline alignment */
    x-flex[ai-m="first baseline"] { align-items: first baseline; }
    x-flex[ai-m="last baseline"] { align-items: last baseline; } /* Overflow alignment (for positional alignment only) */ 
    x-flex[ai-m="safe center"] { align-items: safe center; }
    x-flex[ai-m="unsafe center"] { align-items: unsafe center; }

    /* ALIGN SELF */
    x-flex > x-col[as-m="auto"] { align-self: auto; }
    x-flex > x-col[as-m="start"] { align-self: flex-start; }
    x-flex > x-col[as-m="center"] { align-self: center; }
    x-flex > x-col[as-m="end"] { align-self: flex-end; }
    x-flex > x-col[as-m="baseline"] { align-self: baseline; }
    x-flex > x-col[as-m="stretch"] { align-self: stretch; }
}

/* for window width >= 1600 */
@media (min-width: 1599px) {
    /*  FLEX DIRECTION */
    x-flex[direction-l="column"] { flex-direction: column; }
    x-flex[direction-l="column-reverse"] { flex-direction: column-reverse; }
    x-flex[direction-l="row"] { flex-direction: row; }
    x-flex[direction-l="row-reverse"] { flex-direction: row-reverse; }

    /* WRAPPING */
    x-flex[wrap],x-flex[wrap-l="wrap"] { flex-wrap: wrap; }
    x-flex[wrap-l="nowrap"] { flex-wrap: nowrap; }
    x-flex[wrap-l="reverse"] { flex-wrap: wrap-reverse; }

    /* JUSTIFICATION */
    x-flex[jc-l="start"] { justify-content: flex-start; }
    x-flex[jc-l="center"] { justify-content: center; }
    x-flex[jc-l="end"] { justify-content: flex-end; }
    x-flex[jc-l="between"] { justify-content: space-between; }
    x-flex[jc-l="around"] { justify-content: space-around; }

    /* ALIGN CONTENT */
    x-flex[ac-l="start"] { align-content: flex-start; }
    x-flex[ac-l="center"] { align-content: center; }
    x-flex[ac-l="end"] { align-content: flex-end; }
    x-flex[ac-l="between"] { align-content: space-between; }
    x-flex[ac-l="around"] { align-content: space-around; }
    x-flex[ac-l="stretch"] { align-content: stretch; }

    /* ALIGN ITEMS */
    x-flex[ai-l="start"] { align-items: flex-start; }
    x-flex[ai-l="center"] { align-items: center; }
    x-flex[ai-l="end"] { align-items: flex-end; }
    x-flex[ai-l="baseline"] { align-items: baseline; }
    x-flex[ai-l="stretch"] { align-items: stretch; }
    /* Baseline alignment */
    x-flex[ai-l="first baseline"] { align-items: first baseline; }
    x-flex[ai-l="last baseline"] { align-items: last baseline; } /* Overflow alignment (for positional alignment only) */ 
    x-flex[ai-l="safe center"] { align-items: safe center; }
    x-flex[ai-l="unsafe center"] { align-items: unsafe center; }

    /* ALIGN SELF */
    x-flex > x-col[as-l="auto"] { align-self: auto; }
    x-flex > x-col[as-l="start"] { align-self: flex-start; }
    x-flex > x-col[as-l="center"] { align-self: center; }
    x-flex > x-col[as-l="end"] { align-self: flex-end; }
    x-flex > x-col[as-l="baseline"] { align-self: baseline; }
    x-flex > x-col[as-l="stretch"] { align-self: stretch; }
}

/* ------------------
  Cubic Beziers
------------------ */
/*
 * Can be used both in transition:; & animation:;
 * Example: transition: all 1s var(--easeInOutQuad);
*/
:root {
    --easeInSine: cubic-bezier(0.12, 0, 0.39, 0);
    --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
    --easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);

    --easeInQuad: cubic-bezier(0.11, 0, 0.5, 0);
    --easeOutQuad: cubic-bezier(0.5, 1, 0.89, 1);
    --easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);

    --easeInCubic: cubic-bezier(0.32, 0, 0.67, 0);
    --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
    --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);

    --easeInQuart: cubic-bezier(0.5, 0, 0.75, 0);
    --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
    --easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1);

    --easeInQuint: cubic-bezier(0.64, 0, 0.78, 0);
    --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
    --easeInOutQuint: cubic-bezier(0.83, 0, 0.17, 1);

    --easeInExpo: cubic-bezier(0.7, 0, 0.84, 0);
    --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
    --easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);

    --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
    --easeOutCirc: cubic-bezier(0, 0.55, 0.45, 1);
    --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);

    --easeInBack: cubic-bezier(0.36, 0, 0.66, -0.56);
    --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* ------------------
  animations
------------------ */
/*
 * To make it work you need: START | ANIMATION TYPE | DURATION | DELAY (optional) | CUBIC BEZIER (optional)
 * Example: <h1 start animation="fadein" ease="easeInOutCubic" style="--duration: 1s">example</h1>
*/

/** ANIMATION */
[start],
.animate {
    animation-fill-mode: both; 
    animation-name: var(--animation-name, fadeIn); /* default animation: fadeIn */
    animation-duration: var(--duration, 1s);  /* default duration: 1s */
    animation-delay: var(--delay, 0s); /* default delay: 0s */
    animation-timing-function: var(--ease, easeInOutCubic); /* default ease: easeInOutCubic */
}

/*** Cubic Bezier for ANIMATIONS • examples at: https://easings.net/ */
[ease="easeInSine"]     { --ease: var(--easeInSine); }
[ease="easeOutSine"]    { --ease: var(--easeOutSine); }
[ease="easeInOutSine"]  { --ease: var(--easeInOutSine); }

[ease="easeInQuad"]     { --ease: var(--easeInQuad); }
[ease="easeOutQuad"]    { --ease: var(--easeOutQuad); }
[ease="easeInOutQuad"]  { --ease: var(--easeInOutQuad); }

[ease="easeInCubic"]    { --ease: var(--easeInCubic); }
[ease="easeOutCubic"]   { --ease: var(--easeOutCubic); }
[ease="easeInOutCubic"] { --ease: var(--easeInOutCubic); }

[ease="easeInQuart"]    { --ease: var(--easeInQuart); }
[ease="easeOutQuart"]   { --ease: var(--easeOutQuart); }
[ease="easeInOutQuart"] { --ease: var(--easeInOutQuart); }

[ease="easeInQuint"]    { --ease: var(--easeInQuint); }
[ease="easeOutQuint"]   { --ease: var(--easeOutQuint); }
[ease="easeInOutQuint"] { --ease: var(--easeInOutQuint); }

[ease="easeInExpo"]     { --ease: var(--easeInExpo); }
[ease="easeOutExpo"]    { --ease: var(--easeOutExpo); }
[ease="easeInOutExpo"]  { --ease: var(--easeInOutExpo); }

[ease="easeInCirc"]     { --ease: var(--easeInCirc); }
[ease="easeOutCirc"]    { --ease: var(--easeOutCirc); }
[ease="easeInOutCirc"]  { --ease: var(--easeInOutCirc); }

[ease="easeInBack"]     { --ease: var(--easeInBack); }
[ease="easeOutBack"]    { --ease: var(--easeOutBack); }
[ease="easeInOutBack"]  { --ease: var(--easeInOutBack); }

.invisible, .hide { opacity: 0; }
.infinite, .loop { animation-iteration-count: infinite; }
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }
.alternate-reverse { animation-direction: alternate-reverse; }

[animation="fadein"] { --animation-name: fadeIn; }
[animation="fadein-up"] { --animation-name: fadeInUp; }
[animation="fadein-down"] { --animation-name: fadeInDown; }
[animation="fadein-right"] { --animation-name: fadeInRight; }
[animation="fadein-left"] { --animation-name: fadeInLeft; }
[animation="fadeout"] { --animation-name: fadeOut; }
[animation="fadeout-down"] { --animation-name: fadeOutDown; }
[animation="flash"] { --animation-name: flash; }
[animation="loading"] { --animation-name: loading; }
[animation="pulse"] { --animation-name: pulse; }
[animation="wobble"] { --animation-name: wobble; }
[animation="shake"] { --animation-name: shake; }
[animation="rollin"] { --animation-name: rollIn; }
[animation="rollout"] { --animation-name: rollOut; }
[animation="zoomin"] { --animation-name: zoomIn; }
[animation="zoomout"] { --animation-name: zoomIn; animation-direction: reverse; }
[animation="zoomin-down"] { --animation-name: zoomInDown; }
[animation="bounce"] { --animation-name: bounce; transform-origin: center bottom; }
[animation="bouncein"] { --animation-name: bounceIn; }
[animation="scalein"] { --animation-name: scaleIn; backface-visibility: hidden; transform: translateZ(0px); }
[animation="flip"] { --animation-name: flip; backface-visibility:visible }
[animation="flipin-x"] { --animation-name: flipInX; backface-visibility:visible  }
[animation="flipout-x"] { --animation-name: flipOutX; backface-visibility:visible }
[animation="flipin-y"] { --animation-name: flipInY; backface-visibility:visible}
[animation="flipout-y"] { --animation-name: flipOutY; backface-visibility:visible }

/**** Keyframes x Animations */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 20%, 0); } 100% { opacity: 1; transform: none; } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -20%, 0); } 100% { opacity: 1; transform: none; } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(20%, 0, 0); } 100% { opacity: 1; transform: none; } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; transform: none; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 110%, 0); } }
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }
@keyframes rollIn  { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; transform: none; } }
@keyframes rollOut  { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
@keyframes zoomIn  { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(3); } to { opacity: 1; transform: scale(1); } }

@keyframes pulse  { 
  0% { transform: scale3d(1,1,1); }
  50% { transform: scale3d(1.05,1.05,1.05); }
  100% { transform: scale3d(1,1,1); }
}

@keyframes shake  { 
  from, to { transform: translate3d(0,0,0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px,0,0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px,0,0); }
}

@keyframes zoomInDown  { 
  0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
  60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }
}

@keyframes bounce  { 
  from, 20%, 53%, 80%, to { --ease: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0, 0, 0); }
  40%, 43% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -30px, 0); }
  70% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0); }
  90% { transform: translate3d(0, -4px, 0); }
}

@keyframes flip  { 
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}

@keyframes flipInX  { 
  from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}

@keyframes flipOutX  { 
  from { -webkit-transform: perspective(400px); transform: perspective(400px); }
  30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
}

@keyframes flipInY  { 
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}

@keyframes flipOutY  { 
  from { -webkit-transform: perspective(400px); transform: perspective(400px); }
  30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; }
  to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
}

@keyframes wobble {
  from { -webkit-transform: none; transform: none; }
  15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}
  30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}
  45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { -webkit-transform: none; transform: none; }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
  to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}