@layer utility {

/* Display utilities */
.inline { display: inline; }
.inline-block { display: inline-block;}
.block { display: block;}
.flex { display: flex;}
.grid { display: grid;}
.inline-flex { display: inline-flex;}
.inline-grid { display: inline-grid;}
.display-none, .hidden { display: none;}

/* Z-index utilities */
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-auto { z-index: var(--z-auto, auto); }
.isolate      { isolation: isolate; }
.isolate-auto { isolation: auto; }

/* Position utilities */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

.inset { inset: 0; }
.inset-sm { inset: var(--size-sm); }
.inset-md { inset: var(--size-md); }

.left-0 { left: 0; }
.right-0 { right: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }

.left-sm { left: var(--size-sm); }
.right-sm { right: var(--size-sm); }
.top-sm { top: var(--size-sm); }
.bottom-sm { bottom: var(--size-sm); }

.left-md { left: var(--size-md); }
.right-md { right: var(--size-md); }
.top-md { top: var(--size-md); }
.bottom-md { bottom: var(--size-md); }

/* Sizing utilities */
.width-full { width: 100%; }
.height-full { height: 100%; }
.width-viewport { width: 100vw; }
.height-viewport { height: 100vh; }
.width-fit-content { width: fit-content; }
.height-fit-content { height: fit-content; }

.min-height-0 { min-height: 0; }
.min-height-full { min-height: 100%; }
.min-height-viewport { min-height: 100vh; }
.min-height-fit-content { min-height: fit-content; }
.min-width-0 { min-width: 0; }
.min-width-full { min-width: 100%; }
.min-width-viewport { min-width: 100vw; }
.min-width-fit-content { min-width: fit-content; }

.max-height-full { max-height: 100%; }
.max-height-viewport { max-height: 100vh; }
.max-height-fit-content { max-height: fit-content; }
.max-width-full { max-width: 100%; }
.max-width-viewport { max-width: 100vw; }
.max-width-fit-content { max-width: fit-content; }
.max-height-0 { max-height: 0; }
.max-width-0 { max-width: 0; }

.width-0 { width: 0; }
.width-sm { width: var(--size-sm); }
.width-md { width: var(--size-md); }
.width-lg { width: var(--size-lg); }
.width-xl { width: var(--size-xl); }
.width-2xl { width: var(--size-2xl); }
.width-3xl { width: var(--size-3xl); }
.width-4xl { width: var(--size-4xl); }

.height-0 { height: 0; }
.height-sm { height: var(--size-sm); }
.height-md { height: var(--size-md); }
.height-lg { height: var(--size-lg); }
.height-xl { height: var(--size-xl); }
.height-2xl { height: var(--size-2xl); }
.height-3xl { height: var(--size-3xl); }
.height-4xl { height: var(--size-4xl); }

.aspect-1-1, .aspect-square { aspect-ratio: 1 / 1; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-3-4 { aspect-ratio: 3 / 4; }

/* Overflow utilities */
.overscroll-auto { overscroll-behavior: auto; }
.overscroll-contain { overscroll-behavior: contain; }
.overscroll-none { overscroll-behavior: none; }
.overscroll-horizontal-auto { overscroll-behavior-x: auto; }
.overscroll-horizontal-contain { overscroll-behavior-x: contain; }
.overscroll-horizontal-none { overscroll-behavior-x: none; }
.overscroll-vertical-auto { overscroll-behavior-y: auto; }
.overscroll-vertical-contain { overscroll-behavior-y: contain; }
.overscroll-vertical-none { overscroll-behavior-y: none; }

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-horizontal-auto { overflow-x: auto; }
.overflow-vertical-auto { overflow-y: auto; }
.overflow-horizontal-hidden { overflow-x: hidden; }
.overflow-vertical-hidden { overflow-y: hidden; }
.overflow-horizontal-visible { overflow-x: visible; }
.overflow-vertical-visible { overflow-y: visible; }
.overflow-horizontal-scroll { overflow-x: scroll; }
.overflow-vertical-scroll { overflow-y: scroll; }

/* Margin utilities */
.mh-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0; }

.m-xs { margin: var(--size-xs); }
.m-sm { margin: var(--size-sm); }
.m-md { margin: var(--size-md); }
.m-lg { margin: var(--size-lg); }
.m-xl { margin: var(--size-xl); }

.mh-xs { margin-left: var(--size-xs); margin-right: var(--size-xs); }
.mh-sm { margin-left: var(--size-sm); margin-right: var(--size-sm); }
.mh-md { margin-left: var(--size-md); margin-right: var(--size-md); }
.mh-lg { margin-left: var(--size-lg); margin-right: var(--size-lg); }
.mh-xl { margin-left: var(--size-xl); margin-right: var(--size-xl); }

.mv-xs { margin-top: var(--size-xs); margin-bottom: var(--size-xs); }
.mv-sm { margin-top: var(--size-sm); margin-bottom: var(--size-sm); }
.mv-md { margin-top: var(--size-md); margin-bottom: var(--size-md); }
.mv-lg { margin-top: var(--size-lg); margin-bottom: var(--size-lg); }
.mv-xl { margin-top: var(--size-xl); margin-bottom: var(--size-xl); }

.mt-xs { margin-top: var(--size-xs); }
.mt-sm { margin-top: var(--size-sm); }
.mt-md { margin-top: var(--size-md); }
.mt-lg { margin-top: var(--size-lg); }
.mt-xl { margin-top: var(--size-xl); }

.mr-xs { margin-right: var(--size-xs); }
.mr-sm { margin-right: var(--size-sm); }
.mr-md { margin-right: var(--size-md); }
.mr-lg { margin-right: var(--size-lg); }
.mr-xl { margin-right: var(--size-xl); }

.mb-xs { margin-bottom: var(--size-xs); }
.mb-sm { margin-bottom: var(--size-sm); }
.mb-md { margin-bottom: var(--size-md); }
.mb-lg { margin-bottom: var(--size-lg); }
.mb-xl { margin-bottom: var(--size-xl); }

.ml-xs { margin-left: var(--size-xs); }
.ml-sm { margin-left: var(--size-sm); }
.ml-md { margin-left: var(--size-md); }
.ml-lg { margin-left: var(--size-lg); }
.ml-xl { margin-left: var(--size-xl); }

/* Padding utilities */
.p-0 { padding: 0; }

.p-xs { padding: var(--size-xs); }
.p-sm { padding: var(--size-sm); }
.p-md { padding: var(--size-md); }
.p-lg { padding: var(--size-lg); }
.p-xl { padding: var(--size-xl); }

.ph-xs { padding-left: var(--size-xs); padding-right: var(--size-xs); }
.ph-sm { padding-left: var(--size-sm); padding-right: var(--size-sm); }
.ph-md { padding-left: var(--size-md); padding-right: var(--size-md); }
.ph-lg { padding-left: var(--size-lg); padding-right: var(--size-lg); }
.ph-xl { padding-left: var(--size-xl); padding-right: var(--size-xl); }

.pv-xs { padding-top: var(--size-xs); padding-bottom: var(--size-xs); }
.pv-sm { padding-top: var(--size-sm); padding-bottom: var(--size-sm); }
.pv-md { padding-top: var(--size-md); padding-bottom: var(--size-md); }
.pv-lg { padding-top: var(--size-lg); padding-bottom: var(--size-lg); }
.pv-xl { padding-top: var(--size-xl); padding-bottom: var(--size-xl); }

.pt-xs { padding-top: var(--size-xs); }
.pt-sm { padding-top: var(--size-sm); }
.pt-md { padding-top: var(--size-md); }
.pt-lg { padding-top: var(--size-lg); }
.pt-xl { padding-top: var(--size-xl); }

.pr-xs { padding-right: var(--size-xs); }
.pr-sm { padding-right: var(--size-sm); }
.pr-md { padding-right: var(--size-md); }
.pr-lg { padding-right: var(--size-lg); }
.pr-xl { padding-right: var(--size-xl); }

.pb-xs { padding-bottom: var(--size-xs); }
.pb-sm { padding-bottom: var(--size-sm); }
.pb-md { padding-bottom: var(--size-md); }
.pb-lg { padding-bottom: var(--size-lg); }
.pb-xl { padding-bottom: var(--size-xl); }

.pl-xs { padding-left: var(--size-xs); }
.pl-sm { padding-left: var(--size-sm); }
.pl-md { padding-left: var(--size-md); }
.pl-lg { padding-left: var(--size-lg); }
.pl-xl { padding-left: var(--size-xl); }

/* Flexbox utilities */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

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

.flex-grow, .flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-shrink { flex-shrink: 1; }
.flex-no-grow { flex-grow: 0; }
.flex-no-shrink { flex-shrink: 0; }

/* justify-content (flex and grid containers) */
.justify-content-center, .justify-center { justify-content: center; }
.justify-content-start, .justify-start { justify-content: flex-start; }
.justify-content-end, .justify-end { justify-content: flex-end; }
.justify-content-between, .justify-between { justify-content: space-between; }
.justify-content-around, .justify-around { justify-content: space-around; }
.justify-content-evenly, .justify-evenly { justify-content: space-evenly; }

/* justify-items (primarily grid containers) */
.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-center { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

/* align-content (flex and grid containers, cross-axis) */
.align-content-center { align-content: center; }
.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end; }
.align-content-between{ align-content: space-between; }
.align-content-around { align-content: space-around; }
.align-content-stretch { align-content: stretch; }

/* align-items (flex and grid containers) */
.align-items-center, .align-center { align-items: center; }
.align-items-start, .align-start { align-items: flex-start; }
.align-items-end, .align-end { align-items: flex-end; }
.align-items-stretch, .align-stretch { align-items: stretch; }
.align-items-baseline, .align-baseline { align-items: baseline; }

/* justify-self (individual grid items) */
.justify-self-auto { justify-self: auto; }
.justify-self-start { justify-self: start; }
.justify-self-end { justify-self: end; }
.justify-self-center { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }

/* align-self (individual flex or grid items) */
.align-self-auto { align-self: auto; }
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch; }

.gap-0 { gap: 0; }
.gap-xs { gap: var(--size-xs); }
.gap-sm { gap: var(--size-sm); }
.gap-md { gap: var(--size-md); }
.gap-lg { gap: var(--size-lg); }

/* Grid utilities */
.container { container-type: inline-size; box-sizing: border-box; }

.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-cols-auto-fit {
  --grid-items-min-width: 300px;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-items-min-width), 1fr));
}

.grid-cols-auto-fill {
  --grid-items-min-width: 300px;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-items-min-width), 1fr));
}

.grid-items-min-w-3xs { --grid-items-min-width: var(--size-3xs); }
.grid-items-min-w-2xs { --grid-items-min-width: var(--size-2xs); }
.grid-items-min-w-xs  { --grid-items-min-width: var(--size-xs); }
.grid-items-min-w-sm  { --grid-items-min-width: var(--size-sm); }
.grid-items-min-w-md  { --grid-items-min-width: var(--size-md); }
.grid-items-min-w-lg  { --grid-items-min-width: var(--size-lg); }
.grid-items-min-w-xl  { --grid-items-min-width: var(--size-xl); }
.grid-items-min-w-2xl { --grid-items-min-width: var(--size-2xl); }
.grid-items-min-w-3xl { --grid-items-min-width: var(--size-3xl); }
.grid-items-min-w-4xl { --grid-items-min-width: var(--size-4xl); }

.rows-1 { grid-template-rows: repeat(1, minmax(0, auto)); }
.rows-2 { grid-template-rows: repeat(2, minmax(0, auto)); }
.rows-3 { grid-template-rows: repeat(3, minmax(0, auto)); }
.rows-4 { grid-template-rows: repeat(4, minmax(0, auto)); }
.rows-5 { grid-template-rows: repeat(5, minmax(0, auto)); }
.rows-6 { grid-template-rows: repeat(6, minmax(0, auto)); }
.rows-7 { grid-template-rows: repeat(7, minmax(0, auto)); }
.rows-8 { grid-template-rows: repeat(8, minmax(0, auto)); }
.rows-9 { grid-template-rows: repeat(9, minmax(0, auto)); }
.rows-10 { grid-template-rows: repeat(10, minmax(0, auto)); }
.rows-11 { grid-template-rows: repeat(11, minmax(0, auto)); }
.rows-12 { grid-template-rows: repeat(12, minmax(0, auto)); }

.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-min  { grid-auto-rows: min-content; }
.auto-rows-max  { grid-auto-rows: max-content; }
.auto-rows-fr   { grid-auto-rows: minmax(0, 1fr); }
.auto-rows-3xs { grid-auto-rows: var(--size-3xs); }
.auto-rows-2xs { grid-auto-rows: var(--size-2xs); }
.auto-rows-xs  { grid-auto-rows: var(--size-xs); }
.auto-rows-sm  { grid-auto-rows: var(--size-sm); }
.auto-rows-md  { grid-auto-rows: var(--size-md); }
.auto-rows-lg  { grid-auto-rows: var(--size-lg); }
.auto-rows-xl  { grid-auto-rows: var(--size-xl); }
.auto-rows-2xl { grid-auto-rows: var(--size-2xl); }
.auto-rows-3xl { grid-auto-rows: var(--size-3xl); }
.auto-rows-4xl { grid-auto-rows: var(--size-4xl); }

.cs-1 { grid-column-start: 1; } .ce-1 { grid-column-end: 2; } .c-1 { grid-column: 1 / 2; }
.cs-2 { grid-column-start: 2; } .ce-2 { grid-column-end: 3; } .c-2 { grid-column: 2 / 3; }
.cs-3 { grid-column-start: 3; } .ce-3 { grid-column-end: 4; } .c-3 { grid-column: 3 / 4; }
.cs-4 { grid-column-start: 4; } .ce-4 { grid-column-end: 5; } .c-4 { grid-column: 4 / 5; }
.cs-5 { grid-column-start: 5; } .ce-5 { grid-column-end: 6; } .c-5 { grid-column: 5 / 6; }
.cs-6 { grid-column-start: 6; } .ce-6 { grid-column-end: 7; } .c-6 { grid-column: 6 / 7; }
.cs-7 { grid-column-start: 7; } .ce-7 { grid-column-end: 8; } .c-7 { grid-column: 7 / 8; }
.cs-8 { grid-column-start: 8; } .ce-8 { grid-column-end: 9; } .c-8 { grid-column: 8 / 9; }
.cs-9 { grid-column-start: 9; } .ce-9 { grid-column-end: 10; } .c-9 { grid-column: 9 / 10; }
.cs-10 { grid-column-start: 10; } .ce-10 { grid-column-end: 11; } .c-10 { grid-column: 10 / 11; }
.cs-11 { grid-column-start: 11; } .ce-11 { grid-column-end: 12; } .c-11 { grid-column: 11 / 12; }
.cs-12 { grid-column-start: 12; } .ce-12 { grid-column-end: 13; } .c-12 { grid-column: 12 / 13; }
.cs-13 { grid-column-start: 13; } .ce-13 { grid-column-end: 14; }
.cs-auto { grid-column-start: auto; } .ce-auto { grid-column-end: auto; } .c-auto { grid-column: auto; }

.rs-1 { grid-row-start: 1; } .re-1 { grid-row-end: 2; } .r-1 { grid-row: 1 / 2; }
.rs-2 { grid-row-start: 2; } .re-2 { grid-row-end: 3; } .r-2 { grid-row: 2 / 3; }
.rs-3 { grid-row-start: 3; } .re-3 { grid-row-end: 4; } .r-3 { grid-row: 3 / 4; }
.rs-4 { grid-row-start: 4; } .re-4 { grid-row-end: 5; } .r-4 { grid-row: 4 / 5; }
.rs-5 { grid-row-start: 5; } .re-5 { grid-row-end: 6; } .r-5 { grid-row: 5 / 6; }
.rs-6 { grid-row-start: 6; } .re-6 { grid-row-end: 7; } .r-6 { grid-row: 6 / 7; }
.rs-7 { grid-row-start: 7; } .re-7 { grid-row-end: 8; } .r-7 { grid-row: 7 / 8; }
.rs-8 { grid-row-start: 8; } .re-8 { grid-row-end: 9; } .r-8 { grid-row: 8 / 9; }
.rs-9 { grid-row-start: 9; } .re-9 { grid-row-end: 10; } .r-9 { grid-row: 9 / 10; }
.rs-10 { grid-row-start: 10; } .re-10 { grid-row-end: 11; } .r-10 { grid-row: 10 / 11; }
.rs-11 { grid-row-start: 11; } .re-11 { grid-row-end: 12; } .r-11 { grid-row: 11 / 12; }
.rs-12 { grid-row-start: 12; } .re-12 { grid-row-end: 13; } .r-12 { grid-row: 12 / 13; }
.rs-13 { grid-row-start: 13; } .re-13 { grid-row-end: 14; }
.rs-auto { grid-row-start: auto; } .re-auto { grid-row-end: auto; } .r-auto { grid-row: auto; }

.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; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

.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; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }
.row-span-7 { grid-row: span 7 / span 7; }
.row-span-8 { grid-row: span 8 / span 8; }
.row-span-9 { grid-row: span 9 / span 9; }
.row-span-10 { grid-row: span 10 / span 10; }
.row-span-11 { grid-row: span 11 / span 11; }
.row-span-12 { grid-row: span 12 / span 12; }
.row-span-full { grid-row: 1 / -1; }

.wrapper-max-width {
  /* often paired with .mh-auto */
    --wrapper-max-width: 1600px;
    max-width: var(--wrapper-max-width); 
}

/* Object fit utilities */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-center { object-position: center; }
.object-top { object-position: top center; }
.object-bottom { object-position: bottom center; }
.object-left { object-position: center left; }
.object-right { object-position: center right; }
.object-top-left { object-position: top left; }
.object-top-right { object-position: top right; }
.object-bottom-left { object-position: bottom left; }
.object-bottom-right { object-position: bottom right; }

/* Background utilities */
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-center { background-position: center; }
.bg-top { background-position: top center; }
.bg-bottom { background-position: bottom center; }
.bg-left { background-position: center left; }
.bg-right { background-position: center right; }
.bg-top-left { background-position: top left; }
.bg-top-right { background-position: top right; }
.bg-bottom-left { background-position: bottom left; }
.bg-bottom-right { background-position: bottom right; }
.bg-no-repeat { background-repeat: no-repeat; }
.bg-fixed { background-attachment: fixed; }
.bg-clip-text { background-clip: text; -webkit-background-clip: text; }

/* Base background colors */
.bg-base-50 { background-color: var(--base-50); }
.bg-base-100 { background-color: var(--base-100); }
.bg-base-200 { background-color: var(--base-200); }
.bg-base-300 { background-color: var(--base-300); }
.bg-base-400 { background-color: var(--base-400); }
.bg-base-500 { background-color: var(--base-500); }
.bg-base-600 { background-color: var(--base-600); }
.bg-base-700 { background-color: var(--base-700); }
.bg-base-800 { background-color: var(--base-800); }
.bg-base-900 { background-color: var(--base-900); }

/* Dark mode base background colors */
.dark .dark\:bg-base-50 { background-color: var(--base-50); }
.dark .dark\:bg-base-100 { background-color: var(--base-100); }
.dark .dark\:bg-base-200 { background-color: var(--base-200); }
.dark .dark\:bg-base-300 { background-color: var(--base-300); }
.dark .dark\:bg-base-400 { background-color: var(--base-400); }
.dark .dark\:bg-base-500 { background-color: var(--base-500); }
.dark .dark\:bg-base-600 { background-color: var(--base-600); }
.dark .dark\:bg-base-700 { background-color: var(--base-700); }
.dark .dark\:bg-base-800 { background-color: var(--base-800); }
.dark .dark\:bg-base-900 { background-color: var(--base-900); }

/* Invertible background colors */
.i-bg-base-floor { background-color: var(--i-bg-base-floor); }
.i-bg-base-low { background-color: var(--i-bg-base-low); }
.i-bg-base-medium { background-color: var(--i-bg-base-medium); }
.i-bg-base-high { background-color: var(--i-bg-base-high); }
.i-bg-base-floating { background-color: var(--i-bg-base-floating); }

.i-bg-white { background-color: var(--i-bg-white); }
.i-bg-black { background-color: var(--i-bg-black); }

.bg-white { background-color: rgba(255, 255, 255, var(--bg-alpha, 1)); }
.bg-black { background-color: rgba(0, 0, 0, var(--bg-alpha, 1)); }
.bg-transparent { background-color: transparent; }

/* Background Color Utilities */

/* Red backgrounds */
.bg-red-100 { background-color: var(--red-100); }
.bg-red-300 { background-color: var(--red-300); }
.bg-red-500 { background-color: var(--red-500); }
.bg-red-700 { background-color: var(--red-700); }
.bg-red-900 { background-color: var(--red-900); }

/* Orange backgrounds */
.bg-orange-100 { background-color: var(--orange-100); }
.bg-orange-300 { background-color: var(--orange-300); }
.bg-orange-500 { background-color: var(--orange-500); }
.bg-orange-700 { background-color: var(--orange-700); }
.bg-orange-900 { background-color: var(--orange-900); }

/* Yellow backgrounds */
.bg-yellow-100 { background-color: var(--yellow-100); }
.bg-yellow-300 { background-color: var(--yellow-300); }
.bg-yellow-500 { background-color: var(--yellow-500); }
.bg-yellow-700 { background-color: var(--yellow-700); }
.bg-yellow-900 { background-color: var(--yellow-900); }

/* Green backgrounds */
.bg-green-100 { background-color: var(--green-100); }
.bg-green-300 { background-color: var(--green-300); }
.bg-green-500 { background-color: var(--green-500); }
.bg-green-700 { background-color: var(--green-700); }
.bg-green-900 { background-color: var(--green-900); }

/* Blue backgrounds */
.bg-blue-100 { background-color: var(--blue-100); }
.bg-blue-300 { background-color: var(--blue-300); }
.bg-blue-500 { background-color: var(--blue-500); }
.bg-blue-700 { background-color: var(--blue-700); }
.bg-blue-900 { background-color: var(--blue-900); }

/* Purple backgrounds */
.bg-purple-100 { background-color: var(--purple-100); }
.bg-purple-300 { background-color: var(--purple-300); }
.bg-purple-500 { background-color: var(--purple-500); }
.bg-purple-700 { background-color: var(--purple-700); }
.bg-purple-900 { background-color: var(--purple-900); }

/* Dark mode variants */
.dark .dark\:bg-red-100 { background-color: var(--red-100); }
.dark .dark\:bg-red-300 { background-color: var(--red-300); }
.dark .dark\:bg-red-500 { background-color: var(--red-500); }
.dark .dark\:bg-red-700 { background-color: var(--red-700); }
.dark .dark\:bg-red-900 { background-color: var(--red-900); }

.dark .dark\:bg-orange-100 { background-color: var(--orange-100); }
.dark .dark\:bg-orange-300 { background-color: var(--orange-300); }
.dark .dark\:bg-orange-500 { background-color: var(--orange-500); }
.dark .dark\:bg-orange-700 { background-color: var(--orange-700); }
.dark .dark\:bg-orange-900 { background-color: var(--orange-900); }

.dark .dark\:bg-yellow-100 { background-color: var(--yellow-100); }
.dark .dark\:bg-yellow-300 { background-color: var(--yellow-300); }
.dark .dark\:bg-yellow-500 { background-color: var(--yellow-500); }
.dark .dark\:bg-yellow-700 { background-color: var(--yellow-700); }
.dark .dark\:bg-yellow-900 { background-color: var(--yellow-900); }

.dark .dark\:bg-green-100 { background-color: var(--green-100); }
.dark .dark\:bg-green-300 { background-color: var(--green-300); }
.dark .dark\:bg-green-500 { background-color: var(--green-500); }
.dark .dark\:bg-green-700 { background-color: var(--green-700); }
.dark .dark\:bg-green-900 { background-color: var(--green-900); }

.dark .dark\:bg-blue-100 { background-color: var(--blue-100); }
.dark .dark\:bg-blue-300 { background-color: var(--blue-300); }
.dark .dark\:bg-blue-500 { background-color: var(--blue-500); }
.dark .dark\:bg-blue-700 { background-color: var(--blue-700); }
.dark .dark\:bg-blue-900 { background-color: var(--blue-900); }

.dark .dark\:bg-purple-100 { background-color: var(--purple-100); }
.dark .dark\:bg-purple-300 { background-color: var(--purple-300); }
.dark .dark\:bg-purple-500 { background-color: var(--purple-500); }
.dark .dark\:bg-purple-700 { background-color: var(--purple-700); }
.dark .dark\:bg-purple-900 { background-color: var(--purple-900); }

/* Border utilities */
.border-all, .border { border: 1px solid var(--i-line-base-medium); }
.border-none { border: none; }
.border-top { border-top: 1px solid var(--i-line-base-medium); }
.border-right { border-right: 1px solid var(--i-line-base-medium); }
.border-bottom { border-bottom: 1px solid var(--i-line-base-medium); }
.border-left { border-left: 1px solid var(--i-line-base-medium); }

.border-xs { border-width: 0.5px; }
.border-sm { border-width: 1px; }
.border-md { border-width: 2px; }
.border-lg { border-width: 4px; }

.i-border-subtle { border-color: var(--i-line-base-subtle); }
.i-border-medium { border-color: var(--i-line-base-medium); }
.i-border-strong { border-color: var(--i-line-base-strong); }

/* Border Color Utilities */

/* Red borders */
.border-red-100 { border-color: var(--red-100); }
.border-red-300 { border-color: var(--red-300); }
.border-red-500 { border-color: var(--red-500); }
.border-red-700 { border-color: var(--red-700); }
.border-red-900 { border-color: var(--red-900); }

/* Orange borders */
.border-orange-100 { border-color: var(--orange-100); }
.border-orange-300 { border-color: var(--orange-300); }
.border-orange-500 { border-color: var(--orange-500); }
.border-orange-700 { border-color: var(--orange-700); }
.border-orange-900 { border-color: var(--orange-900); }

/* Yellow borders */
.border-yellow-100 { border-color: var(--yellow-100); }
.border-yellow-300 { border-color: var(--yellow-300); }
.border-yellow-500 { border-color: var(--yellow-500); }
.border-yellow-700 { border-color: var(--yellow-700); }
.border-yellow-900 { border-color: var(--yellow-900); }

/* Green borders */
.border-green-100 { border-color: var(--green-100); }
.border-green-300 { border-color: var(--green-300); }
.border-green-500 { border-color: var(--green-500); }
.border-green-700 { border-color: var(--green-700); }
.border-green-900 { border-color: var(--green-900); }

/* Blue borders */
.border-blue-100 { border-color: var(--blue-100); }
.border-blue-300 { border-color: var(--blue-300); }
.border-blue-500 { border-color: var(--blue-500); }
.border-blue-700 { border-color: var(--blue-700); }
.border-blue-900 { border-color: var(--blue-900); }

/* Purple borders */
.border-purple-100 { border-color: var(--purple-100); }
.border-purple-300 { border-color: var(--purple-300); }
.border-purple-500 { border-color: var(--purple-500); }
.border-purple-700 { border-color: var(--purple-700); }
.border-purple-900 { border-color: var(--purple-900); }

/* Dark mode variants */
.dark .dark\:border-red-100 { border-color: var(--red-100); }
.dark .dark\:border-red-300 { border-color: var(--red-300); }
.dark .dark\:border-red-500 { border-color: var(--red-500); }
.dark .dark\:border-red-700 { border-color: var(--red-700); }
.dark .dark\:border-red-900 { border-color: var(--red-900); }

.dark .dark\:border-orange-100 { border-color: var(--orange-100); }
.dark .dark\:border-orange-300 { border-color: var(--orange-300); }
.dark .dark\:border-orange-500 { border-color: var(--orange-500); }
.dark .dark\:border-orange-700 { border-color: var(--orange-700); }
.dark .dark\:border-orange-900 { border-color: var(--orange-900); }

.dark .dark\:border-yellow-100 { border-color: var(--yellow-100); }
.dark .dark\:border-yellow-300 { border-color: var(--yellow-300); }
.dark .dark\:border-yellow-500 { border-color: var(--yellow-500); }
.dark .dark\:border-yellow-700 { border-color: var(--yellow-700); }
.dark .dark\:border-yellow-900 { border-color: var(--yellow-900); }

.dark .dark\:border-green-100 { border-color: var(--green-100); }
.dark .dark\:border-green-300 { border-color: var(--green-300); }
.dark .dark\:border-green-500 { border-color: var(--green-500); }
.dark .dark\:border-green-700 { border-color: var(--green-700); }
.dark .dark\:border-green-900 { border-color: var(--green-900); }

.dark .dark\:border-blue-100 { border-color: var(--blue-100); }
.dark .dark\:border-blue-300 { border-color: var(--blue-300); }
.dark .dark\:border-blue-500 { border-color: var(--blue-500); }
.dark .dark\:border-blue-700 { border-color: var(--blue-700); }
.dark .dark\:border-blue-900 { border-color: var(--blue-900); }

.dark .dark\:border-purple-100 { border-color: var(--purple-100); }
.dark .dark\:border-purple-300 { border-color: var(--purple-300); }
.dark .dark\:border-purple-500 { border-color: var(--purple-500); }
.dark .dark\:border-purple-700 { border-color: var(--purple-700); }
.dark .dark\:border-purple-900 { border-color: var(--purple-900); }

.rounded-none, .rounded-0 {border-radius: 0;}
.rounded-sm {border-radius: var(--rounding-sm, 5px);}
.rounded-md {border-radius: var(--rounding-md, 10px);}
.rounded-lg {border-radius: var(--rounding-lg, 20px);}
.rounded-xl {border-radius: var(--rounding-xl, 40px);}

.rounded-full { border-radius: 50%; }
.pill { border-radius: 9999px; }

/* Shadow utilities */
.shadow-none {box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 2px 0 hsla(var(--shadow-color-hue), var(--shadow-color-saturation), var(--shadow-color-lightness), var(--shadow-opacity)); }
.shadow-md { box-shadow: 0 4px 6px 0 hsla(var(--shadow-color-hue), var(--shadow-color-saturation), var(--shadow-color-lightness), var(--shadow-opacity)); }
.shadow-lg { box-shadow: 0 10px 15px 0 hsla(var(--shadow-color-hue), var(--shadow-color-saturation), var(--shadow-color-lightness), var(--shadow-opacity)); }
.shadow-xl { box-shadow: 0 20px 25px 0 hsla(var(--shadow-color-hue), var(--shadow-color-saturation), var(--shadow-color-lightness), var(--shadow-opacity)); }
.shadow-2xl { box-shadow: 0 25px 50px 0 hsla(var(--shadow-color-hue), var(--shadow-color-saturation), var(--shadow-color-lightness), var(--shadow-opacity)); }
.shadow-3xl { box-shadow: 0 35px 60px 0 hsla(var(--shadow-color-hue), var(--shadow-color-saturation), var(--shadow-color-lightness), var(--shadow-opacity)); }

/* default to no shadows in dark mode */
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl,
.dark .shadow-3xl {
  box-shadow: none;
}

/* Opacity utilities */
.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;}

.bg-opacity-0 {--bg-alpha: 0;} 
.bg-opacity-10 {--bg-alpha: 0.1;} 
.bg-opacity-20 {--bg-alpha: 0.2;} 
.bg-opacity-30 {--bg-alpha: 0.3;} 
.bg-opacity-40 {--bg-alpha: 0.4;} 
.bg-opacity-50 {--bg-alpha: 0.5;} 
.bg-opacity-60 {--bg-alpha: 0.6;} 
.bg-opacity-70 {--bg-alpha: 0.7;} 
.bg-opacity-80 {--bg-alpha: 0.8;} 
.bg-opacity-90 {--bg-alpha: 0.9;} 
.bg-opacity-100 {--bg-alpha: 1;}

.bg-blur-soft { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bg-blur-heavy { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }

.transition-all { transition: all 0.2s ease-in-out; }

/* Text utilities */
.text-size-xs { font-size: var(--text-size-xs); }
.text-size-sm { font-size: var(--text-size-sm); }
.text-size-md { font-size: var(--text-size-md); }
.text-size-lg { font-size: var(--text-size-lg); }
.text-size-xl { font-size: var(--text-size-xl); }
.text-size-2xl { font-size: var(--text-size-2xl); }
.text-size-3xl { font-size: var(--text-size-3xl); }
.text-size-4xl { font-size: var(--text-size-4xl); }

.text-base-50 { color: var(--base-50); }
.text-base-100 { color: var(--base-100); }
.text-base-200 { color: var(--base-200); }
.text-base-300 { color: var(--base-300); }
.text-base-400 { color: var(--base-400); }
.text-base-500 { color: var(--base-500); }
.text-base-600 { color: var(--base-600); }
.text-base-700 { color: var(--base-700); }
.text-base-800 { color: var(--base-800); }
.text-base-900 { color: var(--base-900); }

.dark .dark\:text-base-50 { color: var(--base-50); }
.dark .dark\:text-base-100 { color: var(--base-100); }
.dark .dark\:text-base-200 { color: var(--base-200); }
.dark .dark\:text-base-300 { color: var(--base-300); }
.dark .dark\:text-base-400 { color: var(--base-400); }
.dark .dark\:text-base-500 { color: var(--base-500); }
.dark .dark\:text-base-600 { color: var(--base-600); }
.dark .dark\:text-base-700 { color: var(--base-700); }
.dark .dark\:text-base-800 { color: var(--base-800); }
.dark .dark\:text-base-900 { color: var(--base-900); }

.i-text-base-primary { color: var(--i-text-base-primary); }
.i-text-base-secondary { color: var(--i-text-base-secondary); }
.i-text-base-tertiary { color: var(--i-text-base-tertiary); }

.text-white { color: hsla(214, 0%, 100%, 1); }
.text-black { color: hsla(214, 0%, 0%, 1); }
/* Text Color Utilities */

/* Red text */
.text-red-100 { color: var(--red-100); }
.text-red-300 { color: var(--red-300); }
.text-red-500 { color: var(--red-500); }
.text-red-700 { color: var(--red-700); }
.text-red-900 { color: var(--red-900); }

/* Orange text */
.text-orange-100 { color: var(--orange-100); }
.text-orange-300 { color: var(--orange-300); }
.text-orange-500 { color: var(--orange-500); }
.text-orange-700 { color: var(--orange-700); }
.text-orange-900 { color: var(--orange-900); }

/* Yellow text */
.text-yellow-100 { color: var(--yellow-100); }
.text-yellow-300 { color: var(--yellow-300); }
.text-yellow-500 { color: var(--yellow-500); }
.text-yellow-700 { color: var(--yellow-700); }
.text-yellow-900 { color: var(--yellow-900); }

/* Green text */
.text-green-100 { color: var(--green-100); }
.text-green-300 { color: var(--green-300); }
.text-green-500 { color: var(--green-500); }
.text-green-700 { color: var(--green-700); }
.text-green-900 { color: var(--green-900); }

/* Blue text */
.text-blue-100 { color: var(--blue-100); }
.text-blue-300 { color: var(--blue-300); }
.text-blue-500 { color: var(--blue-500); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-900 { color: var(--blue-900); }

/* Purple text */
.text-purple-100 { color: var(--purple-100); }
.text-purple-300 { color: var(--purple-300); }
.text-purple-500 { color: var(--purple-500); }
.text-purple-700 { color: var(--purple-700); }
.text-purple-900 { color: var(--purple-900); }

/* Dark mode variants */
.dark .dark\:text-red-100 { color: var(--red-100); }
.dark .dark\:text-red-300 { color: var(--red-300); }
.dark .dark\:text-red-500 { color: var(--red-500); }
.dark .dark\:text-red-700 { color: var(--red-700); }
.dark .dark\:text-red-900 { color: var(--red-900); }

.dark .dark\:text-orange-100 { color: var(--orange-100); }
.dark .dark\:text-orange-300 { color: var(--orange-300); }
.dark .dark\:text-orange-500 { color: var(--orange-500); }
.dark .dark\:text-orange-700 { color: var(--orange-700); }
.dark .dark\:text-orange-900 { color: var(--orange-900); }

.dark .dark\:text-yellow-100 { color: var(--yellow-100); }
.dark .dark\:text-yellow-300 { color: var(--yellow-300); }
.dark .dark\:text-yellow-500 { color: var(--yellow-500); }
.dark .dark\:text-yellow-700 { color: var(--yellow-700); }
.dark .dark\:text-yellow-900 { color: var(--yellow-900); }

.dark .dark\:text-green-100 { color: var(--green-100); }
.dark .dark\:text-green-300 { color: var(--green-300); }
.dark .dark\:text-green-500 { color: var(--green-500); }
.dark .dark\:text-green-700 { color: var(--green-700); }
.dark .dark\:text-green-900 { color: var(--green-900); }

.dark .dark\:text-blue-100 { color: var(--blue-100); }
.dark .dark\:text-blue-300 { color: var(--blue-300); }
.dark .dark\:text-blue-500 { color: var(--blue-500); }
.dark .dark\:text-blue-700 { color: var(--blue-700); }
.dark .dark\:text-blue-900 { color: var(--blue-900); }

.dark .dark\:text-purple-100 { color: var(--purple-100); }
.dark .dark\:text-purple-300 { color: var(--purple-300); }
.dark .dark\:text-purple-500 { color: var(--purple-500); }
.dark .dark\:text-purple-700 { color: var(--purple-700); }
.dark .dark\:text-purple-900 { color: var(--purple-900); }

.text-weight-thin, .text-weight-100 { font-weight: 100; }
.text-weight-extralight, .text-weight-200 { font-weight: 200; }
.text-weight-light, .text-weight-300 { font-weight: 300; }
.text-weight-normal, .text-weight-400 { font-weight: 400; }
.text-weight-medium, .text-weight-500 { font-weight: 500; }
.text-weight-semibold, .text-weight-600 { font-weight: 600; }
.text-weight-bold, .text-weight-700{ font-weight: 700; }
.text-weight-extrabold, .text-weight-800 { font-weight: 800; }
.text-weight-black, .text-weight-900 { font-weight: 900; }

.text-align-center, .text-center { text-align: center; }
.text-align-left, .text-left { text-align: left; }
.text-align-right, .text-right { text-align: right; }
.text-align-justify, .text-justify { text-align: justify; }

.text-uppercase, .uppercase { text-transform: uppercase; }
.text-lowercase, .lowercase { text-transform: lowercase; }
.text-capitalize, .capitalize { text-transform: capitalize; }

.letter-spacing-normal { letter-spacing: 0em; }
.letter-spacing-wide { letter-spacing: 0.025em; }
.letter-spacing-wider { letter-spacing: 0.05em; }
.letter-spacing-tight { letter-spacing: -0.025em; }
.letter-spacing-tighter { letter-spacing: -0.05em; }

.line-height-0 { line-height: 0; }
.line-height-1 { line-height: 1; }
.line-height-tight { line-height: 1.2; } 
.line-height-tighter { line-height: 1.1; } 
.line-height-loose { line-height: 1.6; } 
.line-height-looser { line-height: 1.8; } 

.text-whitespace-nowrap { white-space: nowrap; }
.text-whitespace-normal { white-space: normal; }
.text-whitespace-pre { white-space: pre; }
.text-whitespace-pre-line { white-space: pre-line; }
.text-whitespace-pre-wrap { white-space: pre-wrap; }
.text-overflow-ellipsis { text-overflow: ellipsis; }
.text-overflow-clip { text-overflow: clip; }
.text-truncate, .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-decoration-none { text-decoration: none; }
.text-decoration-underline, .underline { text-decoration: underline; }
.text-decoration-line-through, .line-through { text-decoration: line-through; }

/* Button utilities */
.button-reset{ 
    all:unset; 
    display:inline-flex; 
    align-items:center; 
    cursor:pointer; 
}

.inputs-full-width :where(
    /* <input> types that behave like text boxes */
    input:not(
      [type="radio"],
      [type="checkbox"],
      [type="range"],
      [type="color"],
      [type="file"],
      [type="image"],
      [type="button"],
      [type="submit"],
      [type="reset"]
    ),
    /* native multi‑line and choice fields */
    textarea,
    select
  ) {
    display: block;     /* ensures the 100 % width actually applies */
    width: 100%;
    max-width: 100%;    /* prevents accidental overflow inside flex/grid */
  }

/* Table utilities */
.table-striped tr:nth-child(even) td {
    background-color: var(--table-striped-row-bg-color);
}
  
.table-hover tr:hover td {
    background-color: var(--table-hover-row-bg-color);
}
  
.table-layout-fixed {
    table-layout: fixed;
}

/* User interaction utilities */
.user-select-none { user-select: none; }

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-none { cursor: none; }
.cursor-context-menu { cursor: context-menu; }
.cursor-help { cursor: help; }
.cursor-pointer { cursor: pointer; }
.cursor-progress { cursor: progress; }
.cursor-wait { cursor: wait; }
.cursor-cell { cursor: cell; }
.cursor-crosshair { cursor: crosshair; }
.cursor-text { cursor: text; }
.cursor-vertical-text { cursor: vertical-text; }
.cursor-alias { cursor: alias; }
.cursor-copy { cursor: copy; }
.cursor-move { cursor: move; }
.cursor-no-drop { cursor: no-drop; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-e-resize { cursor: e-resize; }
.cursor-n-resize { cursor: n-resize; }
.cursor-ne-resize { cursor: ne-resize; }
.cursor-nw-resize { cursor: nw-resize; }
.cursor-s-resize { cursor: s-resize; }
.cursor-se-resize { cursor: se-resize; }
.cursor-sw-resize { cursor: sw-resize; }
.cursor-w-resize { cursor: w-resize; }
.cursor-ns-resize { cursor: ns-resize; }
.cursor-ew-resize { cursor: ew-resize; }
.cursor-col-resize { cursor: col-resize; }
.cursor-row-resize { cursor: row-resize; }
.cursor-all-scroll { cursor: all-scroll; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* CONTAINER MEDIA QUERY SETTINGS */
/* These are grouped together so that breakpoints can be adjusted in one place */
/* Hide elements on medium containers and larger */

@container (width >= 850px) {
  .hide-lg-up {display:none !important;}
}
@container (width <= 1300px) {
  .hide-lg-down {display:none !important;}
}

/* Medium containers */
@container (width < 850px) {
    .hide-md-down {display:none !important;}

    .md\:gap-0 { gap: 0; }
    .md\:gap-xs { gap: var(--size-xs); }
    .md\:gap-sm { gap: var(--size-sm); }
    .md\:gap-md { gap: var(--size-md); }
    .md\:gap-lg { gap: var(--size-lg); }

    .md\:m-xs { margin: var(--size-xs); }
    .md\:m-sm { margin: var(--size-sm); }
    .md\:m-md { margin: var(--size-md); }
    .md\:m-lg { margin: var(--size-lg); }
    .md\:m-xl { margin: var(--size-xl); }
  
    .md\:mh-xs { margin-left: var(--size-xs); margin-right: var(--size-xs); }
    .md\:mh-sm { margin-left: var(--size-sm); margin-right: var(--size-sm); }
    .md\:mh-md { margin-left: var(--size-md); margin-right: var(--size-md); }
    .md\:mh-lg { margin-left: var(--size-lg); margin-right: var(--size-lg); }
    .md\:mh-xl { margin-left: var(--size-xl); margin-right: var(--size-xl); }
  
    .md\:mv-xs { margin-top: var(--size-xs); margin-bottom: var(--size-xs); }
    .md\:mv-sm { margin-top: var(--size-sm); margin-bottom: var(--size-sm); }
    .md\:mv-md { margin-top: var(--size-md); margin-bottom: var(--size-md); }
    .md\:mv-lg { margin-top: var(--size-lg); margin-bottom: var(--size-lg); }
    .md\:mv-xl { margin-top: var(--size-xl); margin-bottom: var(--size-xl); }
  
    .md\:mt-xs { margin-top: var(--size-xs); }
    .md\:mt-sm { margin-top: var(--size-sm); }
    .md\:mt-md { margin-top: var(--size-md); }
    .md\:mt-lg { margin-top: var(--size-lg); }
    .md\:mt-xl { margin-top: var(--size-xl); }
  
    .md\:mr-xs { margin-right: var(--size-xs); }
    .md\:mr-sm { margin-right: var(--size-sm); }
    .md\:mr-md { margin-right: var(--size-md); }
    .md\:mr-lg { margin-right: var(--size-lg); }
    .md\:mr-xl { margin-right: var(--size-xl); }
  
    .md\:mb-xs { margin-bottom: var(--size-xs); }
    .md\:mb-sm { margin-bottom: var(--size-sm); }
    .md\:mb-md { margin-bottom: var(--size-md); }
    .md\:mb-lg { margin-bottom: var(--size-lg); }
    .md\:mb-xl { margin-bottom: var(--size-xl); }
  
    .md\:ml-xs { margin-left: var(--size-xs); }
    .md\:ml-sm { margin-left: var(--size-sm); }
    .md\:ml-md { margin-left: var(--size-md); }
    .md\:ml-lg { margin-left: var(--size-lg); }
    .md\:ml-xl { margin-left: var(--size-xl); }
  
    .md\:p-xs { padding: var(--size-xs); }
    .md\:p-sm { padding: var(--size-sm); }
    .md\:p-md { padding: var(--size-md); }
    .md\:p-lg { padding: var(--size-lg); }
    .md\:p-xl { padding: var(--size-xl); }
  
    .md\:ph-xs { padding-left: var(--size-xs); padding-right: var(--size-xs); }
    .md\:ph-sm { padding-left: var(--size-sm); padding-right: var(--size-sm); }
    .md\:ph-md { padding-left: var(--size-md); padding-right: var(--size-md); }
    .md\:ph-lg { padding-left: var(--size-lg); padding-right: var(--size-lg); }
    .md\:ph-xl { padding-left: var(--size-xl); padding-right: var(--size-xl); }
  
    .md\:pv-xs { padding-top: var(--size-xs); padding-bottom: var(--size-xs); }
    .md\:pv-sm { padding-top: var(--size-sm); padding-bottom: var(--size-sm); }
    .md\:pv-md { padding-top: var(--size-md); padding-bottom: var(--size-md); }
    .md\:pv-lg { padding-top: var(--size-lg); padding-bottom: var(--size-lg); }
    .md\:pv-xl { padding-top: var(--size-xl); padding-bottom: var(--size-xl); }
  
    .md\:pt-xs { padding-top: var(--size-xs); }
    .md\:pt-sm { padding-top: var(--size-sm); }
    .md\:pt-md { padding-top: var(--size-md); }
    .md\:pt-lg { padding-top: var(--size-lg); }
    .md\:pt-xl { padding-top: var(--size-xl); }
  
    .md\:pr-xs { padding-right: var(--size-xs); }
    .md\:pr-sm { padding-right: var(--size-sm); }
    .md\:pr-md { padding-right: var(--size-md); }
    .md\:pr-lg { padding-right: var(--size-lg); }
    .md\:pr-xl { padding-right: var(--size-xl); }
  
    .md\:pb-xs { padding-bottom: var(--size-xs); }
    .md\:pb-sm { padding-bottom: var(--size-sm); }
    .md\:pb-md { padding-bottom: var(--size-md); }
    .md\:pb-lg { padding-bottom: var(--size-lg); }
    .md\:pb-xl { padding-bottom: var(--size-xl); }
  
    .md\:pl-xs { padding-left: var(--size-xs); }
    .md\:pl-sm { padding-left: var(--size-sm); }
    .md\:pl-md { padding-left: var(--size-md); }
    .md\:pl-lg { padding-left: var(--size-lg); }
    .md\:pl-xl { padding-left: var(--size-xl); }

    .md\:cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .md\:cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .md\:cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .md\:cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md\:cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md\:cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:item-min-w-3xs { --grid-item-min-width: var(--size-3xs); }
    .md\:item-min-w-2xs { --grid-item-min-width: var(--size-2xs); }
    .md\:item-min-w-xs  { --grid-item-min-width: var(--size-xs); }
    .md\:item-min-w-sm  { --grid-item-min-width: var(--size-sm); }
    .md\:item-min-w-md  { --grid-item-min-width: var(--size-md); }
    .md\:item-min-w-lg  { --grid-item-min-width: var(--size-lg); }
    .md\:item-min-w-xl  { --grid-item-min-width: var(--size-xl); }
    .md\:item-min-w-2xl { --grid-item-min-width: var(--size-2xl); }
    .md\:item-min-w-3xl { --grid-item-min-width: var(--size-3xl); }
    .md\:item-min-w-4xl { --grid-item-min-width: var(--size-4xl); }
    .md\:rows-1 { grid-template-rows: repeat(1, minmax(0, auto)); }
    .md\:rows-2 { grid-template-rows: repeat(2, minmax(0, auto)); }
    .md\:rows-3 { grid-template-rows: repeat(3, minmax(0, auto)); }
    .md\:rows-4 { grid-template-rows: repeat(4, minmax(0, auto)); }
    .md\:rows-5 { grid-template-rows: repeat(5, minmax(0, auto)); }
    .md\:rows-6 { grid-template-rows: repeat(6, minmax(0, auto)); }
    .md\:rows-7 { grid-template-rows: repeat(7, minmax(0, auto)); }
    .md\:rows-8 { grid-template-rows: repeat(8, minmax(0, auto)); }
    .md\:rows-9 { grid-template-rows: repeat(9, minmax(0, auto)); }
    .md\:rows-10 { grid-template-rows: repeat(10, minmax(0, auto)); }
    .md\:rows-11 { grid-template-rows: repeat(11, minmax(0, auto)); }
    .md\:rows-12 { grid-template-rows: repeat(12, minmax(0, auto)); }
    .md\:auto-rows-auto { grid-auto-rows: auto; }
    .md\:auto-rows-min  { grid-auto-rows: min-content; }
    .md\:auto-rows-max  { grid-auto-rows: max-content; }
    .md\:auto-rows-fr   { grid-auto-rows: minmax(0, 1fr); }
    .md\:auto-rows-3xs { grid-auto-rows: var(--size-3xs); }
    .md\:auto-rows-2xs { grid-auto-rows: var(--size-2xs); }
    .md\:auto-rows-xs  { grid-auto-rows: var(--size-xs); }
    .md\:auto-rows-sm  { grid-auto-rows: var(--size-sm); }
    .md\:auto-rows-md  { grid-auto-rows: var(--size-md); }
    .md\:auto-rows-lg  { grid-auto-rows: var(--size-lg); }
    .md\:auto-rows-xl  { grid-auto-rows: var(--size-xl); }
    .md\:auto-rows-2xl { grid-auto-rows: var(--size-2xl); }
    .md\:auto-rows-3xl { grid-auto-rows: var(--size-3xl); }
    .md\:auto-rows-4xl { grid-auto-rows: var(--size-4xl); }
    .md\:cs-1 { grid-column-start: 1; } .md\:ce-1 { grid-column-end: 2; } .md\:c-1 { grid-column: 1 / 2; }
    .md\:cs-2 { grid-column-start: 2; } .md\:ce-2 { grid-column-end: 3; } .md\:c-2 { grid-column: 2 / 3; }
    .md\:cs-3 { grid-column-start: 3; } .md\:ce-3 { grid-column-end: 4; } .md\:c-3 { grid-column: 3 / 4; }
    .md\:cs-4 { grid-column-start: 4; } .md\:ce-4 { grid-column-end: 5; } .md\:c-4 { grid-column: 4 / 5; }
    .md\:cs-5 { grid-column-start: 5; } .md\:ce-5 { grid-column-end: 6; } .md\:c-5 { grid-column: 5 / 6; }
    .md\:cs-6 { grid-column-start: 6; } .md\:ce-6 { grid-column-end: 7; } .md\:c-6 { grid-column: 6 / 7; }
    .md\:cs-7 { grid-column-start: 7; } .md\:ce-7 { grid-column-end: 8; } .md\:c-7 { grid-column: 7 / 8; }
    .md\:cs-8 { grid-column-start: 8; } .md\:ce-8 { grid-column-end: 9; } .md\:c-8 { grid-column: 8 / 9; }
    .md\:cs-9 { grid-column-start: 9; } .md\:ce-9 { grid-column-end: 10; } .md\:c-9 { grid-column: 9 / 10; }
    .md\:cs-10 { grid-column-start: 10; } .md\:ce-10 { grid-column-end: 11; } .md\:c-10 { grid-column: 10 / 11; }
    .md\:cs-11 { grid-column-start: 11; } .md\:ce-11 { grid-column-end: 12; } .md\:c-11 { grid-column: 11 / 12; }
    .md\:cs-12 { grid-column-start: 12; } .md\:ce-12 { grid-column-end: 13; } .md\:c-12 { grid-column: 12 / 13; }
    .md\:cs-13 { grid-column-start: 13; } .md\:ce-13 { grid-column-end: 14; }
    .md\:cs-auto { grid-column-start: auto; } .md\:ce-auto { grid-column-end: auto; } .md\:c-auto { grid-column: auto; }
    .md\:rs-1 { grid-row-start: 1; } .md\:re-1 { grid-row-end: 2; } .md\:r-1 { grid-row: 1 / 2; }
    .md\:rs-2 { grid-row-start: 2; } .md\:re-2 { grid-row-end: 3; } .md\:r-2 { grid-row: 2 / 3; }
    .md\:rs-3 { grid-row-start: 3; } .md\:re-3 { grid-row-end: 4; } .md\:r-3 { grid-row: 3 / 4; }
    .md\:rs-4 { grid-row-start: 4; } .md\:re-4 { grid-row-end: 5; } .md\:r-4 { grid-row: 4 / 5; }
    .md\:rs-5 { grid-row-start: 5; } .md\:re-5 { grid-row-end: 6; } .md\:r-5 { grid-row: 5 / 6; }
    .md\:rs-6 { grid-row-start: 6; } .md\:re-6 { grid-row-end: 7; } .md\:r-6 { grid-row: 6 / 7; }
    .md\:rs-7 { grid-row-start: 7; } .md\:re-7 { grid-row-end: 8; } .md\:r-7 { grid-row: 7 / 8; }
    .md\:rs-8 { grid-row-start: 8; } .md\:re-8 { grid-row-end: 9; } .md\:r-8 { grid-row: 8 / 9; }
    .md\:rs-9 { grid-row-start: 9; } .md\:re-9 { grid-row-end: 10; } .md\:r-9 { grid-row: 9 / 10; }
    .md\:rs-10 { grid-row-start: 10; } .md\:re-10 { grid-row-end: 11; } .md\:r-10 { grid-row: 10 / 11; }
    .md\:rs-11 { grid-row-start: 11; } .md\:re-11 { grid-row-end: 12; } .md\:r-11 { grid-row: 11 / 12; }
    .md\:rs-12 { grid-row-start: 12; } .md\:re-12 { grid-row-end: 13; } .md\:r-12 { grid-row: 12 / 13; }
    .md\:rs-13 { grid-row-start: 13; } .md\:re-13 { grid-row-end: 14; }
    .md\:rs-auto { grid-row-start: auto; } .md\:re-auto { grid-row-end: auto; } .md\:r-auto { grid-row: auto; }
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-span-8 { grid-column: span 8 / span 8; }
    .md\:col-span-9 { grid-column: span 9 / span 9; }
    .md\:col-span-10 { grid-column: span 10 / span 10; }
    .md\:col-span-11 { grid-column: span 11 / span 11; }
    .md\:col-span-12 { grid-column: span 12 / span 12; }
    .md\:col-span-full { grid-column: 1 / -1; }
    .md\:row-span-1 { grid-row: span 1 / span 1; }
    .md\:row-span-2 { grid-row: span 2 / span 2; }
    .md\:row-span-3 { grid-row: span 3 / span 3; }
    .md\:row-span-4 { grid-row: span 4 / span 4; }
    .md\:row-span-5 { grid-row: span 5 / span 5; }
    .md\:row-span-6 { grid-row: span 6 / span 6; }
    .md\:row-span-7 { grid-row: span 7 / span 7; }
    .md\:row-span-8 { grid-row: span 8 / span 8; }
    .md\:row-span-9 { grid-row: span 9 / span 9; }
    .md\:row-span-10 { grid-row: span 10 / span 10; }
    .md\:row-span-11 { grid-row: span 11 / span 11; }
    .md\:row-span-12 { grid-row: span 12 / span 12; }
    .md\:row-span-full { grid-row: 1 / -1; }

  .md\:text-size-sm { font-size: var(--text-size-sm); }
  .md\:text-size-md { font-size: var(--text-size-md); }
  .md\:text-size-lg { font-size: var(--text-size-lg); }
  .md\:text-size-xl { font-size: var(--text-size-xl); }
  .md\:text-size-2xl { font-size: var(--text-size-2xl); }
  .md\:text-size-3xl { font-size: var(--text-size-3xl); }
  .md\:text-size-4xl { font-size: var(--text-size-4xl); }
  
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
  .md\:text-justify { text-align: justify; }
}

/* Small containers */
@container (width < 500px) {
    .hide-sm {display:none !important;}

    .sm\:gap-0 { gap: 0; }
    .sm\:gap-xs { gap: var(--size-xs); }
    .sm\:gap-sm { gap: var(--size-sm); }
    .sm\:gap-md { gap: var(--size-md); }
    .sm\:gap-lg { gap: var(--size-lg); }

    .sm\:m-xs { margin: var(--size-xs); }
    .sm\:m-sm { margin: var(--size-sm); }
    .sm\:m-md { margin: var(--size-md); }
    .sm\:m-lg { margin: var(--size-lg); }
    .sm\:m-xl { margin: var(--size-xl); }
  
    .sm\:mh-xs { margin-left: var(--size-xs); margin-right: var(--size-xs); }
    .sm\:mh-sm { margin-left: var(--size-sm); margin-right: var(--size-sm); }
    .sm\:mh-md { margin-left: var(--size-md); margin-right: var(--size-md); }
    .sm\:mh-lg { margin-left: var(--size-lg); margin-right: var(--size-lg); }
    .sm\:mh-xl { margin-left: var(--size-xl); margin-right: var(--size-xl); }
  
    .sm\:mv-xs { margin-top: var(--size-xs); margin-bottom: var(--size-xs); }
    .sm\:mv-sm { margin-top: var(--size-sm); margin-bottom: var(--size-sm); }
    .sm\:mv-md { margin-top: var(--size-md); margin-bottom: var(--size-md); }
    .sm\:mv-lg { margin-top: var(--size-lg); margin-bottom: var(--size-lg); }
    .sm\:mv-xl { margin-top: var(--size-xl); margin-bottom: var(--size-xl); }
  
    .sm\:mt-xs { margin-top: var(--size-xs); }
    .sm\:mt-sm { margin-top: var(--size-sm); }
    .sm\:mt-md { margin-top: var(--size-md); }
    .sm\:mt-lg { margin-top: var(--size-lg); }
    .sm\:mt-xl { margin-top: var(--size-xl); }
  
    .sm\:mr-xs { margin-right: var(--size-xs); }
    .sm\:mr-sm { margin-right: var(--size-sm); }
    .sm\:mr-md { margin-right: var(--size-md); }
    .sm\:mr-lg { margin-right: var(--size-lg); }
    .sm\:mr-xl { margin-right: var(--size-xl); }
  
    .sm\:mb-xs { margin-bottom: var(--size-xs); }
    .sm\:mb-sm { margin-bottom: var(--size-sm); }
    .sm\:mb-md { margin-bottom: var(--size-md); }
    .sm\:mb-lg { margin-bottom: var(--size-lg); }
    .sm\:mb-xl { margin-bottom: var(--size-xl); }
  
    .sm\:ml-xs { margin-left: var(--size-xs); }
    .sm\:ml-sm { margin-left: var(--size-sm); }
    .sm\:ml-md { margin-left: var(--size-md); }
    .sm\:ml-lg { margin-left: var(--size-lg); }
    .sm\:ml-xl { margin-left: var(--size-xl); }
  
    .sm\:p-xs { padding: var(--size-xs); }
    .sm\:p-sm { padding: var(--size-sm); }
    .sm\:p-md { padding: var(--size-md); }
    .sm\:p-lg { padding: var(--size-lg); }
    .sm\:p-xl { padding: var(--size-xl); }
  
    .sm\:ph-xs { padding-left: var(--size-xs); padding-right: var(--size-xs); }
    .sm\:ph-sm { padding-left: var(--size-sm); padding-right: var(--size-sm); }
    .sm\:ph-md { padding-left: var(--size-md); padding-right: var(--size-md); }
    .sm\:ph-lg { padding-left: var(--size-lg); padding-right: var(--size-lg); }
    .sm\:ph-xl { padding-left: var(--size-xl); padding-right: var(--size-xl); }
  
    .sm\:pv-xs { padding-top: var(--size-xs); padding-bottom: var(--size-xs); }
    .sm\:pv-sm { padding-top: var(--size-sm); padding-bottom: var(--size-sm); }
    .sm\:pv-md { padding-top: var(--size-md); padding-bottom: var(--size-md); }
    .sm\:pv-lg { padding-top: var(--size-lg); padding-bottom: var(--size-lg); }
    .sm\:pv-xl { padding-top: var(--size-xl); padding-bottom: var(--size-xl); }
  
    .sm\:pt-xs { padding-top: var(--size-xs); }
    .sm\:pt-sm { padding-top: var(--size-sm); }
    .sm\:pt-md { padding-top: var(--size-md); }
    .sm\:pt-lg { padding-top: var(--size-lg); }
    .sm\:pt-xl { padding-top: var(--size-xl); }
  
    .sm\:pr-xs { padding-right: var(--size-xs); }
    .sm\:pr-sm { padding-right: var(--size-sm); }
    .sm\:pr-md { padding-right: var(--size-md); }
    .sm\:pr-lg { padding-right: var(--size-lg); }
    .sm\:pr-xl { padding-right: var(--size-xl); }
  
    .sm\:pb-xs { padding-bottom: var(--size-xs); }
    .sm\:pb-sm { padding-bottom: var(--size-sm); }
    .sm\:pb-md { padding-bottom: var(--size-md); }
    .sm\:pb-lg { padding-bottom: var(--size-lg); }
    .sm\:pb-xl { padding-bottom: var(--size-xl); }
  
    .sm\:pl-xs { padding-left: var(--size-xs); }
    .sm\:pl-sm { padding-left: var(--size-sm); }
    .sm\:pl-md { padding-left: var(--size-md); }
    .sm\:pl-lg { padding-left: var(--size-lg); }
    .sm\:pl-xl { padding-left: var(--size-xl); }

    .sm\:cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm\:cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm\:cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sm\:cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sm\:cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .sm\:cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .sm\:cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .sm\:cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .sm\:item-min-w-3xs { --grid-item-min-width: var(--size-3xs); }
    .sm\:item-min-w-2xs { --grid-item-min-width: var(--size-2xs); }
    .sm\:item-min-w-xs  { --grid-item-min-width: var(--size-xs); }
    .sm\:item-min-w-sm  { --grid-item-min-width: var(--size-sm); }
    .sm\:item-min-w-md  { --grid-item-min-width: var(--size-md); }
    .sm\:item-min-w-lg  { --grid-item-min-width: var(--size-lg); }
    .sm\:item-min-w-xl  { --grid-item-min-width: var(--size-xl); }
    .sm\:item-min-w-2xl { --grid-item-min-width: var(--size-2xl); }
    .sm\:item-min-w-3xl { --grid-item-min-width: var(--size-3xl); }
    .sm\:item-min-w-4xl { --grid-item-min-width: var(--size-4xl); }
    .sm\:rows-1 { grid-template-rows: repeat(1, minmax(0, auto)); }
    .sm\:rows-2 { grid-template-rows: repeat(2, minmax(0, auto)); }
    .sm\:rows-3 { grid-template-rows: repeat(3, minmax(0, auto)); }
    .sm\:rows-4 { grid-template-rows: repeat(4, minmax(0, auto)); }
    .sm\:rows-5 { grid-template-rows: repeat(5, minmax(0, auto)); }
    .sm\:rows-6 { grid-template-rows: repeat(6, minmax(0, auto)); }
    .sm\:rows-7 { grid-template-rows: repeat(7, minmax(0, auto)); }
    .sm\:rows-8 { grid-template-rows: repeat(8, minmax(0, auto)); }
    .sm\:rows-9 { grid-template-rows: repeat(9, minmax(0, auto)); }
    .sm\:rows-10 { grid-template-rows: repeat(10, minmax(0, auto)); }
    .sm\:rows-11 { grid-template-rows: repeat(11, minmax(0, auto)); }
    .sm\:rows-12 { grid-template-rows: repeat(12, minmax(0, auto)); }
    .sm\:auto-rows-auto { grid-auto-rows: auto; }
    .sm\:auto-rows-min  { grid-auto-rows: min-content; }
    .sm\:auto-rows-max  { grid-auto-rows: max-content; }
    .sm\:auto-rows-fr   { grid-auto-rows: minmax(0, 1fr); }
    .sm\:auto-rows-3xs { grid-auto-rows: var(--size-3xs); }
    .sm\:auto-rows-2xs { grid-auto-rows: var(--size-2xs); }
    .sm\:auto-rows-xs  { grid-auto-rows: var(--size-xs); }
    .sm\:auto-rows-sm  { grid-auto-rows: var(--size-sm); }
    .sm\:auto-rows-md  { grid-auto-rows: var(--size-md); }
    .sm\:auto-rows-lg  { grid-auto-rows: var(--size-lg); }
    .sm\:auto-rows-xl  { grid-auto-rows: var(--size-xl); }
    .sm\:auto-rows-2xl { grid-auto-rows: var(--size-2xl); }
    .sm\:auto-rows-3xl { grid-auto-rows: var(--size-3xl); }
    .sm\:auto-rows-4xl { grid-auto-rows: var(--size-4xl); }
    .sm\:cs-1 { grid-column-start: 1; } .sm\:ce-1 { grid-column-end: 2; } .sm\:c-1 { grid-column: 1 / 2; }
    .sm\:cs-2 { grid-column-start: 2; } .sm\:ce-2 { grid-column-end: 3; } .sm\:c-2 { grid-column: 2 / 3; }
    .sm\:cs-3 { grid-column-start: 3; } .sm\:ce-3 { grid-column-end: 4; } .sm\:c-3 { grid-column: 3 / 4; }
    .sm\:cs-4 { grid-column-start: 4; } .sm\:ce-4 { grid-column-end: 5; } .sm\:c-4 { grid-column: 4 / 5; }
    .sm\:cs-5 { grid-column-start: 5; } .sm\:ce-5 { grid-column-end: 6; } .sm\:c-5 { grid-column: 5 / 6; }
    .sm\:cs-6 { grid-column-start: 6; } .sm\:ce-6 { grid-column-end: 7; } .sm\:c-6 { grid-column: 6 / 7; }
    .sm\:cs-7 { grid-column-start: 7; } .sm\:ce-7 { grid-column-end: 8; } .sm\:c-7 { grid-column: 7 / 8; }
    .sm\:cs-8 { grid-column-start: 8; } .sm\:ce-8 { grid-column-end: 9; } .sm\:c-8 { grid-column: 8 / 9; }
    .sm\:cs-9 { grid-column-start: 9; } .sm\:ce-9 { grid-column-end: 10; } .sm\:c-9 { grid-column: 9 / 10; }
    .sm\:cs-10 { grid-column-start: 10; } .sm\:ce-10 { grid-column-end: 11; } .sm\:c-10 { grid-column: 10 / 11; }
    .sm\:cs-11 { grid-column-start: 11; } .sm\:ce-11 { grid-column-end: 12; } .sm\:c-11 { grid-column: 11 / 12; }
    .sm\:cs-12 { grid-column-start: 12; } .sm\:ce-12 { grid-column-end: 13; } .sm\:c-12 { grid-column: 12 / 13; }
    .sm\:cs-13 { grid-column-start: 13; } .sm\:ce-13 { grid-column-end: 14; }
    .sm\:cs-auto { grid-column-start: auto; } .sm\:ce-auto { grid-column-end: auto; } .sm\:c-auto { grid-column: auto; }
    .sm\:rs-1 { grid-row-start: 1; } .sm\:re-1 { grid-row-end: 2; } .sm\:r-1 { grid-row: 1 / 2; }
    .sm\:rs-2 { grid-row-start: 2; } .sm\:re-2 { grid-row-end: 3; } .sm\:r-2 { grid-row: 2 / 3; }
    .sm\:rs-3 { grid-row-start: 3; } .sm\:re-3 { grid-row-end: 4; } .sm\:r-3 { grid-row: 3 / 4; }
    .sm\:rs-4 { grid-row-start: 4; } .sm\:re-4 { grid-row-end: 5; } .sm\:r-4 { grid-row: 4 / 5; }
    .sm\:rs-5 { grid-row-start: 5; } .sm\:re-5 { grid-row-end: 6; } .sm\:r-5 { grid-row: 5 / 6; }
    .sm\:rs-6 { grid-row-start: 6; } .sm\:re-6 { grid-row-end: 7; } .sm\:r-6 { grid-row: 6 / 7; }
    .sm\:rs-7 { grid-row-start: 7; } .sm\:re-7 { grid-row-end: 8; } .sm\:r-7 { grid-row: 7 / 8; }
    .sm\:rs-8 { grid-row-start: 8; } .sm\:re-8 { grid-row-end: 9; } .sm\:r-8 { grid-row: 8 / 9; }
    .sm\:rs-9 { grid-row-start: 9; } .sm\:re-9 { grid-row-end: 10; } .sm\:r-9 { grid-row: 9 / 10; }
    .sm\:rs-10 { grid-row-start: 10; } .sm\:re-10 { grid-row-end: 11; } .sm\:r-10 { grid-row: 10 / 11; }
    .sm\:rs-11 { grid-row-start: 11; } .sm\:re-11 { grid-row-end: 12; } .sm\:r-11 { grid-row: 11 / 12; }
    .sm\:rs-12 { grid-row-start: 12; } .sm\:re-12 { grid-row-end: 13; } .sm\:r-12 { grid-row: 12 / 13; }
    .sm\:rs-13 { grid-row-start: 13; } .sm\:re-13 { grid-row-end: 14; }
    .sm\:rs-auto { grid-row-start: auto; } .sm\:re-auto { grid-row-end: auto; } .sm\:r-auto { grid-row: auto; }
    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
    .sm\:col-span-4 { grid-column: span 4 / span 4; }
    .sm\:col-span-5 { grid-column: span 5 / span 5; }
    .sm\:col-span-6 { grid-column: span 6 / span 6; }
    .sm\:col-span-7 { grid-column: span 7 / span 7; }
    .sm\:col-span-8 { grid-column: span 8 / span 8; }
    .sm\:col-span-9 { grid-column: span 9 / span 9; }
    .sm\:col-span-10 { grid-column: span 10 / span 10; }
    .sm\:col-span-11 { grid-column: span 11 / span 11; }
    .sm\:col-span-12 { grid-column: span 12 / span 12; }
    .sm\:col-span-full { grid-column: 1 / -1; }
    .sm\:row-span-1 { grid-row: span 1 / span 1; }
    .sm\:row-span-2 { grid-row: span 2 / span 2; }
    .sm\:row-span-3 { grid-row: span 3 / span 3; }
    .sm\:row-span-4 { grid-row: span 4 / span 4; }
    .sm\:row-span-5 { grid-row: span 5 / span 5; }
    .sm\:row-span-6 { grid-row: span 6 / span 6; }
    .sm\:row-span-7 { grid-row: span 7 / span 7; }
    .sm\:row-span-8 { grid-row: span 8 / span 8; }
    .sm\:row-span-9 { grid-row: span 9 / span 9; }
    .sm\:row-span-10 { grid-row: span 10 / span 10; }
    .sm\:row-span-11 { grid-row: span 11 / span 11; }
    .sm\:row-span-12 { grid-row: span 12 / span 12; }
    .sm\:row-span-full { grid-row: 1 / -1; }

  .sm\:text-size-sm { font-size: var(--text-size-sm); }
  .sm\:text-size-md { font-size: var(--text-size-md); }
  .sm\:text-size-lg { font-size: var(--text-size-lg); }
  .sm\:text-size-xl { font-size: var(--text-size-xl); }
  .sm\:text-size-2xl { font-size: var(--text-size-2xl); }
  .sm\:text-size-3xl { font-size: var(--text-size-3xl); }
  .sm\:text-size-4xl { font-size: var(--text-size-4xl); }
  
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
  .sm\:text-justify { text-align: justify; }
}

}