/*
search: (^.h-.*)(\n{0,}\s{0,})(width)
replace: $1 $2 height
search: (var\(--space)(-)([1-9])(x\))
replace: calc($1) * $3)
search: (.pd-[1-9]x .*\n{0,}.*\n{0,}\})
replace:
search: (.pd)(-[1-9]x)( .*\n{0,}\s{0,})(padding: )(calc.*)(\n{0,}\})
replace:
$1$2$3$4$5$6
$1-y$2$3padding-top:$5
padding-bottom:$5$6
*/
/* #region height */
.h-auto {
  height: auto;
  min-width: auto;
  max-width: auto;
}

.h-min {
  height: min-content;
}

.h-max {
  height: max-content;
}

.h-fit {
  height: fit-content;
}

/* Percentage Widths (ordered from lowest to highest) */
.h-20 {
  height: 20%;
  min-width: 20%;
  max-width: 20%;
}

.h-25 {
  height: 25%;
  min-width: 25%;
  max-width: 25%;
}

.h-33 {
  height: 33.33%;
  min-width: 33.33%;
  max-width: 33.33%;
}

.h-40 {
  height: 40%;
  min-width: 40%;
  max-width: 40%;
}

.h-50 {
  height: 50%;
  min-width: 50%;
  max-width: 50%;
}

.h-60 {
  height: 60%;
  min-width: 60%;
  max-width: 60%;
}

.h-66 {
  height: 66.66%;
  min-width: 66.66%;
  max-width: 66.66%;
}

.h-75 {
  height: 75%;
  min-width: 75%;
  max-width: 75%;
}

.h-80 {
  height: 80%;
  min-width: 80%;
  max-width: 80%;
}

.h-100 {
  height: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* Viewport Widths (extended and ordered) */
.h-10v {
  height: 10vh;
  min-width: 10vh;
  max-width: 10vh;
}

.h-20v {
  height: 20vh;
  min-width: 20vh;
  max-width: 20vh;
}

.h-25v {
  height: 25vh;
  min-width: 25vh;
  max-width: 25vh;
}

.h-30v {
  height: 30vh;
  min-width: 30vh;
  max-width: 30vh;
}

.h-33v {
  height: 33.33vh;
  min-width: 33.33vh;
  max-width: 33.33vh;
}

.h-40v {
  height: 40vh;
  min-width: 40vh;
  max-width: 40vh;
}

.h-50v {
  height: 50vh;
  min-width: 50vh;
  max-width: 50vh;
}

.h-60v {
  height: 60vh;
  min-width: 60vh;
  max-width: 60vh;
}

.h-66v {
  height: 66.66vh;
  min-width: 66.66vh;
  max-width: 66.66vh;
}

.h-70v {
  height: 70vh;
  min-width: 70vh;
  max-width: 70vh;
}

.h-75v {
  height: 75vh;
  min-width: 75vh;
  max-width: 75vh;
}

.h-80v {
  height: 80vh;
  min-width: 80vh;
  max-width: 80vh;
}

.h-90v {
  height: 90vh;
  min-width: 90vh;
  max-width: 90vh;
}

.h-100v {
  height: 100vh;
  min-width: 100vh;
  max-width: 100vh;
}

/* Max Widths (ordered) */
.h-max-20 {
  max-height: 20%;
}

.h-max-25 {
  max-height: 25%;
}

.h-max-33 {
  max-height: 33.33%;
}

.h-max-40 {
  max-height: 40%;
}

.h-max-50 {
  max-height: 50%;
}

.h-max-60 {
  max-height: 60%;
}

.h-max-66 {
  max-height: 66.66%;
}

.h-max-75 {
  max-height: 75%;
}

.h-max-80 {
  max-height: 80%;
}

.h-max-100 {
  max-height: 100%;
}

.h-max-10v {
  max-height: 10vh;
}

.h-max-20v {
  max-height: 20vh;
}

.h-max-25v {
  max-height: 25vh;
}

.h-max-30v {
  max-height: 30vh;
}

.h-max-33v {
  max-height: 33.33vh;
}

.h-max-40v {
  max-height: 40vh;
}

.h-max-50v {
  max-height: 50vh;
}

.h-max-60v {
  max-height: 60vh;
}

.h-max-66v {
  max-height: 66.66vh;
}

.h-max-70v {
  max-height: 70vh;
}

.h-max-75v {
  max-height: 75vh;
}

.h-max-80v {
  max-height: 80vh;
}

.h-max-90v {
  max-height: 90vh;
}

.h-max-100v {
  max-height: 100vh;
}

/* Min Widths (ordered) */
.h-min-20 {
  min-height: 20%;
}

.h-min-25 {
  min-height: 25%;
}

.h-min-33 {
  min-height: 33.33%;
}

.h-min-40 {
  min-height: 40%;
}

.h-min-50 {
  min-height: 50%;
}

.h-min-60 {
  min-height: 60%;
}

.h-min-66 {
  min-height: 66.66%;
}

.h-min-75 {
  min-height: 75%;
}

.h-min-80 {
  min-height: 80%;
}

.h-min-100 {
  min-height: 100%;
}

.h-min-10v {
  min-height: 10vh;
}

.h-min-20v {
  min-height: 20vh;
}

.h-min-25v {
  min-height: 25vh;
}

.h-min-30v {
  min-height: 30vh;
}

.h-min-33v {
  min-height: 33.33vh;
}

.h-min-40v {
  min-height: 40vh;
}

.h-min-50v {
  min-height: 50vh;
}

.h-min-60v {
  min-height: 60vh;
}

.h-min-66v {
  min-height: 66.66vh;
}

.h-min-70v {
  min-height: 70vh;
}

.h-min-75v {
  min-height: 75vh;
}

.h-min-80v {
  min-height: 80vh;
}

.h-min-90v {
  min-height: 90vh;
}

.h-min-100v {
  min-height: 100vh;
}

/* Fixed Widths (px, ordered) */
.h-100px {
  height: 100px;
  min-width: 100px;
  max-width: 100px;
}

.h-200px {
  height: 200px;
  min-width: 200px;
  max-width: 200px;
}

.h-300px {
  height: 300px;
  min-width: 300px;
  max-width: 300px;
}

.h-400px {
  height: 400px;
  min-width: 400px;
  max-width: 400px;
}

.h-500px {
  height: 500px;
  min-width: 500px;
  max-width: 500px;
}

/* #endregion height */
/* #region width */
.w-auto {
  width: auto;
  min-width: auto;
  max-width: auto;
}

.w-min {
  width: min-content;
}

.w-max {
  width: max-content;
}

.w-fit {
  width: fit-content;
}

/* Percentage Widths (ordered from lowest to highest) */
.w-20 {
  width: 20%;
  min-width: 20%;
  max-width: 20%;
}

.w-25 {
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.w-33 {
  width: 33.33%;
  min-width: 33.33%;
  max-width: 33.33%;
}

.w-40 {
  width: 40%;
  min-width: 40%;
  max-width: 40%;
}

.w-50 {
  width: 50%;
  min-width: 50%;
  max-width: 50%;
}

.w-60 {
  width: 60%;
  min-width: 60%;
  max-width: 60%;
}

.w-66 {
  width: 66.66%;
  min-width: 66.66%;
  max-width: 66.66%;
}

.w-75 {
  width: 75%;
  min-width: 75%;
  max-width: 75%;
}

.w-80 {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
}

.w-100 {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* Viewport Widths (extended and ordered) */
.w-10v {
  width: 10vw;
  min-width: 10vw;
  max-width: 10vw;
}

.w-20v {
  width: 20vw;
  min-width: 20vw;
  max-width: 20vw;
}

.w-25v {
  width: 25vw;
  min-width: 25vw;
  max-width: 25vw;
}

.w-30v {
  width: 30vw;
  min-width: 30vw;
  max-width: 30vw;
}

.w-33v {
  width: 33.33vw;
  min-width: 33.33vw;
  max-width: 33.33vw;
}

.w-40v {
  width: 40vw;
  min-width: 40vw;
  max-width: 40vw;
}

.w-50v {
  width: 50vw;
  min-width: 50vw;
  max-width: 50vw;
}

.w-60v {
  width: 60vw;
  min-width: 60vw;
  max-width: 60vw;
}

.w-66v {
  width: 66.66vw;
  min-width: 66.66vw;
  max-width: 66.66vw;
}

.w-70v {
  width: 70vw;
  min-width: 70vw;
  max-width: 70vw;
}

.w-75v {
  width: 75vw;
  min-width: 75vw;
  max-width: 75vw;
}

.w-80v {
  width: 80vw;
  min-width: 80vw;
  max-width: 80vw;
}

.w-90v {
  width: 90vw;
  min-width: 90vw;
  max-width: 90vw;
}

.w-100v {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
}

/* Max Widths (ordered) */
.w-max-20 {
  max-width: 20%;
}

.w-max-25 {
  max-width: 25%;
}

.w-max-33 {
  max-width: 33.33%;
}

.w-max-40 {
  max-width: 40%;
}

.w-max-50 {
  max-width: 50%;
}

.w-max-60 {
  max-width: 60%;
}

.w-max-66 {
  max-width: 66.66%;
}

.w-max-75 {
  max-width: 75%;
}

.w-max-80 {
  max-width: 80%;
}

.w-max-100 {
  max-width: 100%;
}

.w-max-10v {
  max-width: 10vw;
}

.w-max-20v {
  max-width: 20vw;
}

.w-max-25v {
  max-width: 25vw;
}

.w-max-30v {
  max-width: 30vw;
}

.w-max-33v {
  max-width: 33.33vw;
}

.w-max-40v {
  max-width: 40vw;
}

.w-max-50v {
  max-width: 50vw;
}

.w-max-60v {
  max-width: 60vw;
}

.w-max-66v {
  max-width: 66.66vw;
}

.w-max-70v {
  max-width: 70vw;
}

.w-max-75v {
  max-width: 75vw;
}

.w-max-80v {
  max-width: 80vw;
}

.w-max-90v {
  max-width: 90vw;
}

.w-max-100v {
  max-width: 100vw;
}

/* Min Widths (ordered) */
.w-min-20 {
  min-width: 20%;
}

.w-min-25 {
  min-width: 25%;
}

.w-min-33 {
  min-width: 33.33%;
}

.w-min-40 {
  min-width: 40%;
}

.w-min-50 {
  min-width: 50%;
}

.w-min-60 {
  min-width: 60%;
}

.w-min-66 {
  min-width: 66.66%;
}

.w-min-75 {
  min-width: 75%;
}

.w-min-80 {
  min-width: 80%;
}

.w-min-100 {
  min-width: 100%;
}

.w-min-10v {
  min-width: 10vw;
}

.w-min-20v {
  min-width: 20vw;
}

.w-min-25v {
  min-width: 25vw;
}

.w-min-30v {
  min-width: 30vw;
}

.w-min-33v {
  min-width: 33.33vw;
}

.w-min-40v {
  min-width: 40vw;
}

.w-min-50v {
  min-width: 50vw;
}

.w-min-60v {
  min-width: 60vw;
}

.w-min-66v {
  min-width: 66.66vw;
}

.w-min-70v {
  min-width: 70vw;
}

.w-min-75v {
  min-width: 75vw;
}

.w-min-80v {
  min-width: 80vw;
}

.w-min-90v {
  min-width: 90vw;
}

.w-min-100v {
  min-width: 100vw;
}

/* Fixed Widths (px, ordered) */
.w-100px {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

.w-200px {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

.w-300px {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

.w-400px {
  width: 400px;
  min-width: 400px;
  max-width: 400px;
}

.w-500px {
  width: 500px;
  min-width: 500px;
  max-width: 500px;
}

/* #endregion width */
/* #region padding */
/* Default padding using var(--space) */
.pd-b {
  padding-bottom: var(--space);
}

.pd-t {
  padding-top: var(--space);
}

.pd-l {
  padding-left: var(--space);
}

.pd-r {
  padding-right: var(--space);
}

.pd-x {
  padding-right: var(--space);
  padding-left: var(--space);
}

.pd-y {
  padding-top: var(--space);
  padding-bottom: var(--space);
}

.pd {
  padding: var(--space);
}

/* space-2x */
.pd-b-2x {
  padding-bottom: calc(var(--space) * 2);
}

.pd-t-2x {
  padding-top: calc(var(--space) * 2);
}

.pd-l-2x {
  padding-left: calc(var(--space) * 2);
}

.pd-r-2x {
  padding-right: calc(var(--space) * 2);
}

.pd-2x {
  padding: calc(var(--space) * 2);
}

.pd-x-2x {
  padding-left: calc(var(--space) * 2);
  padding-right: calc(var(--space) * 2);
}

.pd-y-2x {
  padding-top: calc(var(--space) * 2);
  padding-bottom: calc(var(--space) * 2);
}

/* space-3x */
.pd-b-3x {
  padding-bottom: calc(var(--space) * 3);
}

.pd-t-3x {
  padding-top: calc(var(--space) * 3);
}

.pd-l-3x {
  padding-left: calc(var(--space) * 3);
}

.pd-r-3x {
  padding-right: calc(var(--space) * 3);
}

.pd-3x {
  padding: calc(var(--space) * 3);
}

.pd-x-3x {
  padding-left: calc(var(--space) * 3);
  padding-right: calc(var(--space) * 3);
}

.pd-y-3x {
  padding-top: calc(var(--space) * 3);
  padding-bottom: calc(var(--space) * 3);
}

/* space-4x */
.pd-b-4x {
  padding-bottom: calc(var(--space) * 4);
}

.pd-t-4x {
  padding-top: calc(var(--space) * 4);
}

.pd-l-4x {
  padding-left: calc(var(--space) * 4);
}

.pd-r-4x {
  padding-right: calc(var(--space) * 4);
}

.pd-4x {
  padding: calc(var(--space) * 4);
}

.pd-x-4x {
  padding-left: calc(var(--space) * 4);
  padding-right: calc(var(--space) * 4);
}

.pd-y-4x {
  padding-top: calc(var(--space) * 4);
  padding-bottom: calc(var(--space) * 4);
}

/* space-5x */
.pd-b-5x {
  padding-bottom: calc(var(--space) * 5);
}

.pd-t-5x {
  padding-top: calc(var(--space) * 5);
}

.pd-l-5x {
  padding-left: calc(var(--space) * 5);
}

.pd-r-5x {
  padding-right: calc(var(--space) * 5);
}

.pd-5x {
  padding: calc(var(--space) * 5);
}

.pd-x-5x {
  padding-left: calc(var(--space) * 5);
  padding-right: calc(var(--space) * 5);
}

.pd-y-5x {
  padding-top: calc(var(--space) * 5);
  padding-bottom: calc(var(--space) * 5);
}

.pd-5x {
  padding-top: calc(var(--space) * 5);
  padding-bottom: calc(var(--space) * 5);
}

/* space-6x */
.pd-b-6x {
  padding-bottom: calc(var(--space) * 6);
}

.pd-t-6x {
  padding-top: calc(var(--space) * 6);
}

.pd-l-6x {
  padding-left: calc(var(--space) * 6);
}

.pd-r-6x {
  padding-right: calc(var(--space) * 6);
}

.pd-6x {
  padding: calc(var(--space) * 6);
}

.pd-x-6x {
  padding-left: calc(var(--space) * 6);
  padding-right: calc(var(--space) * 6);
}

.pd-y-6x {
  padding-top: calc(var(--space) * 6);
  padding-bottom: calc(var(--space) * 6);
}

/* space-7x */
.pd-b-7x {
  padding-bottom: calc(var(--space) *7);
}

.pd-t-7x {
  padding-top: calc(var(--space) * 7);
}

.pd-l-7x {
  padding-left: calc(var(--space) * 7);
}

.pd-r-7x {
  padding-right: calc(var(--space) * 7);
}

.pd-7x {
  padding: calc(var(--space) * 7);
}

.pd-x-7x {
  padding-left: calc(var(--space) * 7);
  padding-right: calc(var(--space) * 7);
}

.pd-y-7x {
  padding-top: calc(var(--space) * 7);
  padding-bottom: calc(var(--space) * 7);
}

/* space-8x */
.pd-b-8x {
  padding-bottom: calc(var(--space) *8);
}

.pd-t-8x {
  padding-top: calc(var(--space) * 8);
}

.pd-l-8x {
  padding-left: calc(var(--space) * 8);
}

.pd-r-8x {
  padding-right: calc(var(--space) * 8);
}

.pd-8x {
  padding: calc(var(--space) * 8);
}

.pd-x-8x {
  padding-left: calc(var(--space) * 8);
  padding-right: calc(var(--space) * 8);
}

.pd-y-8x {
  padding-top: calc(var(--space) * 8);
  padding-bottom: calc(var(--space) * 8);
}

/* space-9x */
.pd-b-9x {
  padding-bottom: calc(var(--space) *9);
}

.pd-t-9x {
  padding-top: calc(var(--space) * 9);
}

.pd-l-9x {
  padding-left: calc(var(--space) * 9);
}

.pd-r-9x {
  padding-right: calc(var(--space) * 9);
}

.pd-9x {
  padding: calc(var(--space) * 9);
}

.pd-x-9x {
  padding-left: calc(var(--space) * 9);
  padding-right: calc(var(--space) * 9);
}

.pd-y-9x {
  padding-top: calc(var(--space) * 9);
  padding-bottom: calc(var(--space) * 9);
}

/* 0 spacing */
.pd-b-0 {
  padding-bottom: 0;
}

.pd-t-0 {
  padding-top: 0;
}

.pd-l-0 {
  padding-left: 0;
}

.pd-r-0 {
  padding-right: 0;
}

.pd-0 {
  padding: 0;
}

/* half-spacing (alternative to 0.5x) */
.pd-b-half {
  padding-bottom: var(--space-half);
}

.pd-t-half {
  padding-top: var(--space-half);
}

.pd-l-half {
  padding-left: var(--space-half);
}

.pd-r-half {
  padding-right: var(--space-half);
}

.pd-half {
  padding: var(--space-half);
}

/* #endregion padding */
/* #region margin */
/* Default margin using var(--space) */
.mg-b {
  margin-bottom: var(--space);
}

.mg-t {
  margin-top: var(--space);
}

.mg-l {
  margin-left: var(--space);
}

.mg-r {
  margin-right: var(--space);
}

.mg {
  margin: var(--space);
}

/* space-2x */
.mg-b-2x {
  margin-bottom: calc(var(--space) * 2);
}

.mg-t-2x {
  margin-top: calc(var(--space) * 2);
}

.mg-l-2x {
  margin-left: calc(var(--space) * 2);
}

.mg-r-2x {
  margin-right: calc(var(--space) * 2);
}

.mg-2x {
  margin: calc(var(--space) * 2);
}

/* space-3x */
.mg-b-3x {
  margin-bottom: calc(var(--space) * 3);
}

.mg-t-3x {
  margin-top: calc(var(--space) * 3);
}

.mg-l-3x {
  margin-left: calc(var(--space) * 3);
}

.mg-r-3x {
  margin-right: calc(var(--space) * 3);
}

.mg-3x {
  margin: calc(var(--space) * 3);
}

/* space-4x */
.mg-b-4x {
  margin-bottom: calc(var(--space) * 4);
}

.mg-t-4x {
  margin-top: calc(var(--space) * 4);
}

.mg-l-4x {
  margin-left: calc(var(--space) * 4);
}

.mg-r-4x {
  margin-right: calc(var(--space) * 4);
}

.mg-4x {
  margin: calc(var(--space) * 4);
}

/* space-5x */
.mg-b-5x {
  margin-bottom: calc(var(--space) * 5);
}

.mg-t-5x {
  margin-top: calc(var(--space) * 5);
}

.mg-l-5x {
  margin-left: calc(var(--space) * 5);
}

.mg-r-5x {
  margin-right: calc(var(--space) * 5);
}

.mg-5x {
  margin: calc(var(--space) * 5);
}

/* space-6x */
.mg-b-6x {
  margin-bottom: calc(var(--space) * 6);
}

.mg-t-6x {
  margin-top: calc(var(--space) * 6);
}

.mg-l-6x {
  margin-left: calc(var(--space) * 6);
}

.mg-r-6x {
  margin-right: calc(var(--space) * 6);
}

.mg-6x {
  margin: calc(var(--space) * 6);
}

/* space-7x */
.mg-b-7x {
  margin-bottom: calc(var(--space) * 7);
}

.mg-t-7x {
  margin-top: calc(var(--space) * 7);
}

.mg-l-7x {
  margin-left: calc(var(--space) * 7);
}

.mg-r-7x {
  margin-right: calc(var(--space) * 7);
}

.mg-7x {
  margin: calc(var(--space) * 7);
}

/* space-8x */
.mg-b-8x {
  margin-bottom: calc(var(--space) * 8);
}

.mg-t-8x {
  margin-top: calc(var(--space) * 8);
}

.mg-l-8x {
  margin-left: calc(var(--space) * 8);
}

.mg-r-8x {
  margin-right: calc(var(--space) * 8);
}

.mg-8x {
  margin: calc(var(--space) * 8);
}

/* space-9x */
.mg-b-9x {
  margin-bottom: calc(var(--space) * 9);
}

.mg-t-9x {
  margin-top: calc(var(--space) * 9);
}

.mg-l-9x {
  margin-left: calc(var(--space) * 9);
}

.mg-r-9x {
  margin-right: calc(var(--space) * 9);
}

.mg-9x {
  margin: calc(var(--space) * 9);
}

/* 0 spacing */
.mg-b-0 {
  margin-bottom: 0;
}

.mg-t-0 {
  margin-top: 0;
}

.mg-l-0 {
  margin-left: 0;
}

.mg-r-0 {
  margin-right: 0;
}

.mg-0 {
  margin: 0;
}

/* half-spacing (alternative to 0.5x) */
.mg-b-half {
  margin-bottom: var(--space-half);
}

.mg-t-half {
  margin-top: var(--space-half);
}

.mg-l-half {
  margin-left: var(--space-half);
}

.mg-r-half {
  margin-right: var(--space-half);
}

.mg-half {
  margin: var(--space-half);
}

/* #endregion margin */
/* #region border */
/* #endregion border */
/* #region border-radius */
/* #endregion border-radius */
/* #endregion box-shadow */
/* #region opacity */
.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-100 {
  opacity: 1;
}

/* #endregion opacity */
/* #region overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

/* Overflow X */
.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Overflow Y */
.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* #endregion overflow */
/* #region position */
.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

/* #endregion position */
/* #region display */
.display-none {
  display: none;
}

.display-block {
  display: block;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

.display-flex {
  display: flex;
}

.display-inline-flex {
  display: inline-flex;
}

.display-grid {
  display: grid;
}

.display-inline-grid {
  display: inline-grid;
}

.display-table {
  display: table;
}

.display-inline-table {
  display: inline-table;
}

.display-list-item {
  display: list-item;
}

/* #endregion display */
/* #region flex */
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.items-normal {
  align-items: normal;
}

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.self-normal {
  align-self: normal;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.content-stretch {
  align-content: stretch;
}

.content-normal {
  align-content: normal;
}

/* #endregion flex */
/* #region grid */
.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-rows-1 {
  grid-template-rows: repeat(1, 1fr);
}

.grid-rows-2 {
  grid-template-rows: repeat(2, 1fr);
}

.grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.grid-rows-4 {
  grid-template-rows: repeat(4, 1fr);
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.row-span-1 {
  grid-row: span 1 / span 1;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-span-3 {
  grid-row: span 3 / span 3;
}

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: start;
}

.items-end {
  align-items: end;
}

.justify-center {
  justify-items: center;
}

/* #endregion grid */
/* #region text */
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

/* #endregion text */
/* #region transform */
/* #endregion transform */
/* #region transition */
/* #endregion transition */
/* 1. Flex Row */
.group-flex-row-x-start-y-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  justify-items: unset;
  align-content: unset;
  justify-self: unset;
  align-self: unset;
  text-align: unset;
  vertical-align: unset;
}

.group-flex-row-x-start-y-center>* {
  display: block;
  align-self: center;
  justify-self: unset;
  text-align: left;
  vertical-align: unset;
}

/* 2. Flex Column */
.group-flex-col-x-start-y-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  justify-items: unset;
  align-content: unset;
  justify-self: unset;
  align-self: unset;
  text-align: unset;
  vertical-align: unset;
}

.group-flex-col-x-start-y-center>* {
  display: block;
  align-self: unset;
  justify-self: unset;
  text-align: left;
  vertical-align: unset;
}

/* 2.group- Grid */
.group-grid-x-start-y-center {
  display: grid;
  justify-content: start;
  align-items: center;
  justify-items: start;
  align-content: unset;
  justify-self: unset;
  align-self: unset;
  text-align: unset;
  vertical-align: unset;
}

.group-grid-x-start-y-center>* {
  display: block;
  justify-self: start;
  align-self: center;
  text-align: left;
  vertical-align: unset;
}

/* 3.group- Block */
.group-block-x-start-y-center {
  display: block;
  text-align: left;
  vertical-align: unset;
  justify-content: unset;
  align-items: unset;
  justify-items: unset;
  align-content: unset;
  justify-self: unset;
  align-self: unset;
}

.group-block-x-start-y-center>* {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  text-align: left;
  align-self: unset;
  justify-self: unset;
}