/*! Skelet.css - v4.2.2 | MIT License | (c) 2023 Selekkt. | https://selekkt.dk/skelet/ */

/* ------------------
    variables
------------------ */
:root {
/** Colors */
    --primary: #006EF1;
    --red: #ff6961;
    --orange: #FFB340;
    --yellow: #FFD426;
    --green: #30DB5B;
    --purple: #6F64FC;
    --blue: #004FFF;
    --white: #FFF;
    --black: #000;
    --light: #EFEFEF;
    --dark: #181818;
    --shadow: rgba(10, 10, 10, 0.1);

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

    --bgColor: #FFF;
    --color: #000;
    --colorInverse: #FFF;

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

    --codeBg: #F8F8F8;
    --codeColor: var(--blue);

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

    /* typography */
    --fontFallback: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --fontFamily: "Inter", var(--fontFallback);
    --fontFamilyVar: "Inter var", var(--fontFallback);
    --fontMono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono","Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    --hFontFamily: var(--fontFamily);

    --globalScale: 1.0;

    --fontSize: clamp(calc(var(--globalScale) * var(--fontSizeMin, 1.6rem)), calc(var(--globalScale) * var(--fontSizeVal, 0.2vw + 1.6rem)), calc(var(--globalScale) * var(--fontSizeMax, 1.7rem)));
    --fontLine: calc(2px + 2ex + 2px);
    --fontSpace: normal;
    --fontWeight: 400;
    --fontStyle: normal;

    --hScale: var(--globalScale);

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

    /* input/textarea/tables etc. */
    --inputPadding: .7em;
    --inputMargin: 2px;
    --inputRadius: var(--radius);
    --inputBorderWidth: var(--borderWidth);
    --inputBorderStyle: var(--borderStyle);
    --inputFontSize: inherit;
    --inputHeight: 21px;

    --inputBg: #F8F8F8;
    --inputBgHover: var(--inputBg);
    --inputBgActive: var(--inputBg);
    --inputColor: var(--color);
    --inputPlaceholderColor: rgba(0,0,0,.4);
    --inputBorderColor: #E1E1E1;
    --inputBorderHover: #BABABA;
    --inputBorderActive: var(--primary);

    --inputShadow: 0 0 0 0 rgba(0,0,0,0);

    /* @for checkbox/radio/.switch */
    --inputActive: var(--primary);
    --inputActiveInner: var(--white);
    --inputFocus: rgba(41, 145, 248, .7);

    /* buttons */
    --buttonPadding: 1.3rem;
    --buttonMargin: var(--inputMargin);
    --buttonRadius: var(--radius);
    --buttonBorderWidth: var(--borderWidth);
    --buttonBorderStyle: var(--borderStyle);
    --buttonSize: inherit;
    --buttonWeight: 600;
    --buttonWidth: fit-content;

    --buttonBg: var(--primary);
    --buttonBgHover: var(--linkHover);
    --buttonColor: #FFF;
    --buttonColorHover: var(--buttonColor);
    --buttonBorderColor: transparent;
    --buttonBorderHover: transparent;
    --buttonShadow: 0 0 0 0 rgba(0,0,0,0);
    --icoSize: var(--fontSize);

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

/*** Dark Mode */
.dark-mode, [dark-mode], [color-scheme="dark"] {
    color-scheme: dark;

    --bgColor: #000;
    --color: rgba(255, 255, 255, 75%);
    --colorInverse: #000;

    --inputBg: #181818;
    --inputBgHover: var(--inputBg);
    --inputBgActive: var(--inputBg);
    --inputBorderColor: #333;
    --inputBorderHover: #444;
    --inputActive: var(--primary);
    --inputColor: var(--color);
    --inputPlaceholderColor: rgba(255,255,255,.4);

    --buttonBorderColor: transparent;
    --buttonBorderHover: transparent;

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

    --codeColor: var(--green);
    --codeBg: #111;

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

/* ------------------
    resets
------------------ */
*,*::before,*::after {box-sizing:border-box}
:not(pre) > code,:not(pre) > kbd,:not(pre) > samp { font-size: 1.2rem; font-family: var(--fontMono); white-space: nowrap }
img,svg,canvas,video,embed,object,dd { display: block; box-sizing: border-box; max-width: 100%; height: auto }
svg { overflow: visible; height: 100%; pointer-events: none!important }
iframe{display:block;border:0;max-width:100%}
dt {font-weight:bold}
dd {margin-inline-start:4rem}
figure {margin:0;width:fit-content}
figcaption { text-align: center; padding: var(--padding); font-size: 0.8em; }
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
[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;appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
[hidden],[type="hidden"],.hidden {display:none!important;outline:0}
[disabled],[disabled]:hover,.disabled { filter: grayscale(100%); opacity: 0.7!important; cursor: not-allowed!important; --buttonColor:var(--white); --buttonColorHover: var(--white) }

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

html { height: 100%; font-size: 62.5%; line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: var(--scrollBehavior, smooth); scroll-padding-top: var(--scrollPadding, auto) }
body { margin: 0; background: var(--bgColor); color: var(--color); font: var(--fontStyle) var(--fontWeight) var(--fontSize) var(--fontFamily); line-height: var(--fontLine); letter-spacing: var(--fontSpace) }

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

/* ------------------
  typography
------------------ */
h1,.h1 { --hSize: clamp(calc(var(--hScale) * var(--h1SizeMin, 3.1rem)), calc(var(--hScale) * var(--h1Val, 1.6vw + 2.7rem)), calc(var(--hScale) * var(--h1SizeMax, 4rem)));   line-height: var(--h1Line, var(--hLine, var(--fontLine))); letter-spacing: var(--h1Space, var(--hSpace)) }
h2,.h2 { --hSize: clamp(calc(var(--hScale) * var(--h2SizeMin, 2.7rem)), calc(var(--hScale) * var(--h2Val, 0.9vw + 2.5rem)), calc(var(--hScale) * var(--h2SizeMax, 3.2rem))); line-height: var(--h2Line, var(--hLine, var(--fontLine))); letter-spacing: var(--h2Space, var(--hSpace)) }
h3,.h3 { --hSize: clamp(calc(var(--hScale) * var(--h3SizeMin, 2.4rem)), calc(var(--hScale) * var(--h3Val, 0.7vw + 2.2rem)), calc(var(--hScale) * var(--h3SizeMax, 2.8rem))); line-height: var(--h3Line, var(--hLine, var(--fontLine))); letter-spacing: var(--h3Space, var(--hSpace)) }
h4,.h4 { --hSize: clamp(calc(var(--hScale) * var(--h4SizeMin, 2.2rem)), calc(var(--hScale) * var(--h4Val, 0.3vw + 2.1rem)), calc(var(--hScale) * var(--h4SizeMax, 2.4rem))); line-height: var(--h4Line, var(--hLine, var(--fontLine))); letter-spacing: var(--h4Space, var(--hSpace)) }
h5,.h5 { --hSize: clamp(calc(var(--hScale) * var(--h5SizeMin, 2rem)),   calc(var(--hScale) * var(--h5Val, 0.3vw + 1.9rem)), calc(var(--hScale) * var(--h5SizeMax, 2.2rem))); line-height: var(--h5Line, var(--hLine, var(--fontLine))); letter-spacing: var(--h5Space, var(--hSpace)) }
h6,.h6 { --hSize: clamp(calc(var(--hScale) * var(--h6SizeMin, 1.6rem)), calc(var(--hScale) * var(--h6Val, 0.2vw + 1.6rem)), calc(var(--hScale) * var(--h6SizeMax, 1.7rem))); line-height: var(--h6Line, var(--hLine, var(--fontLine))); letter-spacing: var(--h6Space, var(--hSpace)) }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,.hx {
    font: var(--hStyle, normal) var(--hWeight, 600) var(--hSize) var(--hFontFamily);
    text-transform: var(--hTransform, inherit);
    text-align: var(--hAlign, inherit);
    text-wrap: balance;
    color: var(--hColor, currentColor);
    margin: var(--hMargin, 0 0 0.65em);
}

.hx { text-wrap: inherit; margin: 0 }

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

a:not([href]) { cursor: not-allowed }
a:not(.button) { color: var(--linkColor); cursor: pointer; text-decoration: var(--linkDecoration, auto) }
a:not(.button):hover { color: var(--linkHover); text-decoration: var(--linkHoverDecoration, auto) }

.all-states a:not(.button):focus { color: var(--linkFocus, inherit); text-decoration: var(--linkFocusDecoration, auto) }
.all-states a:not(.button):active { color: var(--linkActive, inherit); text-decoration: var(--linkActiveDecoration, auto) }
.all-states a:not(.button):not(:hover):visited { color: var(--linkVisited, inherit); text-decoration: var(--linkVisitedDecoration, auto) }

a.no-style { text-decoration: none }

/*** Accessibility */
*:focus-visible, *:focus { outline-offset: var(--a11yOffset, 2px) }
.a11y-off *:focus { outline: 0; box-shadow: none }
.a11y-custom *:focus, .a11y-custom a:focus { box-shadow: var(--a11yStyle, 0 0 0 0.20rem) var(--a11yColor, var(--inputFocus)); outline: 2px solid transparent; outline-offset: var(--a11yOffset, 2px) }

@supports selector(:focus-visible) {
    .a11y-off *:focus-visible { outline: 0; box-shadow: none }
    .a11y-custom *:focus-visible, .a11y-custom a:focus-visible { box-shadow: var(--a11yStyle, 0 0 0 0.20rem) var(--a11yColor, var(--inputFocus)); outline: 2px solid transparent; outline-offset: var(--a11yOffset, 2px) }
}

.visibility-hidden { visibility: hidden }
.sr-only, .visually-hidden, .visually-hidden-focus:not(:focus):not(:focus-within) { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important }
.skipTo { position: fixed; z-index: 999; top: var(--padding); left: var(--padding) }

/* if JS Active show el w/ .js -- if JS Disabled show el w/ .no-js */
:is(html.js .js, html.no-js .no-js):not(html) { display:var(--jsDisplay, inherit)!important }
:is(html.js .no-js, html.no-js .js):not(html) { display:none!important }

code, samp {
    padding: var(--inputPadding);
    margin: var(--inputMargin);
    font-size: 90%;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--codeBg);
    border: 1px solid var(--codeBorderColor, var(--inputBorderColor));
    color: var(--codeColor);
    border-radius: var(--inputRadius);
    overflow:hidden;
    display: inline-block;
}

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

kbd {
    display: inline-block;
    margin: var(--inputMargin);
    padding: var(--inputPadding);
    background: var(--inputBg);
    box-shadow: 0px 0px 10px 0 var(--shadow), 0 0.2rem 0 var(--inputBorderColor);
    border: 1px solid var(--inputBorderColor);
    border-radius: var(--inputRadius);
    color: var(--inputColor);
    text-align: center;
    min-width: 3rem;
}

/* ------------------
  utilities
------------------ */
.fullwidth { --buttonWidth: 100%; --inputWidth: 100%; width: 100% }
.fullwidth-max { max-width: 100% }
.fullheight { height: 100% }
.fullheight-max { max-height: 100% }
.full { width: 100%; height: 100% }
.full-max { max-width: 100%; max-height: 100% }

.fitcontent { width: fit-content }
.fitcontent-height { height: fit-content }

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

.text-clip { 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-bold { font-weight: 600 }
.text-uppercase { text-transform:uppercase }
.text-lowercase { text-transform:lowercase }
.text-capitalize { text-transform:capitalize }
.text-underline { border-block-end: 1px solid currentColor }
.text-line-through { text-decoration: line-through }
.text-break-word { overflow-wrap: break-word }
.text-balance { text-wrap: balance }

.sticky { position: sticky; top: var(--sticky, 0) }
.sticky-bottom { position: sticky; bottom: var(--sticky, 0) }
.sticky-none { position: inherit }

@media (max-width: 777px) {
    .fullwidth-s { --buttonWidth: 100%; --inputWidth: 100%; width: 100% }
    .fullwidth-max-s { max-width: 100% }
    .fullheight-s { height: 100% }
    .fullheight-max-s { max-height: 100% }
    .full-s { width: 100%; height: 100% }
    .full-max-s { max-width: 100%; max-height: 100% }

    .fitcontent-s { width: fit-content }
    .fitcontent-height-s { height: fit-content }

    .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 }

    .text-clip-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-bold-s { font-weight: 600 }
    .text-uppercase-s { text-transform:uppercase }
    .text-lowercase-s { text-transform:lowercase }
    .text-capitalize-s { text-transform:capitalize }
    .text-underline-s { border-block-end: 1px solid currentColor }
    .text-line-through-s { text-decoration: line-through }
    .text-break-word-s { overflow-wrap: break-word }
    .text-balance-s { text-wrap: balance }

    .sticky-s { position: sticky; top: var(--sticky, 0) }
    .sticky-bottom-s { position: sticky; bottom: var(--sticky, 0) }
    .sticky-none-s { position: inherit }
}

@media (min-width: 778px) and (max-width: 1024px) {
    .fullwidth-m { --buttonWidth: 100%; --inputWidth: 100%; width: 100% }
    .fullwidth-max-m { max-width: 100% }
    .fullheight-m { height: 100% }
    .fullheight-max-m { max-height: 100% }
    .full-m { width: 100%; height: 100% }
    .full-max-m { max-width: 100%; max-height: 100% }

    .fitcontent-m { width: fit-content }
    .fitcontent-height-m { height: fit-content }

    .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 }

    .text-clip-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .text-start-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-bold-m { font-weight: 600 }
    .text-uppercase-m { text-transform:uppercase }
    .text-lowercase-m { text-transform:lowercase }
    .text-capitalize-m { text-transform:capitalize }
    .text-underline-m { border-block-end: 1px solid currentColor }
    .text-line-through-m { text-decoration: line-through }
    .text-break-word-m { overflow-wrap: break-word }
    .text-balance-m { text-wrap: balance }

    .sticky-m { position: sticky; top: var(--sticky, 0) }
    .sticky-bottom-m { position: sticky; bottom: var(--sticky, 0) }
    .sticky-none-m { position: inherit }
}

@media (min-width: 1599px) {
    .fullwidth-l { --buttonWidth: 100%; --inputWidth: 100%; width: 100% }
    .fullwidth-max-l { max-width: 100% }
    .fullheight-l { height: 100% }
    .fullheight-max-l { max-height: 100% }
    .full-l { width: 100%; height: 100% }
    .full-max-l { max-width: 100%; max-height: 100% }

    .fitcontent-l { width: fit-content }
    .fitcontent-height-l { height: fit-content }

    .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 }

    .text-clip-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .text-start-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-bold-l { font-weight: 600 }
    .text-uppercase-l { text-transform:uppercase }
    .text-lowercase-l { text-transform:lowercase }
    .text-capitalize-l { text-transform:capitalize }
    .text-underline-l { border-block-end: 1px solid currentColor }
    .text-line-through-l { text-decoration: line-through }
    .text-break-word-l { overflow-wrap: break-word }
    .text-balance-l { text-wrap: balance }

    .sticky-l { position: sticky; top: var(--sticky, 0) }
    .sticky-bottom-l { position: sticky; bottom: var(--sticky, 0) }
    .sticky-none-l { position: inherit }
}

.is-green { border-color: var(--green)!important; --inputBorderColor: var(--green); --inputBorderHover: var(--green) }
.is-red, input:not(:placeholder-shown):invalid { border-color: var(--red)!important; --inputBorderColor: var(--red); --inputBorderHover: var(--red) }

/* Vertical and Horizontal align */
.center-axyz { display: grid; place-items: center }
.center-axyz.full { min-height: 100vh; width: 100% }
@media (max-width: 777px) { .center-axyz-s { display: grid; place-items: center } .center-axyz-s.full-s  { min-height: 100vh; width: 100% } }
@media (min-width: 1024px) { .center-axyz-m { display: grid; place-items: center } .center-axyz-m.full-m { min-height: 100vh; width: 100% } }
@media (min-width: 1599px) { .center-axyz-l { display: grid; place-items: center } .center-axyz-l.full-l { min-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 (min-width: 1024px) { .small-medium { display: none!important } }
@media (max-width: 1024px) { .medium-large { display: none!important } }

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

.no-scrollbars { scrollbar-width:none; -ms-overflow-style:none }
.no-scrollbars::-webkit-scrollbar { display:none }
@media (max-width: 777px)  { .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;
    --scrollPadding: 0;
    --scrollStop: normal;
    --scrollJustifyContent: start;
    --scrollAlignItems: center;
    --scrollFlexFlow: row nowrap;
    --scrollChildHeight: auto;
    --scrollChildWidth: 100%;
    --scrollChildMinWidth: 100%;
    --scrollOverflowX: scroll;
    --scrollOverflowY: hidden;
    display: flex;
    flex-flow: var(--scrollFlexFlow);
    gap: var(--scrollMargin);
    justify-content: var(--scrollJustifyContent);
    align-items: var(--scrollAlignItems);
    height: 100%;
    min-height: var(--scrollHeight);
    overflow-x: var(--scrollOverflowX);
    overflow-y: var(--scrollOverflowY);
    counter-reset: item;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-margin: var(--scrollMargin);
    scroll-padding: var(--scrollPadding);
    scroll-snap-stop: var(--scrollStop);
    scroll-snap-type: var(--scrollDirection) var(--scrollType);
}

.scroll-snap > * { flex: var(--scrollChildFlex, 1); width: var(--scrollChildWidth); min-width: var(--scrollChildMinWidth); height: var(--scrollChildHeight); scroll-snap-align: var(--scrollAlign) }
.scroll-snap.y { --scrollDirection: y; --scrollFlexFlow: column nowrap; --scrollAlignItems: start; --scrollHeight: 100vh; --scrollOverflowX: hidden; --scrollOverflowY: scroll; }
.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 */

/** Group inputs */
.stack {
    --buttonMargin: auto;
    --buttonHeight: 100%;
    --buttonWeight: 400;
    display: var(--stackDisplay, inline-flex);
    justify-content: var(--stackJc, center);
    align-items: var(--stackAi, center);
    height: var(--stackHeight, inherit);
    width: var(--stackWidth, inherit);
    overflow: var(--stackOverflow, initial);
}
.stack.no-style > * { border: 0; margin: 0; border-radius: 0; height: auto; background: transparent!important; color: currentColor; font-size: var(--stackFontSize, inherit) }
.stack.no-style > input:is(:hover,:focus,:active) { border: none }
.stack:is(.no-style,.presuffix) input:focus { box-shadow: none; outline: none!important; border: none!important }

.stack.presuffix {
    --buttonColor: currentColor;
    background: var(--inputBg);
    color: var(--inputColor);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderColor);
    border-radius: var(--inputRadius);
    margin: var(--inputMargin);
    width: var(--inputWidth, 100%);
}

.stack.presuffix:hover { border-color: var(--inputBorderHover); color: var(--inputColorHover); background: var(--inputBgHover) }
.stack.presuffix:focus-within { border-color: var(--inputBorderActive); color: var(--inputColorActive); background: var(--inputBgActive) }
.stack.presuffix > * { padding: var(--inputPadding); margin: 0; font-size: var(--stackFontSize, inherit) }
.stack.presuffix > label { white-space: nowrap; font-weight: normal }
.stack.presuffix > :where(label,button,span):first-child { border: 0; border-inline-end: inherit }
.stack.presuffix > :where(label,button,span):last-child { border: 0; border-inline-start: inherit }

/* ------------------
  buttons
------------------ */
button,.button,[type="button"],[type="submit"],[type="reset"] {
    padding: var(--buttonPadding);
    margin: var(--buttonMargin);
    height: var(--buttonHeight, fit-content);
    width: var(--buttonWidth);
    border-radius: var(--buttonRadius);
    border: var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor);
    box-shadow: var(--buttonShadow);
    background: var(--buttonBg);
    font-size: var(--buttonSize);
    font-weight: var(--buttonWeight);
    letter-spacing: var(--buttonSpacing, .03em);
    line-height: var(--buttonLineHeight, 1);
    color: var(--buttonColor);
    text-align: var(--buttonAlign, center);
    text-transform: var(--buttonTextTransform, inherit);
    white-space: nowrap;
    font-style: inherit;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    justify-content: var(--buttonAlign, center);
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

:where(button,.button,[type="button"],[type="submit"],[type="reset"]):hover { --buttonBg: var(--buttonBgHover); --buttonColor: var(--buttonColorHover); --buttonBorderColor: var(--buttonBorderHover) }

.has-icon { display: inline-flex; align-items: center; justify-content: center; gap: var(--buttonPadding) }
.has-icon i { display: grid; place-items: center; font-size: max(15px, var(--buttonSize)); pointer-events: none }
.has-icon i > svg { display: inline; height: var(--icoSizeW, var(--icoSize)); width: var(--icoSizeW, var(--icoSize)) }

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

.is-pill:where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonRadius:100vw }

.is-circle:where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonRadius: 100vw; aspect-ratio: 1 / 1; }
.is-circle:not(.has-icon):where(button,.button,[type="button"],[type="submit"],[type="reset"]) { padding: 1em; width: 1em; height: 1em }

.is-square:where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonRadius:0 }

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

.is-loading:where(span,button,.button,[type="button"],[type="submit"],[type="reset"]):not(:empty):after { margin-inline-start: 1rem }

.is-unset { all: unset }
.is-link:where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonBg: transparent; --buttonColor: currentColor; --buttonPadding: 0; --buttonMargin: 0; --buttonWeight: inherit; --buttonSize: inherit }
.is-blank:where(button,.button,[type="button"],[type="submit"],[type="reset"]) { background: transparent; --buttonBorderColor: transparent; --buttonBorderHover: var(--buttonBorderColor); --buttonColor: currentColor; --buttonColorHover: currentColor }
.is-custom:where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonBg: transparent; --buttonBorderColor: transparent; --buttonBorderHover: transparent; --buttonColor: currentColor; --buttonColorHover: currentColor }

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

.is-white:where(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:where(button,.button,[type="button"],[type="submit"],[type="reset"]):not(.is-outline) { --buttonBg:var(--black); --buttonBgHover:var(--buttonBg); --buttonColor:var(--white) }

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

:where(.is-primary,.is-blue,.is-green,.is-yellow,.is-red,.is-orange,.is-purple):where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonBg:var(--primary); --buttonBgHover:var(--buttonBg); --buttonBorderColor:var(--buttonBg); --buttonBorderColorHover:var(--buttonBg) }
:where(.is-green,.is-yellow,.is-red,.is-orange):where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonColor: var(--black) }

.is-primary:where(button,.button,[type="button"],[type="submit"],[type="reset"]) { --buttonBg: var(--primary) }
.is-blue:where(button,.button,[type="button"],[type="submit"],[type="reset"])    { --buttonBg: var(--blue); --buttonColorHover: var(--white) }
.is-green:where(button,.button,[type="button"],[type="submit"],[type="reset"])   { --buttonBg: var(--green); --buttonColorHover: var(--black) }
.is-yellow:where(button,.button,[type="button"],[type="submit"],[type="reset"])  { --buttonBg: var(--yellow); --buttonColorHover: var(--black) }
.is-red:where(button,.button,[type="button"],[type="submit"],[type="reset"])     { --buttonBg: var(--red); --buttonColorHover: var(--black) }
.is-orange:where(button,.button,[type="button"],[type="submit"],[type="reset"])  { --buttonBg: var(--orange); --buttonColorHover: var(--black) }
.is-purple:where(button,.button,[type="button"],[type="submit"],[type="reset"])  { --buttonBg: var(--purple) }

.is-blue:where(button,.button,[type="button"],[type="submit"],[type="reset"]):not(.is-outline) { --buttonColor: var(--white) }

/** Radio checkbox switch */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    height: var(--inputHeight);
    width: var(--inputHeight);
    aspect-ratio: 1 / 1;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--inputBorderColor));
    background: var(--b, var(--inputBgColor));
}

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

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    --b: var(--inputActive);
    --bc: var(--inputActive);
    --d-o: 100ms;
    --d-t: 250ms;
    --d-t-e: ease-in-out;
}

/* Disabled */
input[type="checkbox"]:disabled,input[type="radio"]:disabled { filter: grayscale(100%); cursor: not-allowed; opacity: .7 }
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(--inputBorderHover) }

input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: 0 0 0 2px var(--inputFocus) }
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(--inputHeight);
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-inline-start: 4px;
    user-select: none;
}

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

input[type="checkbox"]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 1px solid var(--inputActiveInner);
    border-block-start: 0;
    border-inline-start: 0;
    left: 7px;
    top: 4.5px;
    transform: rotate(43deg);
}

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

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

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

/* Radio */
input[type="radio"] { border-radius: 100vw }

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

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

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

input[type="color"],
input[type="date"],
input[type="datetime"],
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],
input[list],
select,
textarea {
    padding: var(--inputPadding);
    margin: var(--inputMargin);
    border-radius: var(--inputRadius);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderColor);
    box-shadow: var(--inputShadow);
    background-color: var(--inputBg);
    font-size: var(--inputFontSize);
    font-weight: var(--inputFontWeight);
    color: var(--inputColor);
    text-align: var(--inputAlign, start);
    width: var(--inputWidth, 100%);
    transition: border 200ms ease-out;
    -webkit-appearance: none;
    appearance: none;
}

input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]: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,
input[list]:hover,
select:hover,
textarea:hover {
    background-color: var(--inputBgHover);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderHover);
}

input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]: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,
input[list]:focus,
select:focus,
textarea:focus {
    background-color: var(--inputBgActive);
    border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderActive, inherit);
}

input[type="color"] { height:4rem; min-width:6em; padding:calc(.25rem - 1px) 0.5rem; display:block; width:auto; cursor:pointer }

input[type="file"] { --inputBorderWidth: 2px; --inputBorderStyle: dashed; display:block; padding: 0; line-height: 2.4; cursor:pointer; width: fit-content; height: auto }
input[type="file"]::file-selector-button { border: 0; border-inline-end: 1px solid var(--inputBorderColor); padding: .2em .4em; margin-inline-end: var(--padding); border-radius: 0; background: var(--inputBgActive); color: currentColor; display: inline-block; height: 100% }

input[type="range"] { height: 25px; margin: 10px 0; width: 100%; background: transparent; -webkit-appearance: none; appearance: none }
input[type="range"]::-moz-range-track              { width: 100%; height: 5px; cursor: pointer; transition: all 0.2s ease-in-out; background: var(--primary); border-radius: 100vw }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; transition: all 0.2s ease-in-out; background: var(--primary); border-radius: 100vw }

input[type="range"]::-moz-range-thumb     { border: 1px solid rgba(0,0,0,.5); height: 18px; width: 18px; border-radius: 25px; background: var(--primary); cursor: pointer; -webkit-appearance: none; appearance: none; margin-block-start: -7px }
input[type="range"]::-webkit-slider-thumb { border: 1px solid rgba(0,0,0,.5); height: 18px; width: 18px; border-radius: 25px; background: var(--primary); cursor: pointer; -webkit-appearance: none; appearance: none; margin-block-start: -7px }

textarea { min-height: 6.5rem; padding: var(--inputPadding); border-radius: var(--textareaRadius, var(--inputRadius)) }
textarea.resize-vertical { resize: vertical }
textarea.resize-horizontal { resize: horizontal }
label, legend { display: inline-flex; gap: 0.7rem; margin-block-end: var(--inputMargin); font-weight: 600; align-items: center }
fieldset { border: 1px solid var(--inputBorderColor); border-radius: var(--inputRadius) }
legend { padding: var(--inputPadding) }
option { padding: 5px; color: var(--inputColor) }
label span { color: var(--color); margin: 0 0.5rem; font-weight: normal }
:is(input,textarea).is-blank { border:none!important; background:transparent }

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--inputBorderColor) 50%), linear-gradient(135deg, var(--inputBorderColor) 50%, transparent 50%), linear-gradient(to right, var(--inputBorderColor), var(--inputBorderColor));
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%, calc(100% - 40px) 50%;
    background-size: 5px 5px, 5px 5px, 1px 100%;
    background-repeat: no-repeat;
    color: var(--inputColor);
    padding-inline-end: 45px;
}

[dir="rtl"] select { padding-inline-start: 53px }

select:required:invalid { color:var(--inputPlaceholderColor) }
select:hover { color: var(--inputColor); background-image: linear-gradient(45deg, transparent 50%, var(--inputBorderHover) 50%), linear-gradient(135deg, var(--inputBorderHover) 50%, transparent 50%), linear-gradient(to right, var(--inputBorderHover), var(--inputBorderHover)) }
select:focus { color: var(--inputColor); background-image: linear-gradient(45deg, transparent 50%, var(--inputBorderActive, var(--inputBorderHover)) 50%), linear-gradient(135deg, var(--inputBorderActive, var(--inputBorderHover)) 50%, transparent 50%), linear-gradient(to right, var(--inputBorderActive, var(--inputBorderHover)), var(--inputBorderActive)) }
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-inline-start: 0; margin-block-start: 0 }
ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 100% }
li { margin-block-end: var(--liMargin, 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.inside, ol.no-style.inside { --liMargin: 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 }
hr:not([size]) { height: 1px }
hr.gradient { background-color: transparent; background-image: linear-gradient(to right, var(--hrGradient) 0%, var(--hrColor) 50%, var(--hrGradient) 100%) }

/* .text-hr:  --- text --- // .text-hre: text --- // .text-hrs: --- text */
.text-hr, .text-hre, .text-hrs { display: flex; align-items: center; text-align: center; margin: var(--hrMargin) auto }
.text-hr::before, .text-hr::after, .text-hre::before, .text-hrs::after { content: ""; flex: 1; border-block-end: 1px solid var(--hrColor) }
.text-hr::after, .text-hrs::after { margin-inline-start: var(--padding) }
.text-hr::before, .text-hre::before { margin-inline-end: var(--padding) }

/* ------------------
  tables
------------------ */
table {
    --tableColor: currentColor;
    --tableBg: var(--inputBg);
    --tableStrip: var(--inputBg);
    --tablePadding: var(--inputPadding);
    --tableBorderWidth: var(--inputBorderWidth);
    --tableBorderStyle: var(--inputBorderStyle);
    --tableBorderColor: var(--inputBorderColor);
    --tableBorder: var(--tableBorderWidth) var(--tableBorderStyle) var(--tableBorderColor);
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: -moz-fit-content;
    max-width: fit-content;
    border-spacing: 0;
    font-size: 1.4rem;
    margin: var(--margin);
}

table caption { margin: var(--margin) }
table tr td { padding: var(--tablePadding); min-width: 150px; vertical-align: middle; border-block-end: var(--tableBorder) }
table tr:last-child td { border-block-end: 0 }

table th {
    position: relative;
    color: var(--tableColor);
    text-transform: uppercase;
    padding: var(--tablePadding);
    text-align: start;
    vertical-align: middle;
    border-block-start: var(--tableBorder);
    border-block-end: var(--tableBorder);
    overflow: hidden;
    font-weight: 400;
    letter-spacing: 0
}

table thead th { background: var(--tableBg) }
table th:first-child { border-radius: var(--radius) 0 0 var(--radius); border-inline-start: var(--tableBorder) }
table th:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-inline-end: var(--tableBorder) }

table.is-striped tr { border:0 }
table.is-striped tbody tr:nth-child(2n) td { background: var(--tableStrip); }

table.is-hover tbody tr:hover { background: var(--tableBg); border-radius: var(--radius) }

table:where(.is-sticky-head,.is-sticky-foot) { overflow: unset }
table.is-sticky-head thead { position: sticky; top: var(--sticky, .2rem); z-index: 2 }
table.is-sticky-foot tfoot { position: sticky; bottom: var(--sticky, .2rem); z-index: 1; background: var(--bgColor) }

table.has-borders { border: var(--tableBorder) }
table.has-borders th { border-radius: 0; border:0 }
table.has-borders td:not(:last-of-type) { border-inline-end: var(--tableBorder) }

/* ------------------
  css grid
------------------ */
:where(x-grid,[x-grid]) {
    --grid-mm: 200px, 1fr; /* auto-fit/fill minmax */
    --grid-tc: repeat(4, minmax(0,1fr)); /* template columns */
    --grid-cs: 1; /* column start */
    --grid-ce: -1; /* column end */
    --grid-rs: 1; /* row start */
    --grid-re: -1; /* row end */

    display: grid;
    gap: var(--rowGap, 1rem) var(--columnGap, 1rem);
    grid-template-columns: var(--grid-tc); /* default columns */
}

:where(x-grid,[x-grid]) img { object-fit: contain; max-width: 100% }
:where(x-grid,[x-grid]) > * { appearance: none; -webkit-appearance: none }

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

[columns="fit"] { --grid-tc: repeat(auto-fit, minmax(var(--grid-mm))) }
[columns="fill"] { --grid-tc: repeat(auto-fill, minmax(var(--grid-mm))) }
[columns="1f"] { --grid-tc: repeat(1, minmax(0,1fr)) }
[columns="1f"] > * { grid-column: 1 / -1 }

[columns="stack"] { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr }
[columns="stack"] > * { position: relative; grid-row: 1; grid-column: 1 }
[columns="stack"] > *:first-child { z-index: 1 }

/*** Grid Column - X axis */
:where(x-grid,[x-grid]) > *[span^="1"] { --grid-cs: 1 }
:where(x-grid,[x-grid]) > *[span^="2"] { --grid-cs: 2 }
:where(x-grid,[x-grid]) > *[span^="3"] { --grid-cs: 3 }
:where(x-grid,[x-grid]) > *[span^="4"] { --grid-cs: 4 }
:where(x-grid,[x-grid]) > *[span^="5"] { --grid-cs: 5 }
:where(x-grid,[x-grid]) > *[span^="6"] { --grid-cs: 6 }
:where(x-grid,[x-grid]) > *[span^="7"] { --grid-cs: 7 }
:where(x-grid,[x-grid]) > *[span^="8"] { --grid-cs: 8 }
:where(x-grid,[x-grid]) > *[span^="9"] { --grid-cs: 9 }
:where(x-grid,[x-grid]) > *[span^="10"] { --grid-cs: 10 }
:where(x-grid,[x-grid]) > *[span^="11"] { --grid-cs: 11 }
:where(x-grid,[x-grid]) > *[span^="12"] { --grid-cs: 12 }

:where(x-grid,[x-grid]) > *[span$="+1"], :where(x-grid,[x-grid]) > *[span="1"] { --grid-ce: 1 }
:where(x-grid,[x-grid]) > *[span$="+2"], :where(x-grid,[x-grid]) > *[span$="-1"], :where(x-grid,[x-grid]) > *[span="2"] { --grid-ce: 2 }
:where(x-grid,[x-grid]) > *[span$="+3"], :where(x-grid,[x-grid]) > *[span$="-2"], :where(x-grid,[x-grid]) > *[span="3"] { --grid-ce: 3 }
:where(x-grid,[x-grid]) > *[span$="+4"], :where(x-grid,[x-grid]) > *[span$="-3"], :where(x-grid,[x-grid]) > *[span="4"] { --grid-ce: 4 }
:where(x-grid,[x-grid]) > *[span$="+5"], :where(x-grid,[x-grid]) > *[span$="-4"], :where(x-grid,[x-grid]) > *[span="5"] { --grid-ce: 5 }
:where(x-grid,[x-grid]) > *[span$="+6"], :where(x-grid,[x-grid]) > *[span$="-5"], :where(x-grid,[x-grid]) > *[span="6"] { --grid-ce: 6 }
:where(x-grid,[x-grid]) > *[span$="+7"], :where(x-grid,[x-grid]) > *[span$="-6"], :where(x-grid,[x-grid]) > *[span="7"] { --grid-ce: 7 }
:where(x-grid,[x-grid]) > *[span$="+8"], :where(x-grid,[x-grid]) > *[span$="-7"], :where(x-grid,[x-grid]) > *[span="8"] { --grid-ce: 8 }
:where(x-grid,[x-grid]) > *[span$="+9"], :where(x-grid,[x-grid]) > *[span$="-8"], :where(x-grid,[x-grid]) > *[span="9"] { --grid-ce: 9 }
:where(x-grid,[x-grid]) > *[span$="+10"], :where(x-grid,[x-grid]) > *[span$="-9"], :where(x-grid,[x-grid]) > *[span="10"] { --grid-ce: 10 }
:where(x-grid,[x-grid]) > *[span$="+11"], :where(x-grid,[x-grid]) > *[span$="-10"], :where(x-grid,[x-grid]) > *[span="11"] { --grid-ce: 11 }
:where(x-grid,[x-grid]) > *[span$="+12"], :where(x-grid,[x-grid]) > *[span$="-11"], :where(x-grid,[x-grid]) > *[span="12"] { --grid-ce: 12 }
:where(x-grid,[x-grid]) > *[span$="-12"] { --grid-ce: 13 }

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

/*** Grid Row - Y axis */
:where(x-grid,[x-grid]) > *[span-y^="1"] { --grid-rs: 1 }
:where(x-grid,[x-grid]) > *[span-y^="2"] { --grid-rs: 2 }
:where(x-grid,[x-grid]) > *[span-y^="3"] { --grid-rs: 3 }
:where(x-grid,[x-grid]) > *[span-y^="4"] { --grid-rs: 4 }
:where(x-grid,[x-grid]) > *[span-y^="5"] { --grid-rs: 5 }
:where(x-grid,[x-grid]) > *[span-y^="6"] { --grid-rs: 6 }
:where(x-grid,[x-grid]) > *[span-y^="7"] { --grid-rs: 7 }
:where(x-grid,[x-grid]) > *[span-y^="8"] { --grid-rs: 8 }
:where(x-grid,[x-grid]) > *[span-y^="9"] { --grid-rs: 9 }
:where(x-grid,[x-grid]) > *[span-y^="10"] { --grid-rs: 10 }
:where(x-grid,[x-grid]) > *[span-y^="11"] { --grid-rs: 11 }
:where(x-grid,[x-grid]) > *[span-y^="12"] { --grid-rs: 12 }

:where(x-grid,[x-grid]) > *[span-y$="+1"], :where(x-grid,[x-grid]) > *[span-y="1"] { --grid-re: 1 }
:where(x-grid,[x-grid]) > *[span-y$="+2"], :where(x-grid,[x-grid]) > *[span-y$="-1"], :where(x-grid,[x-grid]) > *[span-y="2"] { --grid-re: 2 }
:where(x-grid,[x-grid]) > *[span-y$="+3"], :where(x-grid,[x-grid]) > *[span-y$="-2"], :where(x-grid,[x-grid]) > *[span-y="3"] { --grid-re: 3 }
:where(x-grid,[x-grid]) > *[span-y$="+4"], :where(x-grid,[x-grid]) > *[span-y$="-3"], :where(x-grid,[x-grid]) > *[span-y="4"] { --grid-re: 4 }
:where(x-grid,[x-grid]) > *[span-y$="+5"], :where(x-grid,[x-grid]) > *[span-y$="-4"], :where(x-grid,[x-grid]) > *[span-y="5"] { --grid-re: 5 }
:where(x-grid,[x-grid]) > *[span-y$="+6"], :where(x-grid,[x-grid]) > *[span-y$="-5"], :where(x-grid,[x-grid]) > *[span-y="6"] { --grid-re: 6 }
:where(x-grid,[x-grid]) > *[span-y$="+7"], :where(x-grid,[x-grid]) > *[span-y$="-6"], :where(x-grid,[x-grid]) > *[span-y="7"] { --grid-re: 7 }
:where(x-grid,[x-grid]) > *[span-y$="+8"], :where(x-grid,[x-grid]) > *[span-y$="-7"], :where(x-grid,[x-grid]) > *[span-y="8"] { --grid-re: 8 }
:where(x-grid,[x-grid]) > *[span-y$="+9"], :where(x-grid,[x-grid]) > *[span-y$="-8"], :where(x-grid,[x-grid]) > *[span-y="9"] { --grid-re: 9 }
:where(x-grid,[x-grid]) > *[span-y$="+10"], :where(x-grid,[x-grid]) > *[span-y$="-9"], :where(x-grid,[x-grid]) > *[span-y="10"] { --grid-re: 10 }
:where(x-grid,[x-grid]) > *[span-y$="+11"], :where(x-grid,[x-grid]) > *[span-y$="-10"], :where(x-grid,[x-grid]) > *[span-y="11"] { --grid-re: 11 }
:where(x-grid,[x-grid]) > *[span-y$="+12"], :where(x-grid,[x-grid]) > *[span-y$="-11"], :where(x-grid,[x-grid]) > *[span-y="12"] { --grid-re: 12 }
:where(x-grid,[x-grid]) > *[span-y$="-12"] { --grid-re: 13 }

/* connect vars */
:where(x-grid,[x-grid]) > *[span-y] { grid-row-end: span var(--grid-re) }
:where(x-grid,[x-grid]) > *[span-y*="+"], :where(x-grid,[x-grid]) > *[span-y*="-"] { grid-row-start: var(--grid-rs) }
:where(x-grid,[x-grid]) > *[span-y*="-"] { grid-row-end: var(--grid-re) }
:where(x-grid,[x-grid]) > *[span-y="1f"]  { grid-row: 1 / -1 }

/* [S] for window width <= 777px */
@media (max-width: 777px) {
  [columns-s="1"] { --grid-tc: repeat(1, minmax(0,1fr)) }
  [columns-s="2"] { --grid-tc: repeat(2, minmax(0,1fr)) }
  [columns-s="3"] { --grid-tc: repeat(3, minmax(0,1fr)) }
  [columns-s="4"] { --grid-tc: repeat(4, minmax(0,1fr)) }
  [columns-s="5"] { --grid-tc: repeat(5, minmax(0,1fr)) }
  [columns-s="6"] { --grid-tc: repeat(6, minmax(0,1fr)) }
  [columns-s="7"] { --grid-tc: repeat(7, minmax(0,1fr)) }
  [columns-s="8"] { --grid-tc: repeat(8, minmax(0,1fr)) }
  [columns-s="9"] { --grid-tc: repeat(9, minmax(0,1fr)) }
  [columns-s="10"] { --grid-tc: repeat(10, minmax(0,1fr)) }
  [columns-s="11"] { --grid-tc: repeat(11, minmax(0,1fr)) }
  [columns-s="12"] { --grid-tc: repeat(12, minmax(0,1fr)) }

  [columns-s="fit"] { --grid-tc: repeat(auto-fit, minmax(var(--grid-mm))) }
  [columns-s="fill"] { --grid-tc: repeat(auto-fill, minmax(var(--grid-mm))) }
  [columns-s="1f"] { --grid-tc: repeat(1, minmax(0,1fr)) }
  [columns-s="1f"] > * { grid-column: 1 / -1 }
  [columns-s="stack"] { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr }
  [columns-s="stack"] > * { position: relative; grid-row: 1; grid-column: 1 }
  [columns-s="stack"] > *:first-child { z-index: 1 }

  /*** Grid Column - X axis */
  :where(x-grid,[x-grid]) > *[span-s^="1"] { --grid-cs: 1 }
  :where(x-grid,[x-grid]) > *[span-s^="2"] { --grid-cs: 2 }
  :where(x-grid,[x-grid]) > *[span-s^="3"] { --grid-cs: 3 }
  :where(x-grid,[x-grid]) > *[span-s^="4"] { --grid-cs: 4 }
  :where(x-grid,[x-grid]) > *[span-s^="5"] { --grid-cs: 5 }
  :where(x-grid,[x-grid]) > *[span-s^="6"] { --grid-cs: 6 }
  :where(x-grid,[x-grid]) > *[span-s^="7"] { --grid-cs: 7 }
  :where(x-grid,[x-grid]) > *[span-s^="8"] { --grid-cs: 8 }
  :where(x-grid,[x-grid]) > *[span-s^="9"] { --grid-cs: 9 }
  :where(x-grid,[x-grid]) > *[span-s^="10"] { --grid-cs: 10 }
  :where(x-grid,[x-grid]) > *[span-s^="11"] { --grid-cs: 11 }
  :where(x-grid,[x-grid]) > *[span-s^="12"] { --grid-cs: 12 }

  :where(x-grid,[x-grid]) > *[span-s$="+1"], :where(x-grid,[x-grid]) > *[span-s="1"] { --grid-ce: 1 }
  :where(x-grid,[x-grid]) > *[span-s$="+2"], :where(x-grid,[x-grid]) > *[span-s$="-1"], :where(x-grid,[x-grid]) > *[span-s="2"] { --grid-ce: 2 }
  :where(x-grid,[x-grid]) > *[span-s$="+3"], :where(x-grid,[x-grid]) > *[span-s$="-2"], :where(x-grid,[x-grid]) > *[span-s="3"] { --grid-ce: 3 }
  :where(x-grid,[x-grid]) > *[span-s$="+4"], :where(x-grid,[x-grid]) > *[span-s$="-3"], :where(x-grid,[x-grid]) > *[span-s="4"] { --grid-ce: 4 }
  :where(x-grid,[x-grid]) > *[span-s$="+5"], :where(x-grid,[x-grid]) > *[span-s$="-4"], :where(x-grid,[x-grid]) > *[span-s="5"] { --grid-ce: 5 }
  :where(x-grid,[x-grid]) > *[span-s$="+6"], :where(x-grid,[x-grid]) > *[span-s$="-5"], :where(x-grid,[x-grid]) > *[span-s="6"] { --grid-ce: 6 }
  :where(x-grid,[x-grid]) > *[span-s$="+7"], :where(x-grid,[x-grid]) > *[span-s$="-6"], :where(x-grid,[x-grid]) > *[span-s="7"] { --grid-ce: 7 }
  :where(x-grid,[x-grid]) > *[span-s$="+8"], :where(x-grid,[x-grid]) > *[span-s$="-7"], :where(x-grid,[x-grid]) > *[span-s="8"] { --grid-ce: 8 }
  :where(x-grid,[x-grid]) > *[span-s$="+9"], :where(x-grid,[x-grid]) > *[span-s$="-8"], :where(x-grid,[x-grid]) > *[span-s="9"] { --grid-ce: 9 }
  :where(x-grid,[x-grid]) > *[span-s$="+10"], :where(x-grid,[x-grid]) > *[span-s$="-9"], :where(x-grid,[x-grid]) > *[span-s="10"] { --grid-ce: 10 }
  :where(x-grid,[x-grid]) > *[span-s$="+11"], :where(x-grid,[x-grid]) > *[span-s$="-10"], :where(x-grid,[x-grid]) > *[span-s="11"] { --grid-ce: 11 }
  :where(x-grid,[x-grid]) > *[span-s$="+12"], :where(x-grid,[x-grid]) > *[span-s$="-11"], :where(x-grid,[x-grid]) > *[span-s="12"] { --grid-ce: 12 }
  :where(x-grid,[x-grid]) > *[span-s$="-12"] { --grid-ce: 13 }

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

  /*** Grid Row - Y axis */
  :where(x-grid,[x-grid]) > *[span-y-s^="1"] { --grid-rs: 1 }
  :where(x-grid,[x-grid]) > *[span-y-s^="2"] { --grid-rs: 2 }
  :where(x-grid,[x-grid]) > *[span-y-s^="3"] { --grid-rs: 3 }
  :where(x-grid,[x-grid]) > *[span-y-s^="4"] { --grid-rs: 4 }
  :where(x-grid,[x-grid]) > *[span-y-s^="5"] { --grid-rs: 5 }
  :where(x-grid,[x-grid]) > *[span-y-s^="6"] { --grid-rs: 6 }
  :where(x-grid,[x-grid]) > *[span-y-s^="7"] { --grid-rs: 7 }
  :where(x-grid,[x-grid]) > *[span-y-s^="8"] { --grid-rs: 8 }
  :where(x-grid,[x-grid]) > *[span-y-s^="9"] { --grid-rs: 9 }
  :where(x-grid,[x-grid]) > *[span-y-s^="10"] { --grid-rs: 10 }
  :where(x-grid,[x-grid]) > *[span-y-s^="11"] { --grid-rs: 11 }
  :where(x-grid,[x-grid]) > *[span-y-s^="12"] { --grid-rs: 12 }

  :where(x-grid,[x-grid]) > *[span-y-s$="+1"], :where(x-grid,[x-grid]) > *[span-y-s="1"] { --grid-re: 1 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+2"], :where(x-grid,[x-grid]) > *[span-y-s$="-1"], :where(x-grid,[x-grid]) > *[span-y-s="2"] { --grid-re: 2 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+3"], :where(x-grid,[x-grid]) > *[span-y-s$="-2"], :where(x-grid,[x-grid]) > *[span-y-s="3"] { --grid-re: 3 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+4"], :where(x-grid,[x-grid]) > *[span-y-s$="-3"], :where(x-grid,[x-grid]) > *[span-y-s="4"] { --grid-re: 4 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+5"], :where(x-grid,[x-grid]) > *[span-y-s$="-4"], :where(x-grid,[x-grid]) > *[span-y-s="5"] { --grid-re: 5 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+6"], :where(x-grid,[x-grid]) > *[span-y-s$="-5"], :where(x-grid,[x-grid]) > *[span-y-s="6"] { --grid-re: 6 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+7"], :where(x-grid,[x-grid]) > *[span-y-s$="-6"], :where(x-grid,[x-grid]) > *[span-y-s="7"] { --grid-re: 7 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+8"], :where(x-grid,[x-grid]) > *[span-y-s$="-7"], :where(x-grid,[x-grid]) > *[span-y-s="8"] { --grid-re: 8 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+9"], :where(x-grid,[x-grid]) > *[span-y-s$="-8"], :where(x-grid,[x-grid]) > *[span-y-s="9"] { --grid-re: 9 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+10"], :where(x-grid,[x-grid]) > *[span-y-s$="-9"], :where(x-grid,[x-grid]) > *[span-y-s="10"] { --grid-re: 10 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+11"], :where(x-grid,[x-grid]) > *[span-y-s$="-10"], :where(x-grid,[x-grid]) > *[span-y-s="11"] { --grid-re: 11 }
  :where(x-grid,[x-grid]) > *[span-y-s$="+12"], :where(x-grid,[x-grid]) > *[span-y-s$="-11"], :where(x-grid,[x-grid]) > *[span-y-s="12"] { --grid-re: 12 }
  :where(x-grid,[x-grid]) > *[span-y-s$="-12"] { --grid-re: 13 }

  /* connect vars */
  :where(x-grid,[x-grid]) > *[span-y-s] { grid-row-end: span var(--grid-re) }
  :where(x-grid,[x-grid]) > *[span-y-s*="+"], :where(x-grid,[x-grid]) > *[span-y-s*="-"] { grid-row-start: var(--grid-rs) }
  :where(x-grid,[x-grid]) > *[span-y-s*="-"] { grid-row-end: var(--grid-re) }
  :where(x-grid,[x-grid]) > *[span-y-s="1f"]  { grid-row: 1 / -1 }
}

/* [M] for window width 778px <> 1024px */
@media (min-width: 778px) and (max-width: 1024px) {
  [columns-m="1"] { --grid-tc: repeat(1, minmax(0,1fr)) }
  [columns-m="2"] { --grid-tc: repeat(2, minmax(0,1fr)) }
  [columns-m="3"] { --grid-tc: repeat(3, minmax(0,1fr)) }
  [columns-m="4"] { --grid-tc: repeat(4, minmax(0,1fr)) }
  [columns-m="5"] { --grid-tc: repeat(5, minmax(0,1fr)) }
  [columns-m="6"] { --grid-tc: repeat(6, minmax(0,1fr)) }
  [columns-m="7"] { --grid-tc: repeat(7, minmax(0,1fr)) }
  [columns-m="8"] { --grid-tc: repeat(8, minmax(0,1fr)) }
  [columns-m="9"] { --grid-tc: repeat(9, minmax(0,1fr)) }
  [columns-m="10"] { --grid-tc: repeat(10, minmax(0,1fr)) }
  [columns-m="11"] { --grid-tc: repeat(11, minmax(0,1fr)) }
  [columns-m="12"] { --grid-tc: repeat(12, minmax(0,1fr)) }

  [columns-m="fit"] { --grid-tc: repeat(auto-fit, minmax(var(--grid-mm))) }
  [columns-m="fill"] { --grid-tc: repeat(auto-fill, minmax(var(--grid-mm))) }
  [columns-m="1f"] { --grid-tc: repeat(1, minmax(0,1fr)) }
  [columns-m="1f"] > * { grid-column: 1 / -1 }
  [columns-m="stack"] { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr }
  [columns-m="stack"] > * { position: relative; grid-row: 1; grid-column: 1 }
  [columns-m="stack"] > *:first-child { z-index: 1 }

  /*** Grid Column - X axis */
  :where(x-grid,[x-grid]) > *[span-m^="1"] { --grid-cs: 1 }
  :where(x-grid,[x-grid]) > *[span-m^="2"] { --grid-cs: 2 }
  :where(x-grid,[x-grid]) > *[span-m^="3"] { --grid-cs: 3 }
  :where(x-grid,[x-grid]) > *[span-m^="4"] { --grid-cs: 4 }
  :where(x-grid,[x-grid]) > *[span-m^="5"] { --grid-cs: 5 }
  :where(x-grid,[x-grid]) > *[span-m^="6"] { --grid-cs: 6 }
  :where(x-grid,[x-grid]) > *[span-m^="7"] { --grid-cs: 7 }
  :where(x-grid,[x-grid]) > *[span-m^="8"] { --grid-cs: 8 }
  :where(x-grid,[x-grid]) > *[span-m^="9"] { --grid-cs: 9 }
  :where(x-grid,[x-grid]) > *[span-m^="10"] { --grid-cs: 10 }
  :where(x-grid,[x-grid]) > *[span-m^="11"] { --grid-cs: 11 }
  :where(x-grid,[x-grid]) > *[span-m^="12"] { --grid-cs: 12 }

  :where(x-grid,[x-grid]) > *[span-m$="+1"], :where(x-grid,[x-grid]) > *[span-m="1"] { --grid-ce: 1 }
  :where(x-grid,[x-grid]) > *[span-m$="+2"], :where(x-grid,[x-grid]) > *[span-m$="-1"], :where(x-grid,[x-grid]) > *[span-m="2"] { --grid-ce: 2 }
  :where(x-grid,[x-grid]) > *[span-m$="+3"], :where(x-grid,[x-grid]) > *[span-m$="-2"], :where(x-grid,[x-grid]) > *[span-m="3"] { --grid-ce: 3 }
  :where(x-grid,[x-grid]) > *[span-m$="+4"], :where(x-grid,[x-grid]) > *[span-m$="-3"], :where(x-grid,[x-grid]) > *[span-m="4"] { --grid-ce: 4 }
  :where(x-grid,[x-grid]) > *[span-m$="+5"], :where(x-grid,[x-grid]) > *[span-m$="-4"], :where(x-grid,[x-grid]) > *[span-m="5"] { --grid-ce: 5 }
  :where(x-grid,[x-grid]) > *[span-m$="+6"], :where(x-grid,[x-grid]) > *[span-m$="-5"], :where(x-grid,[x-grid]) > *[span-m="6"] { --grid-ce: 6 }
  :where(x-grid,[x-grid]) > *[span-m$="+7"], :where(x-grid,[x-grid]) > *[span-m$="-6"], :where(x-grid,[x-grid]) > *[span-m="7"] { --grid-ce: 7 }
  :where(x-grid,[x-grid]) > *[span-m$="+8"], :where(x-grid,[x-grid]) > *[span-m$="-7"], :where(x-grid,[x-grid]) > *[span-m="8"] { --grid-ce: 8 }
  :where(x-grid,[x-grid]) > *[span-m$="+9"], :where(x-grid,[x-grid]) > *[span-m$="-8"], :where(x-grid,[x-grid]) > *[span-m="9"] { --grid-ce: 9 }
  :where(x-grid,[x-grid]) > *[span-m$="+10"], :where(x-grid,[x-grid]) > *[span-m$="-9"], :where(x-grid,[x-grid]) > *[span-m="10"] { --grid-ce: 10 }
  :where(x-grid,[x-grid]) > *[span-m$="+11"], :where(x-grid,[x-grid]) > *[span-m$="-10"], :where(x-grid,[x-grid]) > *[span-m="11"] { --grid-ce: 11 }
  :where(x-grid,[x-grid]) > *[span-m$="+12"], :where(x-grid,[x-grid]) > *[span-m$="-11"], :where(x-grid,[x-grid]) > *[span-m="12"] { --grid-ce: 12 }
  :where(x-grid,[x-grid]) > *[span-m$="-12"] { --grid-ce: 13 }

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

  /*** Grid Row - Y axis */
  :where(x-grid,[x-grid]) > *[span-y-m^="1"] { --grid-rs: 1 }
  :where(x-grid,[x-grid]) > *[span-y-m^="2"] { --grid-rs: 2 }
  :where(x-grid,[x-grid]) > *[span-y-m^="3"] { --grid-rs: 3 }
  :where(x-grid,[x-grid]) > *[span-y-m^="4"] { --grid-rs: 4 }
  :where(x-grid,[x-grid]) > *[span-y-m^="5"] { --grid-rs: 5 }
  :where(x-grid,[x-grid]) > *[span-y-m^="6"] { --grid-rs: 6 }
  :where(x-grid,[x-grid]) > *[span-y-m^="7"] { --grid-rs: 7 }
  :where(x-grid,[x-grid]) > *[span-y-m^="8"] { --grid-rs: 8 }
  :where(x-grid,[x-grid]) > *[span-y-m^="9"] { --grid-rs: 9 }
  :where(x-grid,[x-grid]) > *[span-y-m^="10"] { --grid-rs: 10 }
  :where(x-grid,[x-grid]) > *[span-y-m^="11"] { --grid-rs: 11 }
  :where(x-grid,[x-grid]) > *[span-y-m^="12"] { --grid-rs: 12 }

  :where(x-grid,[x-grid]) > *[span-y-m$="+1"], :where(x-grid,[x-grid]) > *[span-y-m="1"] { --grid-re: 1 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+2"], :where(x-grid,[x-grid]) > *[span-y-m$="-1"], :where(x-grid,[x-grid]) > *[span-y-m="2"] { --grid-re: 2 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+3"], :where(x-grid,[x-grid]) > *[span-y-m$="-2"], :where(x-grid,[x-grid]) > *[span-y-m="3"] { --grid-re: 3 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+4"], :where(x-grid,[x-grid]) > *[span-y-m$="-3"], :where(x-grid,[x-grid]) > *[span-y-m="4"] { --grid-re: 4 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+5"], :where(x-grid,[x-grid]) > *[span-y-m$="-4"], :where(x-grid,[x-grid]) > *[span-y-m="5"] { --grid-re: 5 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+6"], :where(x-grid,[x-grid]) > *[span-y-m$="-5"], :where(x-grid,[x-grid]) > *[span-y-m="6"] { --grid-re: 6 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+7"], :where(x-grid,[x-grid]) > *[span-y-m$="-6"], :where(x-grid,[x-grid]) > *[span-y-m="7"] { --grid-re: 7 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+8"], :where(x-grid,[x-grid]) > *[span-y-m$="-7"], :where(x-grid,[x-grid]) > *[span-y-m="8"] { --grid-re: 8 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+9"], :where(x-grid,[x-grid]) > *[span-y-m$="-8"], :where(x-grid,[x-grid]) > *[span-y-m="9"] { --grid-re: 9 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+10"], :where(x-grid,[x-grid]) > *[span-y-m$="-9"], :where(x-grid,[x-grid]) > *[span-y-m="10"] { --grid-re: 10 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+11"], :where(x-grid,[x-grid]) > *[span-y-m$="-10"], :where(x-grid,[x-grid]) > *[span-y-m="11"] { --grid-re: 11 }
  :where(x-grid,[x-grid]) > *[span-y-m$="+12"], :where(x-grid,[x-grid]) > *[span-y-m$="-11"], :where(x-grid,[x-grid]) > *[span-y-m="12"] { --grid-re: 12 }
  :where(x-grid,[x-grid]) > *[span-y-m$="-12"] { --grid-re: 13 }

  /* connect vars */
  :where(x-grid,[x-grid]) > *[span-y-m] { grid-row-end: span var(--grid-re) }
  :where(x-grid,[x-grid]) > *[span-y-m*="+"], :where(x-grid,[x-grid]) > *[span-y-m*="-"] { grid-row-start: var(--grid-rs) }
  :where(x-grid,[x-grid]) > *[span-y-m*="-"] { grid-row-end: var(--grid-re) }
  :where(x-grid,[x-grid]) > *[span-y-m="1f"]  { grid-row: 1 / -1 }
}

/* [L] for window width >= 1600 */
@media (min-width: 1599px) {
  [columns-l="1"] { --grid-tc: repeat(1, minmax(0,1fr)) }
  [columns-l="2"] { --grid-tc: repeat(2, minmax(0,1fr)) }
  [columns-l="3"] { --grid-tc: repeat(3, minmax(0,1fr)) }
  [columns-l="4"] { --grid-tc: repeat(4, minmax(0,1fr)) }
  [columns-l="5"] { --grid-tc: repeat(5, minmax(0,1fr)) }
  [columns-l="6"] { --grid-tc: repeat(6, minmax(0,1fr)) }
  [columns-l="7"] { --grid-tc: repeat(7, minmax(0,1fr)) }
  [columns-l="8"] { --grid-tc: repeat(8, minmax(0,1fr)) }
  [columns-l="9"] { --grid-tc: repeat(9, minmax(0,1fr)) }
  [columns-l="10"] { --grid-tc: repeat(10, minmax(0,1fr)) }
  [columns-l="11"] { --grid-tc: repeat(11, minmax(0,1fr)) }
  [columns-l="12"] { --grid-tc: repeat(12, minmax(0,1fr)) }

  [columns-l="fit"] { --grid-tc: repeat(auto-fit, minmax(var(--grid-mm))) }
  [columns-l="fill"] { --grid-tc: repeat(auto-fill, minmax(var(--grid-mm))) }
  [columns-l="1f"] { --grid-tc: repeat(1, minmax(0,1fr)) }
  [columns-l="1f"] > * { grid-column: 1 / -1 }
  [columns-l="stack"] { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr }
  [columns-l="stack"] > * { position: relative; grid-row: 1; grid-column: 1 }
  [columns-l="stack"] > *:first-child { z-index: 1 }

  /*** Grid Column - X axis */
  :where(x-grid,[x-grid]) > *[span-l^="1"] { --grid-cs: 1 }
  :where(x-grid,[x-grid]) > *[span-l^="2"] { --grid-cs: 2 }
  :where(x-grid,[x-grid]) > *[span-l^="3"] { --grid-cs: 3 }
  :where(x-grid,[x-grid]) > *[span-l^="4"] { --grid-cs: 4 }
  :where(x-grid,[x-grid]) > *[span-l^="5"] { --grid-cs: 5 }
  :where(x-grid,[x-grid]) > *[span-l^="6"] { --grid-cs: 6 }
  :where(x-grid,[x-grid]) > *[span-l^="7"] { --grid-cs: 7 }
  :where(x-grid,[x-grid]) > *[span-l^="8"] { --grid-cs: 8 }
  :where(x-grid,[x-grid]) > *[span-l^="9"] { --grid-cs: 9 }
  :where(x-grid,[x-grid]) > *[span-l^="10"] { --grid-cs: 10 }
  :where(x-grid,[x-grid]) > *[span-l^="11"] { --grid-cs: 11 }
  :where(x-grid,[x-grid]) > *[span-l^="12"] { --grid-cs: 12 }

  :where(x-grid,[x-grid]) > *[span-l$="+1"], :where(x-grid,[x-grid]) > *[span-l="1"] { --grid-ce: 1 }
  :where(x-grid,[x-grid]) > *[span-l$="+2"], :where(x-grid,[x-grid]) > *[span-l$="-1"], :where(x-grid,[x-grid]) > *[span-l="2"] { --grid-ce: 2 }
  :where(x-grid,[x-grid]) > *[span-l$="+3"], :where(x-grid,[x-grid]) > *[span-l$="-2"], :where(x-grid,[x-grid]) > *[span-l="3"] { --grid-ce: 3 }
  :where(x-grid,[x-grid]) > *[span-l$="+4"], :where(x-grid,[x-grid]) > *[span-l$="-3"], :where(x-grid,[x-grid]) > *[span-l="4"] { --grid-ce: 4 }
  :where(x-grid,[x-grid]) > *[span-l$="+5"], :where(x-grid,[x-grid]) > *[span-l$="-4"], :where(x-grid,[x-grid]) > *[span-l="5"] { --grid-ce: 5 }
  :where(x-grid,[x-grid]) > *[span-l$="+6"], :where(x-grid,[x-grid]) > *[span-l$="-5"], :where(x-grid,[x-grid]) > *[span-l="6"] { --grid-ce: 6 }
  :where(x-grid,[x-grid]) > *[span-l$="+7"], :where(x-grid,[x-grid]) > *[span-l$="-6"], :where(x-grid,[x-grid]) > *[span-l="7"] { --grid-ce: 7 }
  :where(x-grid,[x-grid]) > *[span-l$="+8"], :where(x-grid,[x-grid]) > *[span-l$="-7"], :where(x-grid,[x-grid]) > *[span-l="8"] { --grid-ce: 8 }
  :where(x-grid,[x-grid]) > *[span-l$="+9"], :where(x-grid,[x-grid]) > *[span-l$="-8"], :where(x-grid,[x-grid]) > *[span-l="9"] { --grid-ce: 9 }
  :where(x-grid,[x-grid]) > *[span-l$="+10"], :where(x-grid,[x-grid]) > *[span-l$="-9"], :where(x-grid,[x-grid]) > *[span-l="10"] { --grid-ce: 10 }
  :where(x-grid,[x-grid]) > *[span-l$="+11"], :where(x-grid,[x-grid]) > *[span-l$="-10"], :where(x-grid,[x-grid]) > *[span-l="11"] { --grid-ce: 11 }
  :where(x-grid,[x-grid]) > *[span-l$="+12"], :where(x-grid,[x-grid]) > *[span-l$="-11"], :where(x-grid,[x-grid]) > *[span-l="12"] { --grid-ce: 12 }
  :where(x-grid,[x-grid]) > *[span-l$="-12"] { --grid-ce: 13 }

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

  /*** Grid Row - Y axis */
  :where(x-grid,[x-grid]) > *[span-y-l^="1"] { --grid-rs: 1 }
  :where(x-grid,[x-grid]) > *[span-y-l^="2"] { --grid-rs: 2 }
  :where(x-grid,[x-grid]) > *[span-y-l^="3"] { --grid-rs: 3 }
  :where(x-grid,[x-grid]) > *[span-y-l^="4"] { --grid-rs: 4 }
  :where(x-grid,[x-grid]) > *[span-y-l^="5"] { --grid-rs: 5 }
  :where(x-grid,[x-grid]) > *[span-y-l^="6"] { --grid-rs: 6 }
  :where(x-grid,[x-grid]) > *[span-y-l^="7"] { --grid-rs: 7 }
  :where(x-grid,[x-grid]) > *[span-y-l^="8"] { --grid-rs: 8 }
  :where(x-grid,[x-grid]) > *[span-y-l^="9"] { --grid-rs: 9 }
  :where(x-grid,[x-grid]) > *[span-y-l^="10"] { --grid-rs: 10 }
  :where(x-grid,[x-grid]) > *[span-y-l^="11"] { --grid-rs: 11 }
  :where(x-grid,[x-grid]) > *[span-y-l^="12"] { --grid-rs: 12 }

  :where(x-grid,[x-grid]) > *[span-y-l$="+1"], :where(x-grid,[x-grid]) > *[span-y-l="1"] { --grid-re: 1 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+2"], :where(x-grid,[x-grid]) > *[span-y-l$="-1"], :where(x-grid,[x-grid]) > *[span-y-l="2"] { --grid-re: 2 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+3"], :where(x-grid,[x-grid]) > *[span-y-l$="-2"], :where(x-grid,[x-grid]) > *[span-y-l="3"] { --grid-re: 3 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+4"], :where(x-grid,[x-grid]) > *[span-y-l$="-3"], :where(x-grid,[x-grid]) > *[span-y-l="4"] { --grid-re: 4 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+5"], :where(x-grid,[x-grid]) > *[span-y-l$="-4"], :where(x-grid,[x-grid]) > *[span-y-l="5"] { --grid-re: 5 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+6"], :where(x-grid,[x-grid]) > *[span-y-l$="-5"], :where(x-grid,[x-grid]) > *[span-y-l="6"] { --grid-re: 6 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+7"], :where(x-grid,[x-grid]) > *[span-y-l$="-6"], :where(x-grid,[x-grid]) > *[span-y-l="7"] { --grid-re: 7 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+8"], :where(x-grid,[x-grid]) > *[span-y-l$="-7"], :where(x-grid,[x-grid]) > *[span-y-l="8"] { --grid-re: 8 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+9"], :where(x-grid,[x-grid]) > *[span-y-l$="-8"], :where(x-grid,[x-grid]) > *[span-y-l="9"] { --grid-re: 9 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+10"], :where(x-grid,[x-grid]) > *[span-y-l$="-9"], :where(x-grid,[x-grid]) > *[span-y-l="10"] { --grid-re: 10 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+11"], :where(x-grid,[x-grid]) > *[span-y-l$="-10"], :where(x-grid,[x-grid]) > *[span-y-l="11"] { --grid-re: 11 }
  :where(x-grid,[x-grid]) > *[span-y-l$="+12"], :where(x-grid,[x-grid]) > *[span-y-l$="-11"], :where(x-grid,[x-grid]) > *[span-y-l="12"] { --grid-re: 12 }
  :where(x-grid,[x-grid]) > *[span-y-l$="-12"] { --grid-re: 13 }

  /* connect vars */
  :where(x-grid,[x-grid]) > *[span-y-l] { grid-row-end: span var(--grid-re) }
  :where(x-grid,[x-grid]) > *[span-y-l*="+"], :where(x-grid,[x-grid]) > *[span-y-l*="-"] { grid-row-start: var(--grid-rs) }
  :where(x-grid,[x-grid]) > *[span-y-l*="-"] { grid-row-end: var(--grid-re) }
  :where(x-grid,[x-grid]) > *[span-y-l="1f"]  { grid-row: 1 / -1 }
}

/* ------------------
  flexbox
------------------ */
/*  Flex Container */
:where(x-flex,[x-flex]) { display: flex; gap: var(--rowGap, 1rem) var(--columnGap, 1rem) }
:where(x-flex,[x-flex]) > * { flex: 0 1 auto; width: auto; appearance: none }
:where(x-flex,[x-flex]) .fullflex { flex: 1 1 auto }
:where(x-flex,[x-flex]).even > * { width: 100% }
:where(x-flex,[x-flex]) img { object-fit: contain; max-width: 100% }
:where(x-flex,[x-flex]) x-cell:has(svg) { flex-shrink: 0 } /* preventing svg from being cropped */

/*  Flex Direction */
[direction="column"] { flex-direction: column }
[direction="column-reverse"] { flex-direction: column-reverse }
[direction="row"] { flex-direction: row }
[direction="row-reverse"] { flex-direction: row-reverse }

/* Wrap */
[wrap],[wrap="wrap"] { flex-wrap: wrap }
[wrap="nowrap"] { flex-wrap: nowrap }
[wrap="reverse"] { flex-wrap: wrap-reverse }

/* Flex span */
:where(x-flex,[x-flex]) > *[span="1"]  { flex: 1 }
:where(x-flex,[x-flex]) > *[span="2"]  { flex: 2 }
:where(x-flex,[x-flex]) > *[span="3"]  { flex: 3 }
:where(x-flex,[x-flex]) > *[span="4"]  { flex: 4 }
:where(x-flex,[x-flex]) > *[span="5"]  { flex: 5 }
:where(x-flex,[x-flex]) > *[span="6"]  { flex: 6 }
:where(x-flex,[x-flex]) > *[span="7"]  { flex: 7 }
:where(x-flex,[x-flex]) > *[span="8"]  { flex: 8 }
:where(x-flex,[x-flex]) > *[span="9"]  { flex: 9 }
:where(x-flex,[x-flex]) > *[span="10"] { flex: 10 }
:where(x-flex,[x-flex]) > *[span="11"] { flex: 11 }
:where(x-flex,[x-flex]) > *[span="12"] { flex: 12 }
:where(x-flex,[x-flex]) > *[span="row"] { flex-basis: 100% }

/* for window width <= 777px */
@media (max-width: 777px) {
    /*  Flex Direction */
    [direction-s="column"] { flex-direction: column }
    [direction-s="column-reverse"] { flex-direction: column-reverse }
    [direction-s="row"] { flex-direction: row }
    [direction-s="row-reverse"] { flex-direction: row-reverse }

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

    /* Flex span */
    :where(x-flex,[x-flex]) > *[span-s="1"]  { flex: 1 }
    :where(x-flex,[x-flex]) > *[span-s="2"]  { flex: 2 }
    :where(x-flex,[x-flex]) > *[span-s="3"]  { flex: 3 }
    :where(x-flex,[x-flex]) > *[span-s="4"]  { flex: 4 }
    :where(x-flex,[x-flex]) > *[span-s="5"]  { flex: 5 }
    :where(x-flex,[x-flex]) > *[span-s="6"]  { flex: 6 }
    :where(x-flex,[x-flex]) > *[span-s="7"]  { flex: 7 }
    :where(x-flex,[x-flex]) > *[span-s="8"]  { flex: 8 }
    :where(x-flex,[x-flex]) > *[span-s="9"]  { flex: 9 }
    :where(x-flex,[x-flex]) > *[span-s="10"] { flex: 10 }
    :where(x-flex,[x-flex]) > *[span-s="11"] { flex: 11 }
    :where(x-flex,[x-flex]) > *[span-s="12"] { flex: 12 }
    :where(x-flex,[x-flex]) > *[span-s="row"] { flex-basis: 100% }
}

/* for window width 778px <> 1024px */
@media (min-width: 778px) and (max-width: 1024px) {
    /*  Flex Direction */
    [direction-m="column"] { flex-direction: column }
    [direction-m="column-reverse"] { flex-direction: column-reverse }
    [direction-m="row"] { flex-direction: row }
    [direction-m="row-reverse"] { flex-direction: row-reverse }

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

    /* Flex span */
    :where(x-flex,[x-flex]) > *[span-m="1"]  { flex: 1 }
    :where(x-flex,[x-flex]) > *[span-m="2"]  { flex: 2 }
    :where(x-flex,[x-flex]) > *[span-m="3"]  { flex: 3 }
    :where(x-flex,[x-flex]) > *[span-m="4"]  { flex: 4 }
    :where(x-flex,[x-flex]) > *[span-m="5"]  { flex: 5 }
    :where(x-flex,[x-flex]) > *[span-m="6"]  { flex: 6 }
    :where(x-flex,[x-flex]) > *[span-m="7"]  { flex: 7 }
    :where(x-flex,[x-flex]) > *[span-m="8"]  { flex: 8 }
    :where(x-flex,[x-flex]) > *[span-m="9"]  { flex: 9 }
    :where(x-flex,[x-flex]) > *[span-m="10"] { flex: 10 }
    :where(x-flex,[x-flex]) > *[span-m="11"] { flex: 11 }
    :where(x-flex,[x-flex]) > *[span-m="12"] { flex: 12 }
    :where(x-flex,[x-flex]) > *[span-m="row"] { flex-basis: 100% }
}

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

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

    /* Flex span */
    :where(x-flex,[x-flex]) > *[span-l="1"]  { flex: 1 }
    :where(x-flex,[x-flex]) > *[span-l="2"]  { flex: 2 }
    :where(x-flex,[x-flex]) > *[span-l="3"]  { flex: 3 }
    :where(x-flex,[x-flex]) > *[span-l="4"]  { flex: 4 }
    :where(x-flex,[x-flex]) > *[span-l="5"]  { flex: 5 }
    :where(x-flex,[x-flex]) > *[span-l="6"]  { flex: 6 }
    :where(x-flex,[x-flex]) > *[span-l="7"]  { flex: 7 }
    :where(x-flex,[x-flex]) > *[span-l="8"]  { flex: 8 }
    :where(x-flex,[x-flex]) > *[span-l="9"]  { flex: 9 }
    :where(x-flex,[x-flex]) > *[span-l="10"] { flex: 10 }
    :where(x-flex,[x-flex]) > *[span-l="11"] { flex: 11 }
    :where(x-flex,[x-flex]) > *[span-l="12"] { flex: 12 }
    :where(x-flex,[x-flex]) > *[span-l="row"] { flex-basis: 100% }
}

/* ------------------------
  Grid & Flexbox Utilities
------------------------ */
/* Justify CONTENT - F+G */
[jc="start"] { justify-content: start }
[jc="center"] { justify-content: center }
[jc="end"] { justify-content: end }
[jc="stretch"] { justify-content: stretch }
[jc="around"] { justify-content: space-around }
[jc="between"] { justify-content: space-between }
[jc="evenly"] { justify-content: space-evenly }

/* Justify ITEMS */
[ji="start"] { justify-items: start }
[ji="center"] { justify-items: center }
[ji="end"] { justify-items: end }
[ji="stretch"] { justify-items: stretch }

/* Align ITEMS */
[ai="start"] { align-items: start }
[ai="center"] { align-items: center }
[ai="end"] { align-items: end }
[ai="stretch"] { align-items: stretch }

/* Align CONTENT */
[ac="start"] { align-content: start }
[ac="center"] { align-content: center }
[ac="end"] { align-content: end }
[ac="stretch"] { align-content: stretch }
[ac="around"] { align-content: space-around }
[ac="between"] { align-content: space-between }
[ac="evenly"] { align-content: space-evenly }

/* Align SELF */
[as="start"] { align-self: start }
[as="center"] { align-self: center }
[as="end"] { align-self: end }
[as="stretch"] { align-self: stretch }

/* Justify SELF */
[js="start"] { justify-self: start }
[js="center"] { justify-self: center }
[js="end"] { justify-self: end }
[js="stretch"] { justify-self: stretch }

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

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

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

[pi="end start"] { place-items: end start }
[pi="end center"] { place-items: flex-end center }
[pi="end stretch"] { place-items: flex-end stretch }

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

/* Place CONTENT - place-content: align-content justify-content */
[pc="start"] { place-content: start }
[pc="center"] { place-content: center }
[pc="end"] { place-content: end }
[pc="stretch"] { place-content: stretch }
[pc="around"] { place-content: space-around }
[pc="between"] { place-content: space-between }
[pc="evenly"] { place-content: space-evenly }

[pc="start center"] { place-content: start center }
[pc="start end"] { place-content: start end }
[pc="start stretch"] { place-content: start stretch }
[pc="start around"] { place-content: start space-around }
[pc="start between"] { place-content: start space-between }
[pc="start evenly"] { place-content: start space-evenly }

[pc="center start"] { place-content: center start }
[pc="center end"] { place-content: center end }
[pc="center stretch"] { place-content: center stretch }
[pc="center around"] { place-content: center space-around }
[pc="center between"] { place-content: center space-between }
[pc="center evenly"] { place-content: center space-evenly }

[pc="end start"] { place-content: end start }
[pc="end center"] { place-content: end center }
[pc="end stretch"] { place-content: end stretch }
[pc="end around"] { place-content: end space-around }
[pc="end between"] { place-content: end space-between }
[pc="end evenly"] { place-content: end space-evenly }

[pc="stretch start"] { place-content: stretch start }
[pc="stretch center"] { place-content: stretch center }
[pc="stretch end"] { place-content: stretch end }
[pc="stretch around"] { place-content: stretch space-around }
[pc="stretch between"] { place-content: stretch space-between }
[pc="stretch evenly"] { place-content: stretch space-evenly }

[pc="around start"] { place-content: space-around start }
[pc="around center"] { place-content: space-around center }
[pc="around end"] { place-content: space-around end }
[pc="around stretch"] { place-content: space-around stretch }
[pc="around between"] { place-content: space-around space-between }
[pc="around evenly"] { place-content: space-around space-evenly }

[pc="between start"] { place-content: space-between start }
[pc="between center"] { place-content: space-between center }
[pc="between end"] { place-content: space-between end }
[pc="between stretch"] { place-content: space-between stretch }
[pc="between around"] { place-content: space-between space-around }
[pc="between evenly"] { place-content: space-between space-evenly }

[pc="evenly start"] { place-content: space-evenly start }
[pc="evenly center"] { place-content: space-evenly center }
[pc="evenly end"] { place-content: space-evenly end }
[pc="evenly stretch"] { place-content: space-evenly stretch }
[pc="evenly around"] { place-content: space-evenly space-around }
[pc="evenly between"] { place-content: space-evenly space-between }

/* Place SELF - place-self: align-self justify-self; */
[ps="start"] { place-self: start }
[ps="center"] { place-self: center }
[ps="end"] { place-self: end }
[ps="stretch"] { place-self: stretch }

[ps="start center"] { place-self: start center }
[ps="start end"] { place-self: start end }
[ps="start stretch"] { place-self: start stretch }

[ps="center start"] { place-self: center start }
[ps="center end"] { place-self: center end }
[ps="center stretch"] { place-self: center stretch }

[ps="end start"] { place-self: end start }
[ps="end center"] { place-self: end center }
[ps="end stretch"] { place-self: end stretch }

[ps="stretch start"] { place-self: stretch start }
[ps="stretch center"] { place-self: stretch center }
[ps="stretch end"] { place-self: stretch end }

/* flex-* start & end for flexbox (needed for safari) */
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[ji="start"] { justify-items: flex-start }
x-flex[ji="center"] { justify-items: center }
x-flex[ji="end"] { justify-items: flex-end }
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[ac="start"] { align-content: flex-start }
x-flex[ac="center"] { align-content: center }
x-flex[ac="end"] { align-content: flex-end }
x-flex[as="start"] { align-self: flex-start }
x-flex[as="center"] { align-self: center }
x-flex[as="end"] { align-self: flex-end }
x-flex[js="start"] { justify-self: flex-start }
x-flex[js="center"] { justify-self: center }
x-flex[js="end"] { justify-self: flex-end }
x-flex[pi="start"] { place-items: flex-start }
x-flex[pi="center"] { place-items: center }
x-flex[pi="end"] { place-items: flex-end }
x-flex[pi="start center"] { place-items: flex-start center }
x-flex[pi="start end"] { place-items: flex-start flex-end }
x-flex[pi="start stretch"] { place-items: flex-start stretch }
x-flex[pi="center start"] { place-items: center flex-start }
x-flex[pi="center end"] { place-items: center flex-end }
x-flex[pi="end start"] { place-items: flex-end flex-start }
x-flex[pi="end center"] { place-items: flex-end center }
x-flex[pi="end stretch"] { place-items: flex-end stretch }
x-flex[pi="stretch start"] { place-items: stretch flex-start }
x-flex[pi="stretch end"] { place-items: stretch flex-end }
x-flex[pc="start"] { place-content: flex-start }
x-flex[pc="center"] { place-content: center }
x-flex[pc="end"] { place-content: flex-end }
x-flex[pc="start center"] { place-content: flex-start center }
x-flex[pc="start end"] { place-content: flex-start flex-end }
x-flex[pc="start stretch"] { place-content: flex-start stretch }
x-flex[pc="start around"] { place-content: flex-start space-around }
x-flex[pc="start between"] { place-content: flex-start space-between }
x-flex[pc="start evenly"] { place-content: flex-start space-evenly }
x-flex[pc="center start"] { place-content: center flex-start }
x-flex[pc="center end"] { place-content: center flex-end }
x-flex[pc="end start"] { place-content: flex-end flex-start }
x-flex[pc="end center"] { place-content: flex-end center }
x-flex[pc="end stretch"] { place-content: flex-end stretch }
x-flex[pc="end around"] { place-content: flex-end space-around }
x-flex[pc="end between"] { place-content: flex-end space-between }
x-flex[pc="end evenly"] { place-content: flex-end space-evenly }
x-flex[pc="stretch start"] { place-content: stretch flex-start }
x-flex[pc="stretch end"] { place-content: stretch flex-end }
x-flex[pc="around start"] { place-content: space-around flex-start }
x-flex[pc="around end"] { place-content: space-around flex-end }
x-flex[pc="between start"] { place-content: space-between flex-start }
x-flex[pc="between end"] { place-content: space-between flex-end }
x-flex[pc="evenly start"] { place-content: space-evenly flex-start }
x-flex[pc="evenly end"] { place-content: space-evenly flex-end }
x-flex[ps="start"] { place-self: flex-start }
x-flex[ps="center"] { place-self: center }
x-flex[ps="end"] { place-self: flex-end }
x-flex[ps="start center"] { place-self: flex-start center }
x-flex[ps="start end"] { place-self: flex-start flex-end }
x-flex[ps="start stretch"] { place-self: flex-start stretch }
x-flex[ps="center start"] { place-self: center flex-start }
x-flex[ps="center end"] { place-self: center flex-end }
x-flex[ps="end start"] { place-self: flex-end flex-start }
x-flex[ps="end center"] { place-self: flex-end center }
x-flex[ps="end stretch"] { place-self:flex-end stretch }
x-flex[ps="stretch start"] { place-self: stretch flex-start }
x-flex[ps="stretch end"] { place-self: stretch flex-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 }

/*** [S] for window width <= 777px */
@media (max-width: 777px) {
    /* Justify CONTENT */
    [jc-s="start"] { justify-content: start }
    [jc-s="center"] { justify-content: center }
    [jc-s="end"] { justify-content: end }
    [jc-s="stretch"] { justify-content: stretch }
    [jc-s="around"] { justify-content: space-around }
    [jc-s="between"] { justify-content: space-between }
    [jc-s="evenly"] { justify-content: space-evenly }

    /* Justify ITEMS */
    [ji-s="start"] { justify-items: start }
    [ji-s="center"] { justify-items: center }
    [ji-s="end"] { justify-items: end }
    [ji-s="stretch"] { justify-items: stretch }

    /* Align ITEMS */
    [ai-s="start"] { align-items: start }
    [ai-s="center"] { align-items: center }
    [ai-s="end"] { align-items: end }
    [ai-s="stretch"] { align-items: stretch }

    /* Align CONTENT */
    [ac-s="start"] { align-content: start }
    [ac-s="center"] { align-content: center }
    [ac-s="end"] { align-content: end }
    [ac-s="stretch"] { align-content: stretch }
    [ac-s="around"] { align-content: space-around }
    [ac-s="between"] { align-content: space-between }
    [ac-s="evenly"] { align-content: space-evenly }

    /* Align SELF */
    [as-s="start"] { align-self: start }
    [as-s="center"] { align-self: center }
    [as-s="end"] { align-self: end }
    [as-s="stretch"] { align-self: stretch }

    /* Justify SELF */
    [js-s="start"] { justify-self: start }
    [js-s="center"] { justify-self: center }
    [js-s="end"] { justify-self: end }
    [js-s="stretch"] { justify-self: stretch }

    /* Place ITEMS – place-items: align-items justify-items; */
    [pi-s="start"] { place-items: start }
    [pi-s="center"] { place-items: center }
    [pi-s="end"] { place-items: end }
    [pi-s="stretch"] { place-items: stretch }

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

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

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

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

    /* Place CONTENT - place-content: align-content justify-content */
    [pc-s="start"] { place-content: start }
    [pc-s="center"] { place-content: center }
    [pc-s="end"] { place-content: end }
    [pc-s="stretch"] { place-content: stretch }
    [pc-s="around"] { place-content: space-around }
    [pc-s="between"] { place-content: space-between }
    [pc-s="evenly"] { place-content: space-evenly }

    [pc-s="start center"] { place-content: start center }
    [pc-s="start end"] { place-content: start end }
    [pc-s="start stretch"] { place-content: start stretch }
    [pc-s="start around"] { place-content: start space-around }
    [pc-s="start between"] { place-content: start space-between }
    [pc-s="start evenly"] { place-content: start space-evenly }

    [pc-s="center start"] { place-content: center start }
    [pc-s="center end"] { place-content: center end }
    [pc-s="center stretch"] { place-content: center stretch }
    [pc-s="center around"] { place-content: center space-around }
    [pc-s="center between"] { place-content: center space-between }
    [pc-s="center evenly"] { place-content: center space-evenly }

    [pc-s="end start"] { place-content: end start }
    [pc-s="end center"] { place-content: end center }
    [pc-s="end stretch"] { place-content: end stretch }
    [pc-s="end around"] { place-content: end space-around }
    [pc-s="end between"] { place-content: end space-between }
    [pc-s="end evenly"] { place-content: end space-evenly }

    [pc-s="stretch start"] { place-content: stretch start }
    [pc-s="stretch center"] { place-content: stretch center }
    [pc-s="stretch end"] { place-content: stretch end }
    [pc-s="stretch around"] { place-content: stretch space-around }
    [pc-s="stretch between"] { place-content: stretch space-between }
    [pc-s="stretch evenly"] { place-content: stretch space-evenly }

    [pc-s="around start"] { place-content: space-around start }
    [pc-s="around center"] { place-content: space-around center }
    [pc-s="around end"] { place-content: space-around end }
    [pc-s="around stretch"] { place-content: space-around stretch }
    [pc-s="around between"] { place-content: space-around space-between }
    [pc-s="around evenly"] { place-content: space-around space-evenly }

    [pc-s="between start"] { place-content: space-between start }
    [pc-s="between center"] { place-content: space-between center }
    [pc-s="between end"] { place-content: space-between end }
    [pc-s="between stretch"] { place-content: space-between stretch }
    [pc-s="between around"] { place-content: space-between space-around }
    [pc-s="between evenly"] { place-content: space-between space-evenly }

    [pc-s="evenly start"] { place-content: space-evenly start }
    [pc-s="evenly center"] { place-content: space-evenly center }
    [pc-s="evenly end"] { place-content: space-evenly end }
    [pc-s="evenly stretch"] { place-content: space-evenly stretch }
    [pc-s="evenly around"] { place-content: space-evenly space-around }
    [pc-s="evenly between"] { place-content: space-evenly space-between }

    /* Place SELF - place-self: align-self justify-self; */
    [ps-s="start"] { place-self: start }
    [ps-s="center"] { place-self: center }
    [ps-s="end"] { place-self: end }
    [ps-s="stretch"] { place-self: stretch }

    [ps-s="start center"] { place-self: start center }
    [ps-s="start end"] { place-self: start end }
    [ps-s="start stretch"] { place-self: start stretch }

    [ps-s="center start"] { place-self: center start }
    [ps-s="center end"] { place-self: center end }
    [ps-s="center stretch"] { place-self: center stretch }

    [ps-s="end start"] { place-self: end start }
    [ps-s="end center"] { place-self: end center }
    [ps-s="end stretch"] { place-self: end stretch }

    [ps-s="stretch start"] { place-self: stretch start }
    [ps-s="stretch center"] { place-self: stretch center }
    [ps-s="stretch end"] { place-self: stretch end }

    /* flex-* start & end for flexbox (needed for safari) */
    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[ji-s="start"] { justify-items: flex-start }
    x-flex[ji-s="center"] { justify-items: center }
    x-flex[ji-s="end"] { justify-items: flex-end }
    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[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[as-s="start"] { align-self: flex-start }
    x-flex[as-s="center"] { align-self: center }
    x-flex[as-s="end"] { align-self: flex-end }
    x-flex[js-s="start"] { justify-self: flex-start }
    x-flex[js-s="center"] { justify-self: center }
    x-flex[js-s="end"] { justify-self: flex-end }
    x-flex[pi-s="start"] { place-items: flex-start }
    x-flex[pi-s="center"] { place-items: center }
    x-flex[pi-s="end"] { place-items: flex-end }
    x-flex[pi-s="start center"] { place-items: flex-start center }
    x-flex[pi-s="start end"] { place-items: flex-start flex-end }
    x-flex[pi-s="start stretch"] { place-items: flex-start stretch }
    x-flex[pi-s="center start"] { place-items: center flex-start }
    x-flex[pi-s="center end"] { place-items: center flex-end }
    x-flex[pi-s="end start"] { place-items: flex-end flex-start }
    x-flex[pi-s="end center"] { place-items: flex-end center }
    x-flex[pi-s="end stretch"] { place-items: flex-end stretch }
    x-flex[pi-s="stretch start"] { place-items: stretch flex-start }
    x-flex[pi-s="stretch end"] { place-items: stretch flex-end }
    x-flex[pc-s="start"] { place-content: flex-start }
    x-flex[pc-s="center"] { place-content: center }
    x-flex[pc-s="end"] { place-content: flex-end }
    x-flex[pc-s="start center"] { place-content: flex-start center }
    x-flex[pc-s="start end"] { place-content: flex-start flex-end }
    x-flex[pc-s="start stretch"] { place-content: flex-start stretch }
    x-flex[pc-s="start around"] { place-content: flex-start space-around }
    x-flex[pc-s="start between"] { place-content: flex-start space-between }
    x-flex[pc-s="start evenly"] { place-content: flex-start space-evenly }
    x-flex[pc-s="center start"] { place-content: center flex-start }
    x-flex[pc-s="center end"] { place-content: center flex-end }
    x-flex[pc-s="end start"] { place-content: flex-end flex-start }
    x-flex[pc-s="end center"] { place-content: flex-end center }
    x-flex[pc-s="end stretch"] { place-content: flex-end stretch }
    x-flex[pc-s="end around"] { place-content: flex-end space-around }
    x-flex[pc-s="end between"] { place-content: flex-end space-between }
    x-flex[pc-s="end evenly"] { place-content: flex-end space-evenly }
    x-flex[pc-s="stretch start"] { place-content: stretch flex-start }
    x-flex[pc-s="stretch end"] { place-content: stretch flex-end }
    x-flex[pc-s="around start"] { place-content: space-around flex-start }
    x-flex[pc-s="around end"] { place-content: space-around flex-end }
    x-flex[pc-s="between start"] { place-content: space-between flex-start }
    x-flex[pc-s="between end"] { place-content: space-between flex-end }
    x-flex[pc-s="evenly start"] { place-content: space-evenly flex-start }
    x-flex[pc-s="evenly end"] { place-content: space-evenly flex-end }
    x-flex[ps-s="start"] { place-self: flex-start }
    x-flex[ps-s="center"] { place-self: center }
    x-flex[ps-s="end"] { place-self: flex-end }
    x-flex[ps-s="start center"] { place-self: flex-start center }
    x-flex[ps-s="start end"] { place-self: flex-start flex-end }
    x-flex[ps-s="start stretch"] { place-self: flex-start stretch }
    x-flex[ps-s="center start"] { place-self: center flex-start }
    x-flex[ps-s="center end"] { place-self: center flex-end }
    x-flex[ps-s="end start"] { place-self: flex-end flex-start }
    x-flex[ps-s="end center"] { place-self: flex-end center }
    x-flex[ps-s="end stretch"] { place-self:flex-end stretch }
    x-flex[ps-s="stretch start"] { place-self: stretch flex-start }
    x-flex[ps-s="stretch end"] { place-self: stretch flex-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 }
}

/*** [M] for window width 778px <> 1024px */
@media (min-width: 778px) and (max-width: 1024px) {
    /* Justify CONTENT */
    [jc-m="start"] { justify-content: start }
    [jc-m="center"] { justify-content: center }
    [jc-m="end"] { justify-content: end }
    [jc-m="stretch"] { justify-content: stretch }
    [jc-m="around"] { justify-content: space-around }
    [jc-m="between"] { justify-content: space-between }
    [jc-m="evenly"] { justify-content: space-evenly }

    /* Justify ITEMS */
    [ji-m="start"] { justify-items: start }
    [ji-m="center"] { justify-items: center }
    [ji-m="end"] { justify-items: end }
    [ji-m="stretch"] { justify-items: stretch }

    /* Align ITEMS */
    [ai-m="start"] { align-items: start }
    [ai-m="center"] { align-items: center }
    [ai-m="end"] { align-items: end }
    [ai-m="stretch"] { align-items: stretch }

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

    /* Align SELF */
    [as-m="start"] { align-self: start }
    [as-m="center"] { align-self: center }
    [as-m="end"] { align-self: end }
    [as-m="stretch"] { align-self: stretch }

    /* Justify SELF */
    [js-m="start"] { justify-self: start }
    [js-m="center"] { justify-self: center }
    [js-m="end"] { justify-self: end }
    [js-m="stretch"] { justify-self: stretch }

    /* Place ITEMS – place-items: align-items justify-items; */
    [pi-m="start"] { place-items: start }
    [pi-m="center"] { place-items: center }
    [pi-m="end"] { place-items: end }
    [pi-m="stretch"] { place-items: stretch }

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

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

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

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

    /* Place CONTENT - place-content: align-content justify-content */
    [pc-m="start"] { place-content: start }
    [pc-m="center"] { place-content: center }
    [pc-m="end"] { place-content: end }
    [pc-m="stretch"] { place-content: stretch }
    [pc-m="around"] { place-content: space-around }
    [pc-m="between"] { place-content: space-between }
    [pc-m="evenly"] { place-content: space-evenly }

    [pc-m="start center"] { place-content: start center }
    [pc-m="start end"] { place-content: start end }
    [pc-m="start stretch"] { place-content: start stretch }
    [pc-m="start around"] { place-content: start space-around }
    [pc-m="start between"] { place-content: start space-between }
    [pc-m="start evenly"] { place-content: start space-evenly }

    [pc-m="center start"] { place-content: center start }
    [pc-m="center end"] { place-content: center end }
    [pc-m="center stretch"] { place-content: center stretch }
    [pc-m="center around"] { place-content: center space-around }
    [pc-m="center between"] { place-content: center space-between }
    [pc-m="center evenly"] { place-content: center space-evenly }

    [pc-m="end start"] { place-content: end start }
    [pc-m="end center"] { place-content: end center }
    [pc-m="end stretch"] { place-content: end stretch }
    [pc-m="end around"] { place-content: end space-around }
    [pc-m="end between"] { place-content: end space-between }
    [pc-m="end evenly"] { place-content: end space-evenly }

    [pc-m="stretch start"] { place-content: stretch start }
    [pc-m="stretch center"] { place-content: stretch center }
    [pc-m="stretch end"] { place-content: stretch end }
    [pc-m="stretch around"] { place-content: stretch space-around }
    [pc-m="stretch between"] { place-content: stretch space-between }
    [pc-m="stretch evenly"] { place-content: stretch space-evenly }

    [pc-m="around start"] { place-content: space-around start }
    [pc-m="around center"] { place-content: space-around center }
    [pc-m="around end"] { place-content: space-around end }
    [pc-m="around stretch"] { place-content: space-around stretch }
    [pc-m="around between"] { place-content: space-around space-between }
    [pc-m="around evenly"] { place-content: space-around space-evenly }

    [pc-m="between start"] { place-content: space-between start }
    [pc-m="between center"] { place-content: space-between center }
    [pc-m="between end"] { place-content: space-between end }
    [pc-m="between stretch"] { place-content: space-between stretch }
    [pc-m="between around"] { place-content: space-between space-around }
    [pc-m="between evenly"] { place-content: space-between space-evenly }

    [pc-m="evenly start"] { place-content: space-evenly start }
    [pc-m="evenly center"] { place-content: space-evenly center }
    [pc-m="evenly end"] { place-content: space-evenly end }
    [pc-m="evenly stretch"] { place-content: space-evenly stretch }
    [pc-m="evenly around"] { place-content: space-evenly space-around }
    [pc-m="evenly between"] { place-content: space-evenly space-between }

    /* Place SELF - place-self: align-self justify-self; */
    [ps-m="start"] { place-self: start }
    [ps-m="center"] { place-self: center }
    [ps-m="end"] { place-self: end }
    [ps-m="stretch"] { place-self: stretch }

    [ps-m="start center"] { place-self: start center }
    [ps-m="start end"] { place-self: start end }
    [ps-m="start stretch"] { place-self: start stretch }

    [ps-m="center start"] { place-self: center start }
    [ps-m="center end"] { place-self: center end }
    [ps-m="center stretch"] { place-self: center stretch }

    [ps-m="end start"] { place-self: end start }
    [ps-m="end center"] { place-self: end center }
    [ps-m="end stretch"] { place-self: end stretch }

    [ps-m="stretch start"] { place-self: stretch start }
    [ps-m="stretch center"] { place-self: stretch center }
    [ps-m="stretch end"] { place-self: stretch end }

    /* flex-* start & end for flexbox (needed for safari) */
    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[ji-m="start"] { justify-items: flex-start }
    x-flex[ji-m="center"] { justify-items: center }
    x-flex[ji-m="end"] { justify-items: flex-end }
    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[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[as-m="start"] { align-self: flex-start }
    x-flex[as-m="center"] { align-self: center }
    x-flex[as-m="end"] { align-self: flex-end }
    x-flex[js-m="start"] { justify-self: flex-start }
    x-flex[js-m="center"] { justify-self: center }
    x-flex[js-m="end"] { justify-self: flex-end }
    x-flex[pi-m="start"] { place-items: flex-start }
    x-flex[pi-m="center"] { place-items: center }
    x-flex[pi-m="end"] { place-items: flex-end }
    x-flex[pi-m="start center"] { place-items: flex-start center }
    x-flex[pi-m="start end"] { place-items: flex-start flex-end }
    x-flex[pi-m="start stretch"] { place-items: flex-start stretch }
    x-flex[pi-m="center start"] { place-items: center flex-start }
    x-flex[pi-m="center end"] { place-items: center flex-end }
    x-flex[pi-m="end start"] { place-items: flex-end flex-start }
    x-flex[pi-m="end center"] { place-items: flex-end center }
    x-flex[pi-m="end stretch"] { place-items: flex-end stretch }
    x-flex[pi-m="stretch start"] { place-items: stretch flex-start }
    x-flex[pi-m="stretch end"] { place-items: stretch flex-end }
    x-flex[pc-m="start"] { place-content: flex-start }
    x-flex[pc-m="center"] { place-content: center }
    x-flex[pc-m="end"] { place-content: flex-end }
    x-flex[pc-m="start center"] { place-content: flex-start center }
    x-flex[pc-m="start end"] { place-content: flex-start flex-end }
    x-flex[pc-m="start stretch"] { place-content: flex-start stretch }
    x-flex[pc-m="start around"] { place-content: flex-start space-around }
    x-flex[pc-m="start between"] { place-content: flex-start space-between }
    x-flex[pc-m="start evenly"] { place-content: flex-start space-evenly }
    x-flex[pc-m="center start"] { place-content: center flex-start }
    x-flex[pc-m="center end"] { place-content: center flex-end }
    x-flex[pc-m="end start"] { place-content: flex-end flex-start }
    x-flex[pc-m="end center"] { place-content: flex-end center }
    x-flex[pc-m="end stretch"] { place-content: flex-end stretch }
    x-flex[pc-m="end around"] { place-content: flex-end space-around }
    x-flex[pc-m="end between"] { place-content: flex-end space-between }
    x-flex[pc-m="end evenly"] { place-content: flex-end space-evenly }
    x-flex[pc-m="stretch start"] { place-content: stretch flex-start }
    x-flex[pc-m="stretch end"] { place-content: stretch flex-end }
    x-flex[pc-m="around start"] { place-content: space-around flex-start }
    x-flex[pc-m="around end"] { place-content: space-around flex-end }
    x-flex[pc-m="between start"] { place-content: space-between flex-start }
    x-flex[pc-m="between end"] { place-content: space-between flex-end }
    x-flex[pc-m="evenly start"] { place-content: space-evenly flex-start }
    x-flex[pc-m="evenly end"] { place-content: space-evenly flex-end }
    x-flex[ps-m="start"] { place-self: flex-start }
    x-flex[ps-m="center"] { place-self: center }
    x-flex[ps-m="end"] { place-self: flex-end }
    x-flex[ps-m="start center"] { place-self: flex-start center }
    x-flex[ps-m="start end"] { place-self: flex-start flex-end }
    x-flex[ps-m="start stretch"] { place-self: flex-start stretch }
    x-flex[ps-m="center start"] { place-self: center flex-start }
    x-flex[ps-m="center end"] { place-self: center flex-end }
    x-flex[ps-m="end start"] { place-self: flex-end flex-start }
    x-flex[ps-m="end center"] { place-self: flex-end center }
    x-flex[ps-m="end stretch"] { place-self:flex-end stretch }
    x-flex[ps-m="stretch start"] { place-self: stretch flex-start }
    x-flex[ps-m="stretch end"] { place-self: stretch flex-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 }
}

/*** [L] for window width >= 1600 */
@media (min-width: 1599px) {
    /* Justify CONTENT */
    [jc-l="start"] { justify-content: start }
    [jc-l="center"] { justify-content: center }
    [jc-l="end"] { justify-content: end }
    [jc-l="stretch"] { justify-content: stretch }
    [jc-l="around"] { justify-content: space-around }
    [jc-l="between"] { justify-content: space-between }
    [jc-l="evenly"] { justify-content: space-evenly }

    /* Justify ITEMS */
    [ji-l="start"] { justify-items: start }
    [ji-l="center"] { justify-items: center }
    [ji-l="end"] { justify-items: end }
    [ji-l="stretch"] { justify-items: stretch }

    /* Align ITEMS */
    [ai-l="start"] { align-items: start }
    [ai-l="center"] { align-items: center }
    [ai-l="end"] { align-items: end }
    [ai-l="stretch"] { align-items: stretch }

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

    /* Align SELF */
    [as-l="start"] { align-self: start }
    [as-l="center"] { align-self: center }
    [as-l="end"] { align-self: end }
    [as-l="stretch"] { align-self: stretch }

    /* Justify SELF */
    [js-l="start"] { justify-self: start }
    [js-l="center"] { justify-self: center }
    [js-l="end"] { justify-self: end }
    [js-l="stretch"] { justify-self: stretch }

    /* Place ITEMS – place-items: align-items justify-items; */
    [pi-l="start"] { place-items: start }
    [pi-l="center"] { place-items: center }
    [pi-l="end"] { place-items: end }
    [pi-l="stretch"] { place-items: stretch }

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

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

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

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

    /* Place CONTENT - place-content: align-content justify-content */
    [pc-l="start"] { place-content: start }
    [pc-l="center"] { place-content: center }
    [pc-l="end"] { place-content: end }
    [pc-l="stretch"] { place-content: stretch }
    [pc-l="around"] { place-content: space-around }
    [pc-l="between"] { place-content: space-between }
    [pc-l="evenly"] { place-content: space-evenly }

    [pc-l="start center"] { place-content: start center }
    [pc-l="start end"] { place-content: start end }
    [pc-l="start stretch"] { place-content: start stretch }
    [pc-l="start around"] { place-content: start space-around }
    [pc-l="start between"] { place-content: start space-between }
    [pc-l="start evenly"] { place-content: start space-evenly }

    [pc-l="center start"] { place-content: center start }
    [pc-l="center end"] { place-content: center end }
    [pc-l="center stretch"] { place-content: center stretch }
    [pc-l="center around"] { place-content: center space-around }
    [pc-l="center between"] { place-content: center space-between }
    [pc-l="center evenly"] { place-content: center space-evenly }

    [pc-l="end start"] { place-content: end start }
    [pc-l="end center"] { place-content: end center }
    [pc-l="end stretch"] { place-content: end stretch }
    [pc-l="end around"] { place-content: end space-around }
    [pc-l="end between"] { place-content: end space-between }
    [pc-l="end evenly"] { place-content: end space-evenly }

    [pc-l="stretch start"] { place-content: stretch start }
    [pc-l="stretch center"] { place-content: stretch center }
    [pc-l="stretch end"] { place-content: stretch end }
    [pc-l="stretch around"] { place-content: stretch space-around }
    [pc-l="stretch between"] { place-content: stretch space-between }
    [pc-l="stretch evenly"] { place-content: stretch space-evenly }

    [pc-l="around start"] { place-content: space-around start }
    [pc-l="around center"] { place-content: space-around center }
    [pc-l="around end"] { place-content: space-around end }
    [pc-l="around stretch"] { place-content: space-around stretch }
    [pc-l="around between"] { place-content: space-around space-between }
    [pc-l="around evenly"] { place-content: space-around space-evenly }

    [pc-l="between start"] { place-content: space-between start }
    [pc-l="between center"] { place-content: space-between center }
    [pc-l="between end"] { place-content: space-between end }
    [pc-l="between stretch"] { place-content: space-between stretch }
    [pc-l="between around"] { place-content: space-between space-around }
    [pc-l="between evenly"] { place-content: space-between space-evenly }

    [pc-l="evenly start"] { place-content: space-evenly start }
    [pc-l="evenly center"] { place-content: space-evenly center }
    [pc-l="evenly end"] { place-content: space-evenly end }
    [pc-l="evenly stretch"] { place-content: space-evenly stretch }
    [pc-l="evenly around"] { place-content: space-evenly space-around }
    [pc-l="evenly between"] { place-content: space-evenly space-between }

    /* Place SELF - place-self: align-self justify-self; */
    [ps-l="start"] { place-self: start }
    [ps-l="center"] { place-self: center }
    [ps-l="end"] { place-self: end }
    [ps-l="stretch"] { place-self: stretch }

    [ps-l="start center"] { place-self: start center }
    [ps-l="start end"] { place-self: start end }
    [ps-l="start stretch"] { place-self: start stretch }

    [ps-l="center start"] { place-self: center start }
    [ps-l="center end"] { place-self: center end }
    [ps-l="center stretch"] { place-self: center stretch }

    [ps-l="end start"] { place-self: end start }
    [ps-l="end center"] { place-self: end center }
    [ps-l="end stretch"] { place-self: end stretch }

    [ps-l="stretch start"] { place-self: stretch start }
    [ps-l="stretch center"] { place-self: stretch center }
    [ps-l="stretch end"] { place-self: stretch end }

    /* flex-* start & end for flexbox (needed for safari) */
    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[ji-l="start"] { justify-items: flex-start }
    x-flex[ji-l="center"] { justify-items: center }
    x-flex[ji-l="end"] { justify-items: flex-end }
    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[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[as-l="start"] { align-self: flex-start }
    x-flex[as-l="center"] { align-self: center }
    x-flex[as-l="end"] { align-self: flex-end }
    x-flex[js-l="start"] { justify-self: flex-start }
    x-flex[js-l="center"] { justify-self: center }
    x-flex[js-l="end"] { justify-self: flex-end }
    x-flex[pi-l="start"] { place-items: flex-start }
    x-flex[pi-l="center"] { place-items: center }
    x-flex[pi-l="end"] { place-items: flex-end }
    x-flex[pi-l="start center"] { place-items: flex-start center }
    x-flex[pi-l="start end"] { place-items: flex-start flex-end }
    x-flex[pi-l="start stretch"] { place-items: flex-start stretch }
    x-flex[pi-l="center start"] { place-items: center flex-start }
    x-flex[pi-l="center end"] { place-items: center flex-end }
    x-flex[pi-l="end start"] { place-items: flex-end flex-start }
    x-flex[pi-l="end center"] { place-items: flex-end center }
    x-flex[pi-l="end stretch"] { place-items: flex-end stretch }
    x-flex[pi-l="stretch start"] { place-items: stretch flex-start }
    x-flex[pi-l="stretch end"] { place-items: stretch flex-end }
    x-flex[pc-l="start"] { place-content: flex-start }
    x-flex[pc-l="center"] { place-content: center }
    x-flex[pc-l="end"] { place-content: flex-end }
    x-flex[pc-l="start center"] { place-content: flex-start center }
    x-flex[pc-l="start end"] { place-content: flex-start flex-end }
    x-flex[pc-l="start stretch"] { place-content: flex-start stretch }
    x-flex[pc-l="start around"] { place-content: flex-start space-around }
    x-flex[pc-l="start between"] { place-content: flex-start space-between }
    x-flex[pc-l="start evenly"] { place-content: flex-start space-evenly }
    x-flex[pc-l="center start"] { place-content: center flex-start }
    x-flex[pc-l="center end"] { place-content: center flex-end }
    x-flex[pc-l="end start"] { place-content: flex-end flex-start }
    x-flex[pc-l="end center"] { place-content: flex-end center }
    x-flex[pc-l="end stretch"] { place-content: flex-end stretch }
    x-flex[pc-l="end around"] { place-content: flex-end space-around }
    x-flex[pc-l="end between"] { place-content: flex-end space-between }
    x-flex[pc-l="end evenly"] { place-content: flex-end space-evenly }
    x-flex[pc-l="stretch start"] { place-content: stretch flex-start }
    x-flex[pc-l="stretch end"] { place-content: stretch flex-end }
    x-flex[pc-l="around start"] { place-content: space-around flex-start }
    x-flex[pc-l="around end"] { place-content: space-around flex-end }
    x-flex[pc-l="between start"] { place-content: space-between flex-start }
    x-flex[pc-l="between end"] { place-content: space-between flex-end }
    x-flex[pc-l="evenly start"] { place-content: space-evenly flex-start }
    x-flex[pc-l="evenly end"] { place-content: space-evenly flex-end }
    x-flex[ps-l="start"] { place-self: flex-start }
    x-flex[ps-l="center"] { place-self: center }
    x-flex[ps-l="end"] { place-self: flex-end }
    x-flex[ps-l="start center"] { place-self: flex-start center }
    x-flex[ps-l="start end"] { place-self: flex-start flex-end }
    x-flex[ps-l="start stretch"] { place-self: flex-start stretch }
    x-flex[ps-l="center start"] { place-self: center flex-start }
    x-flex[ps-l="center end"] { place-self: center flex-end }
    x-flex[ps-l="end start"] { place-self: flex-end flex-start }
    x-flex[ps-l="end center"] { place-self: flex-end center }
    x-flex[ps-l="end stretch"] { place-self:flex-end stretch }
    x-flex[ps-l="stretch start"] { place-self: stretch flex-start }
    x-flex[ps-l="stretch end"] { place-self: stretch flex-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 */
.debug > * { --dc:rgba(248,110,91,0.8); background: var(--dc) }
.debug>:nth-child(6n+2){ --dc:rgb(103,126,208,.8) }
.debug>:nth-child(6n+3){ --dc:rgb(224,174,72,0.8) }
.debug>:nth-child(6n+4){ --dc:rgb(77,214,115,0.8) }
.debug>:nth-child(6n+5){ --dc:rgb(217,103,219,0.8) }
.debug>:nth-child(6n+6){ --dc:rgb(94,204,211,0.8) }
.debug>:nth-child(6n+7){ --dc:rgb(248,110,91,0.8) }
.debug.outline { outline: 1px dotted var(--red) }
.debug.outline-child { outline: 1px dotted var(--red); outline-offset: 5px }
.debug.outline-child > * { outline: 1px dotted var(--green) }

/* ------------------
  Cubic Beziers
------------------ */
/*
 * Can be used both in transition:; & animation:;
 * Example: transition: all 1s var(--easeInOutQuad);
 * examples at: https://easings.net/
*/
: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, var(--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 { from { opacity: 1 } to { opacity: 0 } }
@keyframes fadeOutDown { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, 100%, 0) } }
@keyframes fadeOutUp { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, -100%, 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) } to { 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 { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out }
  40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out }
  50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in }
  80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in }
  to { transform: perspective(400px); animation-timing-function: ease-in }
}

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

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

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

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

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

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

/*** Accessibility :: Disabling animations if user prefers-reduced-motion */
@media screen and (prefers-reduced-motion: reduce), (update: slow) { *, *::before, *::after, *::backdrop { animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; animation-delay:0.001ms!important; transition-property: none } }
/*** app.css */

/*** CSS variables */
:root {
	--focus: transparent; /* disable buttons outline:; or change its color */

	/* --fontScale: 1.4; /* change body font size */
	/* --hScale: 1.3; /* change headings font size */
	--globalScale: 1.2; /* change both body & headings font size */
    --fontWeight: 400;

    --color: rgba(255, 255, 255, 75%); /* #f6f4f2; c5c5ce change default text color */

    --linkDecoration: underline;
    --linkColor: var(--color);

    --bodyDark: #090909;  /*#181818 #060606; */
    --menuDark: #202020;
    --menuBar: rgba(9, 9, 9, 75%);
    --menuSide: rgba(255, 255, 255, 10%);
    --menuBorder: rgba(255, 255, 255, 15%);
    --cardDark: rgba(255, 255, 255, 10%);
    --cardDarkActive: rgba(255, 255, 255, 20%);
    --cardBorder: rgba(255, 255, 255, 10%);
    --cardBorderActive: rgba(255, 255, 255, 70%);
    --titleColor: rgba(255, 255, 255, 90%);
    --dateColor: rgba(255, 255, 255, 60%);
    --textColor: rgba(255, 255, 255, 75%);
    --photoLabel: rgba(0, 0, 0, 60%);
    --figureColor: rgba(255, 255, 255, 65%);
    --footerColor: rgba(255, 255, 255, 50%);
    --footerText: rgba(255, 255, 255, 50%);
    --footerCopy: rgba(6, 6, 6, 100%);
    --footerCopyText: rgba(255, 255, 255, 30%);

}

/*** Dark mode */
/** :where(.dark-mode, #dark-mode, [dark-mode], [data-mode="dark"]) { } **/

@supports (font-variation-settings: normal) { :root { --fontFamily: var(--fontFamilyVar); } } /* If Variable fonts are supported */

a, a:hover { text-decoration: none; } /* underline linksvar(--color)*/
/* Remove outline for non-keyboard :focus */
*:focus:not(:focus-visible) {outline: none}
/* Optional: Customize :focus-visible */
*:focus-visible {outline-color:var(--linkHover)}


/* ------------------
  media query
------------------ */
@media (prefers-reduced-motion: reduce) {} /* User prefers NO motion-based animation */

/*** Detect OS Dark/Light mode */
@media (prefers-color-scheme: dark) {} /* if OS in DARK mode */
/*@media (prefers-color-scheme: light) {}*/ /* if OS in LIGHT mode */

/*** Responsive */
/** Skelet. BREAKING POINTS */
@media (max-width: 777px) {} /* Grid SMALL becomes active */
@media (min-width: 778px) and (max-width: 1024px) {} /* Grid MEDIUM becomes active */
@media (min-width: 1599px) {}/* Grid LARGE becomes active */

/** General breaking points */
/* Device = Most of Mobile (Portrait) | Screen = b/w 0 to 480px */
@media (max-width: 480px) {
.menu-bar {display: none}
.menu-button {display: block}
}
/* Device = Low Resolution Tablet, Mobile (Landscape) | Screen = b/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
#nav-right {top:10%}
#lang-menu {top:10%}
.menu-bar {display: none}
.menu-button {display: block}
}
/* Device = Tablet, iPad (landscape) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.menu-bar {display: block}
.menu-button {display: none}
}
/* Device = Tablet, iPad (portrait) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
#nav-right {top:15%}
#lang-menu {top:15%}
.menu-bar {display: block}
.menu-button {display: none}
}
/* Device = Laptop, Desktop | Screen = b/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
#nav-right {top:20%}
#lang-menu {top:20%}
.menu-bar {display: block}
.menu-button {display: none}
}
/* Device = Desktop | Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {
#nav-right {top:25%; border-top-left-radius:2rem; border-bottom-left-radius:2rem}
#lang-menu {top:25%}
.menu-bar {display: block}
.menu-button {display: none}
}
/* Device = Desktop | Screen = 1599px huge resolution desktops */
@media (min-width: 1900px) {
#nav-right {top:30%; border-top-left-radius:2rem; border-bottom-left-radius:2rem; border-top-right-radius:2rem; border-bottom-right-radius:2rem}
#lang-menu {top:30%}
.menu-bar {display: block}
.menu-button {display: none}
}

/** General **/
.fade { transition: all 0.6s; }
.fade.out { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }

/** Site **/
.site-wrap {max-width:100%; padding:0 1rem; background:var(--bodyDark)}
.app {display:flex; min-height:100vh; flex-direction:column; overflow-x:hidden; box-sizing:border-box}
.app a:hover {color:var(--linkHover)}

/** Header */
.banner-img {margin:0 auto !important; position:relative; background:var(--bodyDark)}

/* New Menu Bar */
.menu {z-index:90}
.menu-bar {} /* display defined in media queries */
.menu-button {} /* display defined in media queries */
.nav-sticky {position: -webkit-sticky; position:sticky; top:0; z-index:80; box-shadow: 0px 5px 5px rgb(9 9 9 / 75%); backdrop-filter:blur(4rem); -webkit-backdrop-filter:blur(4rem)}
.nav-bar {margin:0 auto !important; background:var(--menuBar);}
.nav-bar-menu {padding:.5rem .7rem; z-index:95}
.nav-bar-menu a {font-size:1.7rem; font-weight:bold; text-decoration:none}
.nav-bar-menu button {margin:0; padding: .5rem !important; color:var(--titleColor); border:none; background-color:transparent; z-index:90; outline:none; box-shadow:none}
.nav-bar-menu i {margin:auto .5rem !important; font-size:1.7em}
.nav-bar-user {font-size:1.2rem; white-space:normal}

.home-icon {list-style:none; max-height:2.2em}

/* Language Menu */
.lang-btn {color:var(--titleColor); border:none; background-color:transparent; z-index:90; outline:none; box-shadow:none}
.lang-btn i {margin:auto .4rem !important}
#lang-menu {width:auto; height:auto; background:var(--menuSide); backdrop-filter:blur(4rem) brightness(30%); -webkit-backdrop-filter:blur(4rem) brightness(30%); position:fixed; right:0; display:none; z-index:100; box-shadow: -2px -2px 2px 2px rgb(0 0 0 / 50%); border:solid; border-color:var(--menuBorder); border-width:.1rem ; border-bottom-left-radius:2rem; border-top-left-radius:2rem;-webkit-transitimon:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all}
#lang-menu-toggle {padding:1rem 1rem;list-style:none; min-width:100%; color:var(--color)}
#lang-menu-toggle a button {margin:0 2rem !important; padding:0 !important; line-height:var(--line-height); color:var(--color); background:transparent}
#lang-menu-toggle a button:hover {color: var(--linkHover)}
#lang-menu-toggle a {display:block; text-decoration:none; padding:0; line-height: var(--line-height)}
/* Remove outline for non-keyboard :focus */
#lang-menu-toggle a:focus:not(:focus-visible) {outline:none}
/* Optional: Customize :focus-visible */
#lang-menu-toggle a:focus-visible {outline-color:var(--linkHover)}

/** Body */
.body-wrap {background:var(--bodyDark);max-width:1440px; margin:0 auto}
.breadcrumb {position:-webkit-sticky; position:sticky; top:0; margin:0 1rem; z-index:81; overflow:hidden}
.breadcrumb-container {margin:.7rem auto; max-height:4rem; font-size: 1.5rem; text-wrap:nowrap; overflow:hidden}
.breadcrumb-container li {list-style:none; color:var(--dateColor); z-index:90}
.breadcrumb-container a {color:var(--dateColor); text-decoration:none}
.page-wrap {margin:1rem}
.page-title {margin:auto 1rem; padding:0 !important; color:var(--titleColor)}
.page-title p {padding:0 !important; color:var(--titleColor)}
.page-text {margin:auto 1rem; max-width:85rem; color:var(--textColor)}
.page-text h1, h2, h3, h4, h5, h6 {color:var(--textColor)}
.home-text {margin:auto 1rem; color:var(--textColor)}
.cell-wrap {margin:1rem}

/* Menu */
.menu-btn{color:var(--titleColor); border:none; background-color:transparent; z-index:90; outline:none; box-shadow:none}
#canvas {width: auto; height: auto; padding: 5.5% 0; position: fixed; z-index: 100; -webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all}
#nav-right {width:auto; height:auto; background:var(--menuSide); backdrop-filter:blur(4rem) brightness(30%); -webkit-backdrop-filter:blur(4rem) brightness(30%); position:fixed; right:0; display:none; z-index:95; box-shadow: -2px -2px 2px 2px rgb(0 0 0 / 50%); border:solid; border-color:var(--menuBorder); border-width:.1rem ; border-top-left-radius:2rem; border-bottom-left-radius:2rem;-webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all}
#nav-reset {height:100%; width:100%; z-index:80; display:none}
#nav-right-toggle {padding:3rem 5rem 0 2rem; list-style:none; min-width:100%; color:var(--color)}
#nav-right-toggle li {cursor:pointer; display:block}
#nav-right-toggle i {margin: .5rem 2rem .5rem 1rem; line-height: var(--line-height)}
#nav-right-toggle li a {display:block; width:auto}
#nav-right-toggle a {display:block; text-decoration:none; padding:0; line-height: var(--line-height)}
/*#nav-right-toggle a:focus {outline:none}*/
#nav-right-toggle ul {list-style:none; display:none}
#nav-right-toggle ul li {cursor:pointer; display:block; padding:0 1rem 0 2rem; list-style:none}
#nav-right-toggle ul li button {padding: 0; line-height:var(--line-height); color:var(--color); background:transparent}
#nav-right-toggle ul li button:hover {color: var(--linkHover)}
/* Remove outline for non-keyboard :focus */
#nav-right-toggle a:focus:not(:focus-visible) {outline:none}
/* Optional: Customize :focus-visible */
#nav-right-toggle a:focus-visible {outline-color:var(--linkHover)}
.nav-right-user {font-size:1.5rem; white-space:normal}
.nav-right-user i {font-size:2rem}

/** Intro */
.about-menu {display:flex; flex-direction:column; align-items:flex-start; margin-top:1em; margin-bottom:1em; margin-left:1em; list-style:none;}
.featured-content {margin:2em 0 5em 0}

/** Content */
.title-wrap {margin:0 1rem}
.flex-wrap {max-width:80vw}

/* OSM */
.geomap-static {width:auto;height:auto;max-width:60rem}
.geomap-tile {margin:0;padding:0}
.geomap-row td, tr {margin:0;padding:0;border:none}

/** Article / Words */
/*.article {padding:0 1rem 0 1rem}*/
.article-preview {background:var(--cardDark); max-width:40rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); border-radius:0 0 1rem 1rem; margin:3rem}
.article-preview:hover {background:var(--cardDark); border-color:var(--dateColor)}
.article-preview:hover .article-preview-img {filter:brightness(75%)}
.article-preview a {text-decoration:none}
.article-preview a:hover {color:var(--linkHover)}
.article-preview-card {position:relative}
.article-preview-figure a:hover {filter:brightness(75%)}
.article-preview-label-upper {font-size:1.8rem; font-weight:bold; width:auto; background-color:var(--photoLabel); border-radius: 0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; list-style:none; color:var(--figureColor)}
.article-preview-title {flex:auto; padding:0; font-size:2rem; font-weight:bold}
.article-preview-title a {color:var(--titleColor)}
.article-preview-description {font-size:1.7rem; padding:.5rem 1rem 1rem 1rem; color:var(--textColor)}
.article-preview-text {color:var(--textColor)}
.article-preview-date {font-size:1.5rem; margin:.5rem 1rem; color:var(--dateColor)}
.article-preview-date li {list-style:none; margin:0; padding:0 1rem 0 1rem}
.article-title {margin:auto 1rem}
.article-title p {color:var(--titleColor)}
.article-description {margin:0 1rem; color:var(--textColor)}
.article-text {margin:0 1rem; padding:1rem; max-width:100vw; color:var(--textColor)}
.article-text h1, h2, h3, h4, h5, h6 {text-indent:0; color:var(--titleColor)}
.article-img {max-width:55rem}
.article-vid {}
.article-lock i {margin:.5rem}
.article-date {font-size:1.5rem; margin:1rem auto; color:var(--dateColor)}
.article-date li {list-style:none}
.article-related {margin:4rem 2rem 4rem 2rem; color:var(--titleColor)}
.article-search {max-width:30rem}
.article-search-preview {position:relative; margin:1rem; max-width:30rem; border:solid; border-width:.1rem; border-color:var(--cardBorder)}
.article-search-preview a {text-decoration:none}
.article-search-preview:hover {border-color:var(--dateColor); color:var(--linkHover)}
.article-search-preview:hover a {color:var(--linkHover)}
.article-search-preview img:hover {filter:brightness(75%)}
.article-search-preview-upper {width:auto; font-size:2rem; font-weight:bold; background-color:var(--photoLabel); border-radius:0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; color:var(--figureColor)}

/** About */
.about-preview {background:var(--cardDark); max-width:35rem; min-height:35rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); border-radius:0 0 1rem 1rem; margin:3rem}
.about-preview:hover {background:var(--cardDark); border-color:var(--dateColor)}
.about-preview:hover .article-preview-img {filter:brightness(75%)}
.about-preview a {text-decoration:none}
.about-preview a:hover {color:var(--linkHover)}
.about-preview-card {position:relative}
.about-preview-figure a:hover {filter:brightness(75%)}
.about-preview-label-upper {font-size:1.8rem; font-weight:bold; width:auto; background-color:var(--photoLabel); border-radius: 0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; list-style:none; color:var(--figureColor)}
.about-preview-title {flex:auto; padding:0; font-size:2rem; font-weight:bold}
.about-preview-title a {color:var(--titleColor)}
.about-preview-description {font-size:1.7rem; padding:.5rem 1rem 1rem 1rem; color:var(--textColor)}
.about-preview-text {color:var(--textColor)}
.about-preview-date {font-size:1.5rem; margin:.5rem 1rem; color:var(--dateColor)}
.about-preview-date li {list-style:none; margin:0; padding:0 1rem 0 1rem}
.about-title {margin:auto 1rem}
.about-title p {color:var(--titleColor)}
.about-description {margin:0 irem; color:var(--textColor)}
.about-text {margin:0 1rem; max-width:85rem; color:var(--textColor)}
.about-text h1, h2, h3, h4, h5, h6 {text-indent:0; color:var(--titleColor)}
.about-img {max-width:55rem}

.accordion {}
.left {float:left; margin:1rem 2rem}
.right {float:right; margin:1rem 2rem}/fea
.block {display:flex; justify-content:center}

/** Photos **/
.photo-search-preview {position:relative; margin:1rem; max-width:30rem; border:solid; border-width:.1rem; border-color:var(--cardBorder)}
.photo-search-preview a {text-decoration:none}
.photo-search-preview:hover {border-color:var(--dateColor); color:var(--linkHover)}
.photo-search-preview:hover a {color:var(--linkHover)}
.photo-search-preview img:hover {filter:brightness(75%)}
.photo-search-preview-upper {width:auto; font-size:1.8rem; font-weight:bold; background-color:var(--photoLabel); border-radius:0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; color:var(--figureColor)}
.photo-preview {position:relative; margin:2rem; max-width:40rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); font-size:1.7rem; color:var(--textColor)}
.photo-preview:hover {background:var(--cardDarkActive); border-color:var(--dateColor); color:var(--textColor)}
.photo-preview img:hover {filter:brightness(75%)}
.photo-preview a {text-decoration:var(--linkDecoration); color:var(--textColor)}
.photo-preview-title {padding:.2rem; font-size:2rem; font-weight:bold}
.photo-search {max-width:30rem}
.photo-title {}
.photo-description {margin:0}
.photo-date {font-size:1.5rem; flex:initial; margin:0; font-size:1.7rem; color:var(--textColor)}
.photo-location {flex:auto; margin:0}
.photo-location a {text-decoration:var(--linkDecoration); font-size:1.7rem; color:var(--textColor)}
.photo-label-upper {font-size:1.6rem; font-weight:bold; width:auto; background-color:var(--photoLabel); border-radius:0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; list-style:none; color:var(--textColor)}
.photo-label-lower {font-size:2rem; font-weight:bold; width:100%; display:flex; background-color:var(--photoLabel); padding:0 1rem 0 1rem; position:absolute; left:0; bottom:0}

/** Preview Images**/
.preview {position:relative; margin:2rem; max-width:40rem; border:solid; border-width:.2rem; border-color:var(--bodyDark); font-size:1.7rem; color:var(--figureColor)}
.preview:hover {border-color:var(--cardBorderActive); color:var(--linkHover)}
.preview img:hover {filter:brightness(75%)}
.preview-label-upper {font-size:1.8rem; font-weight:bold; width:auto; background-color:var(--photoLabel); border-radius:0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; color:var(--figureColor)}
.preview-label-lower {font-size:2rem; font-weight:bold; width:auto; display:flex; background-color:var(--photoLabel); border-radius: 0 .75rem 0 0; padding:.3rem 1rem .3rem 1rem; position:absolute; left:0; bottom:0}
.preview-title {flex:auto}
.preview-location {flex:auto; text-decoration:underline}
.preview-location a {font-size:1.7rem; color:var(--figureColor); text-decoration:underline}
.preview-date {flex:initial; margin:0; font-size:1.7rem; color:var(--figureColor)}

.image-overlay {backdrop-filter:none}

/** Media Featured**/
.media-featured {max-width:80vw; margin:1rem; background:var(--cardDark); border-radius:0 0 1rem 1rem}
.media-featured-label {display:flex}
.media-featured-location {flex:auto; padding:1rem}
.media-featured-location a {font-size:1.7rem; color:var(--textColor)}
.media-featured-date {flex:initial; padding:1.3rem 1rem .7rem 1rem; font-size:1.7rem; color:var(--textColor)}

/** Social **/
.social {display:flex; background:var(--cardDark); max-width:30rem; padding:.2rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); border-radius:1rem}
.social-button a {margin:.5rem 1rem .5rem 1rem; width:2.2rem; height:2.5rem}
.social-icon img {width:100%; height:100%}

/** Zotonic Styles **/
.list-unstyled {list-style:none}
.text-muted { color: rgba(255, 255, 255, 50%) !important}
.z-logon-box #signup_error_tos_agree, .z-logon-box #signup_error_duplicate_username, .z-logon-box #signup_error_duplicate_identity {display:none}
.z-logon-box.error_tos_agree #signup_error_tos_agree, .z-logon-box.error_duplicate_username #signup_error_duplicate_username, .z-logon-box.error_duplicate_identity #signup_error_duplicate_identity, .z-logon-box.error_custom_1 #signup_error_custom_1, .z-logon-box.error_custom_2 #signup_error_custom_2 {display:block}
.z_validation_message {display: block; margin:.5rem 0 0 0}
.z_invalid {color:var(--red)}
.invalid {color:var(--red)}
.z-logon-box #signup_verify {display:none}
#signup_error_tos_agree {display:none}
#signup_error_duplicate_username {display:none}
#signup_error_duplicate_identity {display:none}

/** Logon / Signup **/
.logon-page {margin:0; padding:1rem; max-width:60rem; border-radius:1rem /* Extra login options */}
.logon-page ul {list-style-type:none}
.logon-page p {color:var(--textColor)}
.logon-page .logon-page-form {margin:0}
.logon-page-title {margin:0; font-weight:bold}
.logon-page-unstyled {list-style:none}
.logon-page-back {margin:4rem 2rem}
.logon-page-prompt {text-align:center; max-width:40rem; margin:auto}
.logon-page-form {margin:auto}
.logon-page-alert {padding:1rem; margin-bottom:1rem; border-radius:1rem; color:#fff; text-transform:uppercase}
.logon-page-alert-info{background-color:none; border:2px solid white}
.logon-page-alert-success{background-color:var(--green)}
.logon-page-alert-warning{background-color:var(--yellow)}
.logon-page-alert-error{background-color:var(--red)}
.logon-page button[type="submit"], .logon-page input[type="submit"] {min-width:35%; margin:2rem auto 1rem auto}
.logon-page input[type="text"], .logon-page input[type="password"], textarea {}
.logon-page input[type="checkbox"] {}
.logon-page img.loading {display:block; margin:0 auto; opacity:0.5; height:1.6rem}

/** Form / Input Styles **/
.form-control-sk {display:block}
.form-group-sk {display:flex; flex:0 0 auto; flex-flow:row wrap; align-items:center; margin-bottom:1rem; color:var(--textColor)}
.form-group-sk h1, h2, h3, h4, h5, h6 {color:var(--titleColor)}
.form-group-sk input {}
.form-button .button {}


/** Search **/
.pagination li {list-style:none; padding:1em}
.disabled li {color:grey}

/** Figure */
.figure {border:solid; border-width:.2rem; border-color:var(--bodyDark)}
.figure img {filter: brightness(85%)}
.figure:hover {background:var(--cardDarkActive); border-color:var(--dateColor); color:var(--textColor)}
.figure img:hover{filter: brightness(70%)}
.figure-title {margin:0 0 1em 0}
.figure-summary {margin:.3em .3em 0 .3em}
.figure-caption {margin:.4rem .5rem .3rem .5rem; font-size:1.7rem; text-align:center; color:var(--figureColor)}
.figure-date {margin:.5em 1em 0 1em; font-size:1.7rem; color:var(--figureColor)}
.figure-location {margin:.5em 1em 0 1em; font-size:1.7rem; color:var(--figureColor)}

/* Footer */
.footer {max-width:1440px; margin:6rem auto 2rem auto !important}
.foot-items {color:var(--footerColor); padding:1rem}
.foot-items a {color:var(--footerColor); margin:.5rem; text-decoration:none}
.foot-img {max-width:10rem; margin:1rem}
.foot-copy {font-size:small; margin:0 -1rem !important; padding:1rem}
.foot-copy a {color:var(--footerCopyText); text-decoration:none}

/* Copyright */
.copyright-cc {font-size:small; padding:1rem}
.copyright-cc a {color:var(--footerCopyText); text-decoration:none}
.copyright-cc img {display:inline-block; height:2rem}

/** Spacing */
.space-half {display:block; width:100%; margin:2vw auto; margin-top:2vw; margin-right:auto; margin-bottom:2vw; margin-left:auto}
.space1 {display:block; width:100%; margin:5vw auto; margin-top:5vw; margin-right:auto; margin-bottom:5vw; margin-left:auto}
.space2 {display:block; width:100%; margin:10vw auto; margin-top:10vw; margin-right:auto; margin-bottom:10vw; margin-left:auto}