/*! Skelet.css - v5.0.0 | MIT License | (c) 2024 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: rgb(10 10 10 / 0.1);

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

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

  --selectionBg: rgb(0 0 0 / .90);
  --selectionText: #FFF;

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

  --hrColor: var(--inputBorderColor);
  --hrGradient: rgb(255 255 255 / 0);

  /* typography */
  --fontFallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, HelveticaNeue, "Helvetica Neue", "Helvetica", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --fontMono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --fontSerif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --fontFamily: "Inter", var(--fontFallback);
  --fontFamilyVar: "Inter var", var(--fontFallback);
  --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: #FFF;
  --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
}

:is([hidden], [type="hidden"], .hidden) {
  display: none !important;
  outline: 0
}

:is([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
------------------ */
:root {
  --hStyle: normal;
  --hWeight: 600;
  --hTransform: inherit;
  --hAlign: inherit;
  --hColor: currentColor;
  --hMargin: 0 0 0.65em;
  --hTextWrap: balance;

  --h1Size: clamp(calc(var(--hScale) * var(--h1SizeMin, 3.1rem)), calc(var(--hScale) * var(--h1Val, 1.6vw + 2.7rem)), calc(var(--hScale) * var(--h1SizeMax, 4rem)));
  --h2Size: clamp(calc(var(--hScale) * var(--h2SizeMin, 2.7rem)), calc(var(--hScale) * var(--h2Val, 0.9vw + 2.5rem)), calc(var(--hScale) * var(--h2SizeMax, 3.2rem)));
  --h3Size: clamp(calc(var(--hScale) * var(--h3SizeMin, 2.4rem)), calc(var(--hScale) * var(--h3Val, 0.7vw + 2.2rem)), calc(var(--hScale) * var(--h3SizeMax, 2.8rem)));
  --h4Size: clamp(calc(var(--hScale) * var(--h4SizeMin, 2.2rem)), calc(var(--hScale) * var(--h4Val, 0.3vw + 2.1rem)), calc(var(--hScale) * var(--h4SizeMax, 2.4rem)));
  --h5Size: clamp(calc(var(--hScale) * var(--h5SizeMin, 2rem)), calc(var(--hScale) * var(--h5Val, 0.3vw + 1.9rem)), calc(var(--hScale) * var(--h5SizeMax, 2.2rem)));
  --h6Size: clamp(calc(var(--hScale) * var(--h6SizeMin, 1.6rem)), calc(var(--hScale) * var(--h6Val, 0.2vw + 1.6rem)), calc(var(--hScale) * var(--h6SizeMax, 1.7rem)));
}

h1,
.h1 {
  font-size: var(--hSize, var(--h1Size));
  line-height: var(--h1Line, var(--hLine, var(--fontLine)));
  letter-spacing: var(--h1Space, var(--hSpace))
}

h2,
.h2 {
  font-size: var(--hSize, var(--h2Size));
  line-height: var(--h2Line, var(--hLine, var(--fontLine)));
  letter-spacing: var(--h2Space, var(--hSpace))
}

h3,
.h3 {
  font-size: var(--hSize, var(--h3Size));
  line-height: var(--h3Line, var(--hLine, var(--fontLine)));
  letter-spacing: var(--h3Space, var(--hSpace))
}

h4,
.h4 {
  font-size: var(--hSize, var(--h4Size));
  line-height: var(--h4Line, var(--hLine, var(--fontLine)));
  letter-spacing: var(--h4Space, var(--hSpace))
}

h5,
.h5 {
  font-size: var(--hSize, var(--h5Size));
  line-height: var(--h5Line, var(--hLine, var(--fontLine)));
  letter-spacing: var(--h5Space, var(--hSpace))
}

h6,
.h6 {
  font-size: var(--hSize, var(--h6Size));
  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-family: var(--hFontFamily);
  font-weight: var(--hWeight);
  font-style: var(--hStyle);
  text-transform: var(--hTransform);
  text-align: var(--hAlign);
  text-wrap: var(--hTextWrap);
  color: var(--hColor);
  margin: var(--hMargin);
}

.hx {
  --hTextWrap: inherit;
  --hMargin: 0;
  font-size: var(--hxSize, inherit);
  line-height: var(--hxLine, var(--hLine, var(--fontLine)));
  letter-spacing: var(--hxSpace, var(--hSpace))
}

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;
  inset-block-start: var(--padding);
  inset-inline-start: 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
}

.field-sizing {
  field-sizing: content
}

/* to be used on: input, textarea, select */

.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;
  inset-block-start: var(--sticky, 0)
}

.sticky-bottom {
  position: sticky;
  inset-block-end: 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;
    inset-block-start: var(--sticky, 0)
  }

  .sticky-bottom-s {
    position: sticky;
    inset-block-end: 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;
    inset-block-start: var(--sticky, 0)
  }

  .sticky-bottom-m {
    position: sticky;
    inset-block-end: var(--sticky, 0)
  }

  .sticky-none-m {
    position: inherit
  }
}

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

.is-red,
input:not(:placeholder-shown):user-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%
  }
}

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

/** Scroll snap */
.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: fit-content;
  --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 */

@media (max-width: 777px) {
  .scroll-snap-s {
    --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-s>* {
    flex: var(--scrollChildFlex, 1);
    width: var(--scrollChildWidth);
    min-width: var(--scrollChildMinWidth);
    height: var(--scrollChildHeight);
    scroll-snap-align: var(--scrollAlign)
  }

  .scroll-snap-s.y {
    --scrollDirection: y;
    --scrollFlexFlow: column nowrap;
    --scrollAlignItems: start;
    --scrollHeight: 100vh;
    --scrollOverflowX: hidden;
    --scrollOverflowY: scroll;
  }

  .scroll-snap-s.mandatory {
    --scrollType: mandatory
  }

  /* default */
  .scroll-snap-s.proximity {
    --scrollType: proximity
  }

  .scroll-snap-s.align-start {
    --scrollAlign: start
  }

  .scroll-snap-s.align-center {
    --scrollAlign: center
  }

  .scroll-snap-s.align-end {
    --scrollAlign: end
  }

  .scroll-snap-s.stop-always {
    --scrollStop: always
  }

  /* default */
}

@media (min-width: 1024px) {
  .scroll-snap-m {
    --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-m>* {
    flex: var(--scrollChildFlex, 1);
    width: var(--scrollChildWidth);
    min-width: var(--scrollChildMinWidth);
    height: var(--scrollChildHeight);
    scroll-snap-align: var(--scrollAlign)
  }

  .scroll-snap-m.y {
    --scrollDirection: y;
    --scrollFlexFlow: column nowrap;
    --scrollAlignItems: start;
    --scrollHeight: 100vh;
    --scrollOverflowX: hidden;
    --scrollOverflowY: scroll;
  }

  .scroll-snap-m.mandatory {
    --scrollType: mandatory
  }

  /* default */
  .scroll-snap-m.proximity {
    --scrollType: proximity
  }

  .scroll-snap-m.align-start {
    --scrollAlign: start
  }

  .scroll-snap-m.align-center {
    --scrollAlign: center
  }

  .scroll-snap-m.align-end {
    --scrollAlign: end
  }

  .scroll-snap-m.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, auto);
}

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

/**** 
 * Toggle token
 * */
.toggle-token,
.toggle-token legend {
  all: unset
}

.toggle-token input:where([type="radio"], [type="checkbox"]) {
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important
}

.toggle-token {
  --tokenBg: var(--buttonBg);
  --tokenColor: var(--buttonColor);
  --tokenBorder: var(--buttonBorderColor);
  --tokenRadius: var(--buttonRadius);
  --tokenPadding: var(--buttonPadding);
  --tokenMargin: var(--buttonMargin);

  --tokenBgHover: var(--buttonBgHover);
  --tokenColorHover: var(--buttonColorHover);
  --tokenBorderHover: var(--buttonBorderHover);

  --tokenBgActive: var(--buttonColor);
  --tokenColorActive: var(--buttonBg);
  --tokenBorderActive: var(--inputBorderActive);
}

.toggle-token label,
.toggle-token input:where([type="radio"], [type="checkbox"])+label {
  display: var(--tokenDisplay, inline-flex);
  flex-direction: var(--tokenDirection, row);
  background: var(--tokenBg);
  color: var(--tokenColor);
  font-size: inherit;
  font-weight: var(--tokenFontWeight, 400);
  letter-spacing: var(--tokenSpace, var(--fontSpace));
  line-height: var(--tokenLine, var(--fontLine));
  border: 1px solid var(--tokenBorder);
  border-radius: var(--tokenRadius, 100vw);
  padding: var(--tokenPadding);
  margin: var(--tokenMargin);
  cursor: pointer;
  position: relative;
}

.toggle-token label:hover,
.toggle-token input:where([type="radio"], [type="checkbox"]):hover+label {
  background: var(--tokenBgHover);
  color: var(--tokenColorHover);
  border-color: var(--tokenBorderHover)
}

.toggle-token label:has(input:where([type="radio"], [type="checkbox"]):checked),
.toggle-token input:where([type="radio"], [type="checkbox"]):checked+label {
  background: var(--tokenBgActive);
  color: var(--tokenColorActive);
  border-color: var(--tokenBorderActive);
  font-weight: var(--tokenFontWeight)
}

.toggle-token label:has(input:where([type="radio"], [type="checkbox"]):where(:disabled, .disabled)),
.toggle-token input:where([type="radio"], [type="checkbox"]):where(:disabled, .disabled)+label {
  filter: grayscale(100%);
  cursor: not-allowed;
  opacity: var(--tokenOpacity, 0.3);
  text-decoration: var(--tokenTextDec, line-through);
  pointer-events: none;
}

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

: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:user-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;
  inset-block-start: var(--sticky, .2rem);
  z-index: 2
}

table.is-sticky-foot tfoot {
  position: sticky;
  inset-block-end: 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]) {
  --jsDisplay: 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
  }
}

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

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

  0%,
  100% {
    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
  }
}