:where(html) {
  /* Golden Ratio */
  --phi: 1.6180339887498948482;
  --golden-base-size: 100vw;
  --golden-larger-size: calc(var(--golden-base-size) / var(--phi) );
  --golden-smaller-size: calc(var(--golden-base-size) - var(--golden-larger-size) );

   /* Grid */
  --grid-gap: var(--gap-base);
  --grid-column-width-min: 30ch;

   /* Container Width */
  --container-width-xxs: 400px;
  --container-width-xs: 600px;
  --container-width-s: 800px;
  --container-width-m: 1000px;
  --container-width-l: 1200px;
  --container-width-xl: 2400px;

  --container-width-max: 50rem;
  --container-gap: var(--gap-base);
}



/* Container */
.container {
  width: calc(100% - (var(--container-gap) * 2));
  max-width: calc(var(--container-width-max) - (var(--container-gap) * 2));
  margin-right: auto;
  margin-left: auto;
}
.container.is-fluid {
  max-width: none;
}
.width-full-container {
  width: 100vw;
  width: 100cqw;
}
.container,
.container-l {
  max-inline-size: var(--container-width-l);
}
.container-xl {
  max-inline-size: var(--container-width-xl);
}
.container-m {
  max-inline-size: var(--container-width-m);
}
.container-s {
  max-inline-size: var(--container-width-s);
}
.container-xs {
  max-inline-size: var(--container-width-xs);
}
.container-xxs {
  max-inline-size: var(--container-width-xxs);
}

.screen-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

/* Flex */
:where(.stack,
.stack-row,
.stack-row-e,
.stack-row-s) {
  display: flex;
  justify-content: flex-start;
  flex-flow: column wrap;
}
:where(.stack,.stack-row,.stack-row-e,.stack-row-s) {
  gap: var(--gap-base);
}
:where(.stack-row,
.stack-row-e,
.stack-row-s) {
  align-items: center;
  flex-direction: row;
}
:where(.stack-row-s) {
  align-items: start;
}
:where(.stack-row-e) {
  align-items: end;
}
:where(.stack-s) {
  align-items: start;
}
:where(.stack-e) {
  align-items: end;
}
:where(.nowrap) {
  flex-wrap: nowrap;
}
:where(.justify-center) {
  justify-content: center;
}
:where(.space-between) {
  justify-content: space-between;
}
:where(.space-around) {
  justify-content: space-around;
}
:where(.space-evenly) {
  justify-content: space-evenly;
}
:where(.content-center) {
  align-content: center;
}
:where(.align-self-center) {
  align-self: center !important;
}
:where(.align-self-end) {
  align-self: flex-end !important;
}
:where(.align-self-start) {
  align-self: flex-start !important;
}
:where(.stretch) {
  align-items: stretch;
}
:where(.center) {
  align-items: center;
}

/* Grid */
.grid,
.grid-2,
.grid-3,
.grid-4,
.grid-6,
.grid-8,
.grid-12 {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(var(--grid-columns,12),1fr);
}
:where(.grid,.grid-2,.grid-3,.grid-4,.grid-6,.grid-8,.grid-12) {
  gap: var(--gap-m);
}
.grid-12 {
  --grid-columns: 12;
}
.grid-8 {
  --grid-columns: 8;
}
.grid-6 {
  --grid-columns: 6;
}
.grid-4 {
  --grid-columns: 4;
}
.grid-3 {
  --grid-columns: 3;
}
.grid-2 {
  --grid-columns: 2;
}
.grid-center-i {
  justify-self: center;
}
.grid-center-b {
  align-self: center;
}
.grid-center {
  place-self: center;
}


/*** Layout ***/

.grid-auto {
  --min-width: var(--grid-column-width-min);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-width)), 1fr));
  gap: var(--grid-gap);
}

.flex-auto {
  --min-width: var(--grid-column-width-min);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-base);
}

.flex-auto > * {
  --flex-grow: 1;
  flex-grow: var(--flex-grow);
  flex-shrink: 1;
  flex-basis: var(--min-width);
}

/* grid-stack {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  border: 2px dashed var(--blue);
} */

:where(hstack) {
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-direction: row;
}

:where(hstack[gap=xl]) {
   gap: var(--gap-xl);
}

:where(hstack[gap=l]) {
   gap: var(--gap-l);
}

:where(hstack[gap=m]) {
  gap: var(--gap-m);
}

:where(hstack[gap=s]) {
   gap: var(--gap-s);
}

:where(hstack[gap=xs]) {
   gap: var(--gap-xs);
}

:where(hstack[gap=xxs]) {
   gap: var(--gap-xxs);
}

/* :where(hstack[gap]) > *:last-child {
   gap: 0;
} */

/* :where(hstack Specific alignments */

:where(hstack[align-y=start]) {
  align-items: flex-start;
}

:where(hstack[align-y=center]) {
  align-items: center;
}

:where(hstack[align-y=stretch]) {
  align-items: stretch;
}

:where(hstack[align-y=end]) {
  align-items: flex-end;
}

:where(hstack[align-x=start]) {
  justify-content: flex-start;
}

:where(hstack[align-x=center]) {
  justify-content: center;
}

:where(hstack[align-x=stretch]) {
  justify-content: stretch;
}

:where(hstack[align-x=end]) {
  justify-content: flex-end;
}
:where(hstack[align-x=space-between]) {
  justify-content: space-between;
}

:where(vstack) {
  display: flex;
  align-self: stretch;
  flex: 1 1 auto;
  flex-direction: column;
}

:where(vstack[gap=xl]) {
   gap: var(--gap-xl);
}

:where(vstack[gap=l]) {
   gap: var(--gap-l);
}

:where(vstack[gap=m]) {
   gap: var(--gap-m);
}

:where(vstack[gap=s]) {
   gap: var(--gap-s);
}

:where(vstack[gap=xs]) {
   gap: var(--gap-xs);
}

:where(vstack[gap=xxs]) {
   gap: var(--gap-xxs);
}

/* :where(vstack[gap] > *:last-child) {
   gap: 0;
} */

:where(vstack[align-x=start]) {
  align-items: flex-start;
}

:where(vstack[align-x=center]) {
  align-items: center;
}

:where(vstack[align-x=stretch]) {
  align-items: stretch;
}

:where(vstack[align-x=end]) {
  align-items: flex-end;
}

:where(vstack[align-y=start]) {
  justify-content: flex-start;
}

:where(vstack[align-y=center]) {
  justify-content: center;
}

:where(vstack[align-y=end]) {
  justify-content: flex-end;
}

:where(
  vstack[wrap],
  hstack[wrap]) {
  flex-wrap: wrap;
}

spacer {
  flex: 1;
}

:where(.grow) {
  flex-grow: 1;
}
:where(.shrink) {
  flex-shrink: 1;
  /* flex-grow: 0; */
}
:where(.no-grow) {
  flex-grow: 0;
}

:where(.wrap) {
  flex-wrap: wrap;
}

:where(.children-grow) {
  & > * {
    flex-grow: 1;
  }
}

:where(.children-stretch) {
  & > * {
    flex: 1 1 0;
  }
}