/** Shopify CDN: Minification failed

Line 2115:10 Expected identifier but found whitespace
Line 2115:12 Unexpected "{"
Line 2115:28 Expected ":"
Line 2115:61 Expected ":"

**/
/*! Skelet. v3.1.12 | MIT License | https://Selekkt.dk/skelet/v3/ */
/* Skelet. v3.1.12 w/ grid, flex, table from Skelet. v3.4.7  */
 *,body,html{
    box-sizing:border-box
}
html{
    line-height:1.15;
    -webkit-text-size-adjust:100%;
    scrollbar-gutter: stable;
}
body{
    margin:0
}
main{
    display:block
}
h1{
    font-size:2em;
    margin:.67em 0
}
hr{
    box-sizing:content-box;
    overflow:visible
}
pre{
    font-family:monospace,monospace;
    font-size:1em
}
a{
    background-color:transparent
}
abbr[title]{
    border-block-end:none;
    text-decoration:underline;
    text-decoration:underline dotted
}
b,strong{
    font-weight:bolder
}
code,kbd,samp{
    font-family:monospace,monospace;
    font-size:1em
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sub{
    bottom:-.25em
}
sup{
    top:-.5em
}
img{
    border-style:none
}
button,input,optgroup,select,textarea{
    font-family:inherit;
    font-size:100%;
    line-height:1.15;
    margin:0
}
button,input{
    overflow:visible
}
button,select{
    text-transform:none
}
[type=button],[type=reset],[type=submit],button{
    -webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
    border-style:none;
    padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{
    outline:1px dotted ButtonText
}
fieldset{
    padding:.35em .75em .625em
}
legend{
    box-sizing:border-box;
    color:inherit;
    display:table;
    max-width:100%;
    padding:0;
    white-space:normal
}
progress{
    vertical-align:baseline
}
textarea{
    overflow:auto
}
[type=checkbox],[type=radio]{
    box-sizing:border-box;
    padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto
}
[type=search]{
    -webkit-appearance:textfield;
    outline-offset:-2px
}
[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit
}
details{
    display:block
}
summary{
    display:list-item
}
:root{
    --fontFamily:"Inter","HelveticaNeue","Helvetica Neue","Helvetica","Arial",-apple-system,BlinkMacSystemFont,-system-ui,system-ui,sans-serif;
    --fontFamilyVar:"Inter var","HelveticaNeue","Helvetica Neue","Helvetica","Arial",-apple-system,BlinkMacSystemFont,-system-ui,system-ui,sans-serif;
    --fontSize:1.6rem;
    --fontLine:1.6;
    --fontWeight:400;
    --fontStyle:normal;
    --h1Size:5.0rem;
    --h2Size:4.2rem;
    --h3Size:3.6rem;
    --h4Size:3.0rem;
    --h5Size:2.4rem;
    --h6Size:1.8rem;
    --hWeight:600;
    --hLine:1.5;
    --hStyle:normal;
    --h1Line:var(--hLine);
    --h2Line:var(--hLine);
    --h3Line:var(--hLine);
    --h4Line:var(--hLine);
    --h5Line:var(--hLine);
    --h6Line:var(--hLine);
    --padding:1rem;
    --margin:0.5rem;
    --radius:0.5rem;
    --borderWidth:1px;
    --borderStyle:solid;
    --hrMargin:calc(var(--margin)*5);
    --boxPadding:44px;
    --boxMargin:0;
    --boxRadius:var(--radius);
    --boxBorderWidth:var(--borderWidth);
    --boxBorderStyle:var(--borderStyle);
    --boxFontSize:var(--fontSize);
    --boxHeight:21px;
    --buttonPadding:var(--padding);
    --buttonMargin:var(--margin);
    --buttonRadius:var(--radius);
    --buttonBorderWidth:var(--borderWidth);
    --buttonBorderStyle:var(--borderStyle);
    --buttonFontSize:var(--fontSize);
    --columnGap:1rem;
    --rowGap:2rem;
    --tooltipRadius:0.5rem;
    --tooltipFontSize:1.2rem;
    --tooltipMove:4px;
    --tooltipDuration:190ms;
    --primary:#007fff;
    --green:#34c84a;
    --yellow:#fdbc40;
    --red:#fc615d;
    --white:#fff;
    --black:#000;
    --light:#efefef;
    --dark:#181818;
    --shadow:rgba(10, 10, 10, 0.1);
    --linkColor:var(--primary);
    --linkHover:#3298ff;
    --tooltipBgColor:var(--dark);
    --tooltipColor:var(--white);
    --bgColor:#fff;
    --color:#000;
    --colorInverse:#fff;
    --boxBorderColor:#e1e1e1;
    --boxBorderHover:#bababa;
    --boxBorderActive:var(--primary);
    --boxBgColor:#fefefe;
    --boxActive:var(--primary);
    --boxActiveInner:var(--white);
    --boxFocus:2px rgba(41, 145, 248, 0.3);
    --buttonBgColor:transparent;
    --selectionBg:rgba(0, 0, 0, 0.55);
    --selectionText:#fff;
    --codeColor:#00f;
    --codeBgColor:#f8f8f8;
    --hrColor:hsla(0, 0%, 100%, 0);
    --easeInOutQuad:cubic-bezier(0.45, 0, 0.55, 1);
}

:not(pre)>code,:not(pre)>kbd,:not(pre)>samp{
    font-size:1.2rem;
    font-family:Consolas,monospace,serif;
    white-space:nowrap
}
canvas,img,svg,video{
    vertical-align:middle;
    max-width:100%;
    box-sizing:border-box
}
dt{
    font-weight:700
}
dd{
    margin-inline-start:4rem
}
dd,img{
    display:block
}
img{
    max-width:100%;
    height:auto
}
figure{
    margin:0
}
[hidden],template{
    display:none!important
}
iframe{
    border:none!important
}
html{
    height:100%;
    font-size:62.5%;
    scroll-behavior: var(--scrollBehavior, smooth);
    scroll-padding-top: var(--scrollPadding, auto)
}
body{
    background-color:var(--bgColor);
    color:var(--color);
    font-size:var(--fontSize);
    line-height:var(--fontLine);
    font-weight:var(--fontWeight);
    font-style:var(--fontStyle);
    font-family:var(--fontFamily)
}
#app{
    display:flex;
    min-height:100vh;
    flex-direction:column
}
main{
    flex:1
}
::selection{
    background:var(--selectionBg);
    color:var(--selectionText)
}
::-moz-selection{
    background:var(--selectionBg);
    color:var(--selectionText)
}

/* 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 }
html.no-js .no-js-hidden { display: none!important }

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{
    font-family:var(--hFontFamily);
    color:var(--colorHeadings);
    margin-top:0;
    margin-bottom:.7rem;
    font-size:var(--hSize);
    font-weight:var(--hWeight);
    line-height:var(--hLine);
    font-style:var(--hStyle)
}
.h1,h1{
    --hSize:var(--h1Size);
    --hLine:var(--h1Line)
}
.h2,h2{
    --hSize:var(--h2Size);
    --hLine:var(--h2Line)
}
.h3,h3{
    --hSize:var(--h3Size);
    --hLine:var(--h3Line)
}
.h4,h4{
    --hSize:var(--h4Size);
    --hLine:var(--h4Line)
}
.h5,h5{
    --hSize:var(--h5Size);
    --hLine:var(--h5Line)
}
.h6,h6{
    --hSize:var(--h6Size);
    --hLine:var(--h6Line)
}
@media (max-width:777px){
    :root{
        --h1Size:4.0rem;
        --h2Size:3.6rem;
        --h3Size:3.0rem;
        --h4Size:2.4rem;
        --h5Size:2.1rem;
        --h6Size:1.8rem;
        --hLine:1.2;
        --h1Line:var(--hLine);
        --h2Line:var(--hLine);
        --h3Line:var(--hLine);
        --h4Line:var(--hLine);
        --h5Line:var(--hLine);
        --h6Line:var(--hLine)
    }
}
p{
    margin-top:0;
    margin-bottom:.5rem
}
a:not(.button){
    color:var(--linkColor);
    cursor:pointer
}
a:not(.button):hover{
    color:var(--linkHover)
}
a:not(.button):active,a:not(.button):hover{
    outline:0
}
a.no-style{
    text-decoration:none
}
code{
    display:inline-block;
    padding:var(--buttonPadding);
    margin:0;
    font-size:90%;
    white-space:nowrap;
    vertical-align:middle;
    background-color:var(--codeBgColor);
    border:1px solid var(--boxBorderColor);
    color:var(--codeColor);
    border-radius:var(--radius);
    overflow:auto
}
pre>code{
    display:block;
    padding:calc(var(--padding)*1);
    white-space:pre
}

.h-6,.w-6 { --hiOutline: 1.8rem; width: var(--hiOutline); height: var(--hiOutline) }
.h-5,.w-5 { --hiSolid: 1.4rem; width: var(--hiSolid); height: var(--hiSolid) }

.clearfix:after,.container:after{
    content:"";
    display:table;
    clear:both
}
.fullwidth{
    width:100%;
    box-sizing:border-box
}
.fullwidth-max{
    max-width:100%;
    box-sizing:border-box
}
.block{
    display:block
}
.inline{
    display:inline;
    margin:0
}
.inline-block{
    display:inline-block;
    margin:0
}
.center{
    display:block;
    text-align:center;
    margin:0 auto
}
.nowrap{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.text-start { text-align: start }
.text-center { text-align: center }
.text-end { text-align: end }
.text-justify { text-align: justify }
.text-normal { font-weight: 400 }
.text-uppercase { text-transform:uppercase }
.text-lowercase { text-transform:lowercase }
.text-capitalize { text-transform:capitalize }
.text-underline { border-block-end: 1px solid currentColor }
.text-line-through { text-decoration: line-through }
.text-break-word { overflow-wrap: break-word }
.float-right{ float:right }
.float-left{ float:left }
.float-none{ float:none }
.sticky{ position:sticky; top:0 }
.sticky-bottom{ position:sticky; bottom:0 }
.sticky-none { position: inherit }

@media only screen and (max-width:777px){
    .fullwidth-s{
        width:100%;
        box-sizing:border-box
    }
    .fullwidth-max-s{
        max-width:100%;
        box-sizing:border-box
    }
    .block-s{
        display:block
    }
    .inline-s{
        display:inline;
        margin:0
    }
    .inline-block-s{
        display:inline-block;
        margin:0
    }
    .center-s{
        display:block;
        text-align:center;
        margin:0 auto
    }
    .nowrap-s{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }
    .text-start-s{
        text-align:start
    }
    .text-center-s{
        text-align:center
    }
    .text-end-s{
        text-align:end
    }
    .text-justify-s{
        text-align:justify
    }
    .float-right-s{
        float:right
    }
    .float-left-s{
        float:left
    }
    .float-none-s{
        float:none
    }
    .sticky-s{
        position:sticky;
        top:0
    }
    .sticky-bottom-s{
        position:sticky;
        bottom:0
    }
    .sticky-none-s{
        position:inherit
    }
}

.center-axys,.center-axyz{
    display:flex;
    align-items:center;
    justify-content:center
}
.center-axys.full,.center-axyz.full{
    height:100vh;
    width:100%
}
@media only screen and (max-width:777px){
    .center-axys-s,.center-axyz-s{
        display:flex;
        align-items:center;
        justify-content:center
    }
    .center-axys-s.full-s,.center-axyz-s.full-s{
        height:100vh;
        width:100%
    }
}
.mob-scroller{
    display:flex;
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow:hidden;
    overflow-x:auto;
    height:auto;
    width:100%;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch
}
@media only screen and (max-width:777px){
    .mob-scroller::-webkit-scrollbar{
        display:none
    }
}
@media only screen and (max-width:777px){
    .large-only,.only-large{
        display:none!important
    }
}
@media only screen and (min-width:778px){
    .only-small,.small-only{
        display:none!important
    }
}

.is-green{ border-color:var(--green)!important; color: var(--green) }
.is-red{ border-color:var(--red)!important; color: var(--red) }

.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
    display:inline-block;
    padding:var(--buttonPadding);
    color:var(--buttonColor);
    font-size:var(--buttonFontSize);
    white-space:nowrap;
    letter-spacing:.1rem;
    font-weight: var(--buttonWeight, 600);
    font-style:inherit;
    text-align: var(--buttonAlign, center);
    text-transform: var(--buttonTransform, uppercase);
    text-decoration:none;
    background:var(--buttonBgColor);
    border-radius:var(--buttonRadius);
    border:var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor);
    cursor:pointer;
    box-sizing:border-box
}
.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{
    border-color: var(--buttonBorderHover);
    outline:0
}
.button[disabled],button[disabled],input[disabled]{ cursor:not-allowed }

.button,button{
    vertical-align:baseline
}
.button[class*=is-],.button[class*=is-]:hover{
    border-color:transparent
}
.button.is-white,button.is-white{
    --buttonBgColor:var(--white);
    --buttonColor:var(--black)
}
.button.is-light,button.is-light{
    --buttonBgColor:var(--light);
    --buttonColor:var(--dark)
}
.button.is-dark,button.is-dark{
    --buttonBgColor:var(--dark);
    --buttonColor:var(--light)
}
.button.is-black,button.is-black{
    --buttonBgColor:var(--black);
    --buttonColor:var(--white)
}
.button.is-blank,button.is-blank{
    --buttonBgColor:none;
    --buttonColor:var(--color);
    --buttonBorderColor:none
}
.button.is-outline,button.is-outline{
    transition:border 0s;
    background:0 0;
    border:var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor);
    color:var(--buttonColor)
}
.button:hover.is-outline,button:hover.is-outline{
    color:var(--buttonColor);
    border-color:var(--buttonBorderHover)
}
.button.is-primary,button.is-primary{
    --buttonBgColor:var(--primary);
    --buttonColor:var(--white)
}
.button.is-green,button.is-green{
    --buttonBgColor:var(--green);
    --buttonColor:var(--white)
}
.button.is-yellow,button.is-yellow{
    --buttonBgColor:var(--yellow);
    --buttonColor:var(--black)
}
.button.is-red,button.is-red{
    --buttonBgColor:var(--red);
    --buttonColor:var(--white)
}
.button.is-small,button.is-small{
    padding:var(--buttonPadding);
    font-size:.9rem
}
.button.is-large,button.is-large{
    padding:calc(var(--buttonPadding)*1);
    font-size:2rem
}
.button.is-custom,button.is-custom {
    --buttonBgColor: transparent; 
    --buttonColor: currentColor; 
    --buttonColorHover: currentColor; 
    --buttonBorderColor: transparent; 
    --buttonBorderHover: transparent; 
}

input[type=checkbox],
input[type=radio]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    height:var(--boxHeight);
    outline:0;
    display:inline-block;
    vertical-align:top;
    position:relative;
    margin:0;
    cursor:pointer;
    border:1px solid var(--bc,var(--boxBorderColor));
    background:var(--b,var(--boxBgColor));
}
input[type=checkbox]:after,
input[type=radio]:after{
    content:"";
    display:block;
    left:0;
    top:0;
    position:absolute;
}
input[type=checkbox]:checked,
input[type=radio]:checked{
    --b:var(--boxBgColor);
    --bc:var(--boxColor);
}
input[type=checkbox]:disabled,input[type=radio]:disabled{
    filter:grayscale(100%);
    cursor:not-allowed;
    opacity:.9
}
input[type=checkbox]:disabled:checked,input[type=radio]:disabled:checked{
    filter:grayscale(100%)
}
input[type=checkbox]:disabled+label,input[type=radio]:disabled+label{
    cursor:not-allowed
}
input[type=checkbox]:hover:not(:checked):not(:disabled),input[type=radio]:hover:not(:checked):not(:disabled){
    --bc:var(--boxBorderHover)
}
input[type=checkbox]:focus,input[type=radio]:focus{
    box-shadow:0 0 0 var(--boxFocus)
}
input[type=checkbox]:not(.switch),input[type=radio]:not(.switch){
    width:21px
}
input[type=checkbox]:not(.switch):after,input[type=radio]:not(.switch):after{
    opacity:var(--o, 0)
}
input[type=checkbox]:not(.switch):checked,input[type=radio]:not(.switch):checked{
    --o:1
}
input[type=checkbox]+label,input[type=radio]+label{
    font-size:1.4rem;
    line-height:var(--boxHeight);
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
    margin-left:4px;
    user-select:none
}
input[type=checkbox]:not(.switch){
    border-radius:7px
}
input[type=checkbox]:not(.switch):after{
    width:5px;
    height:9px;
    border:2px solid var(--boxColor);
    border-block-start:0;
    border-inline-start:0;
    left:6px;
    top:2.5px;
    -webkit-transform:rotate(43deg);
    transform:rotate(43deg)
}
input[type=checkbox].switch{
    width:38px;
    border-radius:11px
}
input[type=checkbox].switch:after{
    --ab: currentColor;
    left:2px;
    top:2px;
    border-radius:50%;
    width:15px;
    height:15px;
    background:var(--ab,var(--boxColor));
    -webkit-transform:translateX(var(--x,0));
    transform:translateX(var(--x,0))
}
input[type=checkbox].switch:checked{
    --ab:var(--boxActiveInner);
    --x:17px
}
input[type=checkbox].switch:disabled:not(:checked):after{
    opacity:.6
}
input[type=radio]{
    border-radius:50%
}
input[type=radio]:after{
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--boxActiveInner);
    opacity:0;
    -webkit-transform:scale(var(--s,.7));
    transform:scale(var(--s,.7))
}
input[type=radio]:checked{
    --s:.5
}
::placeholder{
    color:var(--boxPlaceholderColor)
}
input[inputmode],input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{
    padding:var(--boxPadding);
    margin:var(--boxMargin);
    border-radius:var(--boxRadius);
    color:var(--boxColor);
    background-color:var(--boxBgColor);
    border:var(--boxBorderWidth) var(--boxBorderStyle) var(--boxBorderColor);
    border-radius:var(--radius);
    text-align:var(--boxAlign);
    text-transform:var(--boxTransform);
    box-shadow:none;
    box-sizing:border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
input[inputmode]:hover,input[type=color]:hover,input[type=date]:hover,input[type=datetime-local]:hover,input[type=email]:hover,input[type=file]:hover,input[type=month]:hover,input[type=number]:hover,input[type=password]:hover,input[type=search]:hover,input[type=tel]:hover,input[type=text]:hover,input[type=time]:hover,input[type=url]:hover,input[type=week]:hover,select:hover,textarea:hover{
    border-color:var(--boxBorderHover);
    outline:0
}
input[inputmode]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=file]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{
    border-color:var(--boxBorderActive);
    outline:0
}
input[type=range]{
    height:2.25rem;
    line-height:2.25rem;
    vertical-align:middle;
    width:100%
}
input[type=color]{
    padding:0;
    border:none
}
textarea{
    min-height:6.5rem;
    padding:var(--boxPadding)
}
label,legend{
    display:inline-block;
    margin-bottom:var(--margin);
    font-weight:600
}
fieldset{
    border:1px solid var(--boxBorderColor);
    border-radius:var(--radius)
}
legend{
    padding:var(--padding)
}
label span{
    display:inline;
    color:var(--color);
    margin-left:var(--margin);
    font-weight:400
}
fieldset,input,select,textarea{
    margin-bottom:var(--margin)
}
option{
    padding:5px
}

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

select:focus,select:hover{
    outline:0;
    color:var(--boxColor)
}
select:-moz-focusring{
    outline:0;
    color:transparent;
    text-shadow:0 0 0 var(--color)
}
ol,ul{
    padding-left:0;
    margin-top:0
}
ol ol,ol ul,ul ol,ul ul{
    margin:1.5rem 0 1.5rem 3rem;
    font-size:100%
}
li{
    margin-bottom:var(--margin)
}
.inline li{
    display:inline-block
}
.inline li,ol.no-style,ul.no-style{
    list-style:none;
    margin:0;
    padding:0
}
ol.no-style ol,ul.no-style ul{
    list-style:none
}
hr{
    margin:var(--hrMargin) auto;
    background-color:var(--boxBorderColor);
    border:0;
    width:95%
}
hr:not([size]){
    height:1px
}
hr.full{
    width:100%
}
hr.gradient{
    background-image:linear-gradient(90deg,var(--hrColor) 0,var(--boxBorderColor) 50%,var(--hrColor))
}
.text-hr{
    display:flex;
    align-items:center;
    text-align:center;
    margin:calc(var(--margin)*5) auto
}
.text-hr:after,.text-hr:before{
    content:"";
    flex:1;
    border-block-end:1px solid var(--boxBorderColor)
}
.text-hr:before{
    margin-right:var(--padding)
}
.text-hr:after{
    margin-left:var(--padding)
}

/* ------------------
  tables
------------------ */
table {
    --tableColor: currentColor;
    --tableBg: transparent;
    --tableStrip: transparent;
    --tablePadding: var(--margin);
    --tableBorderWidth: var(--globalBorderWidth);
    --tableBorderStyle: solid;
    --tableBorderColor: var(--globalBorderColor);
    --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: 90px; 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: left;
    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 */

    --jsDisplay: grid;
    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 }
}

/* ------------------
  flexbox
------------------ */
/*  Flex Container */
:where(x-flex,[x-flex]) { --jsDisplay: 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% }
}

/* ------------------------
  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 }
}

/* Used for Hero Banner */
x-flex[pi="top left"] { align-items: flex-start; justify-content: flex-start }
x-flex[pi="top center"] { align-items: flex-start; justify-content: center }
x-flex[pi="top right"] { align-items: flex-start; justify-content: flex-end }
x-flex[pi="top between"] { align-items: flex-start; width: 100%; }

x-flex[pi="center left"] { align-items: center; justify-content: flex-start }
x-flex[pi="center"] { align-items: center; justify-content: center }
x-flex[pi="center right"] { align-items: center; justify-content: flex-end }
x-flex[pi="center between"] { align-items: center; width: 100%; }

x-flex[pi="bottom left"] { align-items: flex-end; justify-content: flex-start }
x-flex[pi="bottom center"] { align-items: flex-end; justify-content: center }
x-flex[pi="bottom right"] { align-items: flex-end; justify-content: flex-end }
x-flex[pi="bottom between"] { align-items: flex-end; width: 100%; }

x-flex[pi*="between"] x-cell.content { width: 100% }
x-flex[pi*="between"] x-cell.content x-flex { justify-content: space-between }

x-flex[pi*="between"][orientation="column"] x-cell.content { height: 100% }
x-flex[pi*="between"][orientation="column"] x-cell.content x-flex { height: 100%; justify-content: space-between }

@media (max-width: 777px) {
    x-flex[pi-s="top left"] { align-items: flex-start; justify-content: flex-start }
    x-flex[pi-s="top center"] { align-items: flex-start; justify-content: center }
    x-flex[pi-s="top right"] { align-items: flex-start; justify-content: flex-end }
    x-flex[pi-s="top between"] { align-items: flex-start; width: 100%; }

    x-flex[pi-s="center left"] { align-items: center; justify-content: flex-start }
    x-flex[pi-s="center"] { align-items: center; justify-content: center }
    x-flex[pi-s="center right"] { align-items: center; justify-content: flex-end }
    x-flex[pi-s="center between"] { align-items: center; width: 100%; }

    x-flex[pi-s="bottom left"] { align-items: flex-end; justify-content: flex-start }
    x-flex[pi-s="bottom center"] { align-items: flex-end; justify-content: center }
    x-flex[pi-s="bottom right"] { align-items: flex-end; justify-content: flex-end }
    x-flex[pi-s="bottom between"] { align-items: flex-end; width: 100%; }

    x-flex[pi-s*="between"] x-cell.content { width: 100% }
    x-flex[pi-s*="between"] x-cell.content x-flex { justify-content: space-between }

    x-flex[pi-s*="between"][orientation-s="column"] .content { height: 100% }
    x-flex[pi-s*="between"][orientation-s="column"] .content x-flex { height: 100%; justify-content: space-between }
}
/* Custom CSS for Header Layout - NavigationをSecondary menu側に寄せる */
@media (min-width: 778px) {
  /* #header-grid のカラム定義を上書きするのではなく、各セルの配置を調整 */

  /* Navigationカラム (menulink) を、そのグリッドセル内で右寄せにする */
  /* x-gridがどうカラムを割り振っていても、menulinkがその中で右に寄るようにします */
  header .menulink {
    /* テーマ設定で定義されたnavigationAlignmentを尊重しつつ、強制的に右寄せにする */
    justify-content: flex-end !important; /* または var(--navAlign) を上書き */
    text-align: right !important; /* 念のためテキストも右寄せ */
    /* width は theme.css の設定 var(--navAlign) で制御されるため、ここでのwidth指定は削除 */
    /* ナビゲーションの幅はx-gridのカラム内で自動調整されるか、menulink自身のpaddingで調整される */
  }

  /* ナビゲーションリスト (ul.inline) の内部を確実に右寄せにする */
  header .menulink nav ul.inline {
    justify-content: flex-end !important; /* メニューアイテム自体を右寄せに */
    margin-left: auto !important; /* 強制的に左マージンをautoにして右寄せ */
    margin-right: 0 !important; /* 右マージンをリセット */
  }

  /* Secondary menu (accounts) を確実に右寄せにする */
  header .accounts {
    justify-content: flex-end !important; /* または var(--accAlign) を上書き */
    text-align: right !important; /* 念のためテキストも右寄せ */
    /* Secondary Menuの幅をここで固定値で上書き（もしapp.cssの他の場所で設定されていなければ） */
    width: {{ accounts_block.settings.secondaryMenuWidth }}px !important; /* 必要に応じてピクセル値を指定 */
  }

  /* ロゴ（bogo）を左寄せに維持 */
  header .bogo {
    justify-content: flex-start !important; /* 強制的に左寄せに */
    text-align: left !important;
  }
}

/* 念のため、他の要素の不要な余白をリセット */
header x-grid x-cell {
    padding-left: var(--padding) !important;
    padding-right: var(--padding) !important;
}
header .bogo, header .menulink, header .accounts {
    padding-inline: var(--padding) !important; /* padding を調整 */
}

/* メニューアイテム間のギャップを調整したい場合 */
.menulink nav ul.inline li {
    padding-left: var(--columnGap, 1rem) !important; /* アイテム間の左パディング */
    /* 必要に応じて他のパディングも調整 */
}
.menulink nav ul.inline li:first-child {
    padding-left: 0 !important; /* 最初のアイテムの左パディングはなし */
}