/* Custom utilities layer (highest priority) */
@layer tailwind {
    /* Padding Classes using existing spacing variables */

    /* All Padding */
    .p-0{ padding:0;}
    .p-5xs { padding: var(--space-5xs); }
    .p-4xs { padding: var(--space-4xs); }
    .p-3xs { padding: var(--space-3xs); }
    .p-2xs { padding: var(--space-2xs); }
    .p-xs { padding: var(--space-xs); }
    .p-s { padding: var(--space-s); }
    .p-m { padding: var(--space-m); }
    .p-l { padding: var(--space-l); }
    .p-xl { padding: var(--space-xl); }
    .p-2xl { padding: var(--space-2xl); }
    .p-3xl { padding: var(--space-3xl); }
    
    /* Padding Top */
    .pt-0{ padding-top:0;}
    .pt-5xs { padding-top: var(--space-5xs); }
    .pt-4xs { padding-top: var(--space-4xs); }
    .pt-3xs { padding-top: var(--space-3xs); }
    .pt-2xs { padding-top: var(--space-2xs); }
    .pt-xs { padding-top: var(--space-xs); }
    .pt-s { padding-top: var(--space-s); }
    .pt-m { padding-top: var(--space-m); }
    .pt-l { padding-top: var(--space-l); }
    .pt-xl { padding-top: var(--space-xl); }
    .pt-2xl { padding-top: var(--space-2xl); }
    .pt-3xl { padding-top: var(--space-3xl); }

    /* Padding Right */
    .pr-0{ padding-right:0;}
    .pr-5xs { padding-right: var(--space-5xs); }
    .pr-4xs { padding-right: var(--space-4xs); }
    .pr-3xs { padding-right: var(--space-3xs); }
    .pr-2xs { padding-right: var(--space-2xs); }
    .pr-xs { padding-right: var(--space-xs); }
    .pr-s { padding-right: var(--space-s); }
    .pr-m { padding-right: var(--space-m); }
    .pr-l { padding-right: var(--space-l); }
    .pr-xl { padding-right: var(--space-xl); }
    .pr-2xl { padding-right: var(--space-2xl); }
    .pr-3xl { padding-right: var(--space-3xl); }

    /* Padding Bottom */
    .pb-0{ padding-bottom:0;}
    .pb-5xs { padding-bottom: var(--space-5xs); }
    .pb-4xs { padding-bottom: var(--space-4xs); }
    .pb-3xs { padding-bottom: var(--space-3xs); }
    .pb-2xs { padding-bottom: var(--space-2xs); }
    .pb-xs { padding-bottom: var(--space-xs); }
    .pb-s { padding-bottom: var(--space-s); }
    .pb-m { padding-bottom: var(--space-m); }
    .pb-l { padding-bottom: var(--space-l); }
    .pb-xl { padding-bottom: var(--space-xl); }
    .pb-2xl { padding-bottom: var(--space-2xl); }
    .pb-3xl { padding-bottom: var(--space-3xl); }

    /* Padding Left */
    .pl-0{ padding-left:0;}
    .pl-5xs { padding-left: var(--space-5xs); }
    .pl-4xs { padding-left: var(--space-4xs); }
    .pl-3xs { padding-left: var(--space-3xs); }
    .pl-2xs { padding-left: var(--space-2xs); }
    .pl-xs { padding-left: var(--space-xs); }
    .pl-s { padding-left: var(--space-s); }
    .pl-m { padding-left: var(--space-m); }
    .pl-l { padding-left: var(--space-l); }
    .pl-xl { padding-left: var(--space-xl); }
    .pl-2xl { padding-left: var(--space-2xl); }
    .pl-3xl { padding-left: var(--space-3xl); }

    /* Padding X (horizontal) */
    .px-0{ padding-left:0; padding-right:0;}
    .px-5xs { padding-left: var(--space-5xs); padding-right: var(--space-5xs); }
    .px-4xs { padding-left: var(--space-4xs); padding-right: var(--space-4xs); }
    .px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
    .px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
    .px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
    .px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
    .px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
    .px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
    .px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

    /* Padding Y (vertical) */
    .py-0{ padding-top:0; padding-bottom:0;}
    .py-5xs { padding-top: var(--space-5xs); padding-bottom: var(--space-5xs); }
    .py-4xs { padding-top: var(--space-4xs); padding-bottom: var(--space-4xs); }
    .py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
    .py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
    .py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
    .py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
    .py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
    .py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
    .py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

    /* Padding in rem with 10rem increments */
    .p-10 { padding: 10rem; }
    .p-20 { padding: 20rem; }
    .p-30 { padding: 30rem; }
    .p-40 { padding: 40rem; }
    .p-50 { padding: 50rem; }
    .p-60 { padding: 60rem; }
    .p-70 { padding: 70rem; }
    .p-80 { padding: 80rem; }
    .p-90 { padding: 90rem; }
    .p-100 { padding: 100rem; }

    .pt-10 { padding-top: 10rem; }
    .pt-20 { padding-top: 20rem; }
    .pt-30 { padding-top: 30rem; }
    .pt-40 { padding-top: 40rem; }
    .pt-50 { padding-top: 50rem; }
    .pt-60 { padding-top: 60rem; }
    .pt-70 { padding-top: 70rem; }
    .pt-80 { padding-top: 80rem; }
    .pt-90 { padding-top: 90rem; }
    .pt-100 { padding-top: 100rem; }

    .pr-10 { padding-right: 10rem; }
    .pr-20 { padding-right: 20rem; }
    .pr-30 { padding-right: 30rem; }
    .pr-40 { padding-right: 40rem; }
    .pr-50 { padding-right: 50rem; }
    .pr-60 { padding-right: 60rem; }
    .pr-70 { padding-right: 70rem; }
    .pr-80 { padding-right: 80rem; }
    .pr-90 { padding-right: 90rem; }
    .pr-100 { padding-right: 100rem; }

    .pb-10 { padding-bottom: 10rem; }
    .pb-20 { padding-bottom: 20rem; }
    .pb-30 { padding-bottom: 30rem; }
    .pb-40 { padding-bottom: 40rem; }
    .pb-50 { padding-bottom: 50rem; }
    .pb-60 { padding-bottom: 60rem; }
    .pb-70 { padding-bottom: 70rem; }
    .pb-80 { padding-bottom: 80rem; }
    .pb-90 { padding-bottom: 90rem; }
    .pb-100 { padding-bottom: 100rem; }

    .pl-10 { padding-left: 10rem; }
    .pl-20 { padding-left: 20rem; }
    .pl-30 { padding-left: 30rem; }
    .pl-40 { padding-left: 40rem; }
    .pl-50 { padding-left: 50rem; }
    .pl-60 { padding-left: 60rem; }
    .pl-70 { padding-left: 70rem; }
    .pl-80 { padding-left: 80rem; }
    .pl-90 { padding-left: 90rem; }
    .pl-100 { padding-left: 100rem; }

    .px-10 { padding-left: 10rem; padding-right: 10rem; }
    .px-20 { padding-left: 20rem; padding-right: 20rem; }
    .px-30 { padding-left: 30rem; padding-right: 30rem; }
    .px-40 { padding-left: 40rem; padding-right: 40rem; }
    .px-50 { padding-left: 50rem; padding-right: 50rem; }
    .px-60 { padding-left: 60rem; padding-right: 60rem; }
    .px-70 { padding-left: 70rem; padding-right: 70rem; }
    .px-80 { padding-left: 80rem; padding-right: 80rem; }
    .px-90 { padding-left: 90rem; padding-right: 90rem; }
    .px-100 { padding-left: 100rem; padding-right: 100rem; }

    .py-10 { padding-top: 10rem; padding-bottom: 10rem; }
    .py-20 { padding-top: 20rem; padding-bottom: 20rem; }
    .py-30 { padding-top: 30rem; padding-bottom: 30rem; }
    .py-40 { padding-top: 40rem; padding-bottom: 40rem; }
    .py-50 { padding-top: 50rem; padding-bottom: 50rem; }
    .py-60 { padding-top: 60rem; padding-bottom: 60rem; }
    .py-70 { padding-top: 70rem; padding-bottom: 70rem; }
    .py-80 { padding-top: 80rem; padding-bottom: 80rem; }
    .py-90 { padding-top: 90rem; padding-bottom: 90rem; }
    .py-100 { padding-top: 100rem; padding-bottom: 100rem; }

    /* Gap Classes using existing spacing variables */

    /* Gap (both row and column) */
    .gap-5xs { gap: var(--space-5xs); }
    .gap-4xs { gap: var(--space-4xs); }
    .gap-3xs { gap: var(--space-3xs); }
    .gap-2xs { gap: var(--space-2xs); }
    .gap-xs { gap: var(--space-xs); }
    .gap-s { gap: var(--space-s); }
    .gap-m { gap: var(--space-m); }
    .gap-l { gap: var(--space-l); }
    .gap-xl { gap: var(--space-xl); }
    .gap-2xl { gap: var(--space-2xl); }
    .gap-3xl { gap: var(--space-3xl); }

    /* Gap X (column gap) */
    .gap-x-5xs { column-gap: var(--space-5xs); }
    .gap-x-4xs { column-gap: var(--space-4xs); }
    .gap-x-3xs { column-gap: var(--space-3xs); }
    .gap-x-2xs { column-gap: var(--space-2xs); }
    .gap-x-xs { column-gap: var(--space-xs); }
    .gap-x-s { column-gap: var(--space-s); }
    .gap-x-m { column-gap: var(--space-m); }
    .gap-x-l { column-gap: var(--space-l); }
    .gap-x-xl { column-gap: var(--space-xl); }
    .gap-x-2xl { column-gap: var(--space-2xl); }
    .gap-x-3xl { column-gap: var(--space-3xl); }

    /* Gap Y (row gap) */
    .gap-y-5xs { row-gap: var(--space-5xs); }
    .gap-y-4xs { row-gap: var(--space-4xs); }
    .gap-y-3xs { row-gap: var(--space-3xs); }
    .gap-y-2xs { row-gap: var(--space-2xs); }
    .gap-y-xs { row-gap: var(--space-xs); }
    .gap-y-s { row-gap: var(--space-s); }
    .gap-y-m { row-gap: var(--space-m); }
    .gap-y-l { row-gap: var(--space-l); }
    .gap-y-xl { row-gap: var(--space-xl); }
    .gap-y-2xl { row-gap: var(--space-2xl); }
    .gap-y-3xl { row-gap: var(--space-3xl); }

    /* Flex Utilities */

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

    /* Flex Direction */
    .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 { flex-wrap: wrap; }
    .flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .flex-nowrap { flex-wrap: nowrap; }

    /* Flex */
    .flex-1 { flex: 1 1 0%; }
    .flex-auto { flex: 1 1 auto; }
    .flex-initial { flex: 0 1 auto; }
    .flex-none { flex: none; }

    /* Flex Grow */
    .grow { flex-grow: 1; }
    .grow-0 { flex-grow: 0; }

    /* Flex Shrink */
    .shrink { flex-shrink: 1; }
    .shrink-0 { flex-shrink: 0; }

    /* Justify Content */
    .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; }

    /* Align Items */
    .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; }

    /* Align Content */
    .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; }

    /* Grid Utilities using custom grid variables */

    /* Display */
    .grid { display: grid; }
    .inline-grid { display: inline-grid; }

    /* Grid Template Columns using custom grid variables */
    .grid-cols-xs { grid-template-columns: var(--grid-xs); }
    .grid-cols-s { grid-template-columns: var(--grid-s); }
    .grid-cols-m { grid-template-columns: var(--grid-m); }
    .grid-cols-l { grid-template-columns: var(--grid-l); }
    .grid-cols-xl { grid-template-columns: var(--grid-xl); }
    .grid-cols-2xl { grid-template-columns: var(--grid-2xl); }
    .grid-cols-3xl { grid-template-columns: var(--grid-3xl); }

    /* Additional common grid template columns */
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    /* Grid Template Rows */
    .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
    .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
    .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
    .grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
    .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

    /* Grid Column Span */
    .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-full { grid-column: 1 / -1; }

    /* Grid Row Span */
    .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-full { grid-row: 1 / -1; }

    /* Grid Column Start */
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
    .col-start-auto { grid-column-start: auto; }

    /* Grid Column End */
    .col-end-1 { grid-column-end: 1; }
    .col-end-2 { grid-column-end: 2; }
    .col-end-3 { grid-column-end: 3; }
    .col-end-4 { grid-column-end: 4; }
    .col-end-5 { grid-column-end: 5; }
    .col-end-6 { grid-column-end: 6; }
    .col-end-auto { grid-column-end: auto; }

    /* Grid Row Start */
    .row-start-1 { grid-row-start: 1; }
    .row-start-2 { grid-row-start: 2; }
    .row-start-3 { grid-row-start: 3; }
    .row-start-4 { grid-row-start: 4; }
    .row-start-5 { grid-row-start: 5; }
    .row-start-6 { grid-row-start: 6; }
    .row-start-auto { grid-row-start: auto; }

    /* Grid Row End */
    .row-end-1 { grid-row-end: 1; }
    .row-end-2 { grid-row-end: 2; }
    .row-end-3 { grid-row-end: 3; }
    .row-end-4 { grid-row-end: 4; }
    .row-end-5 { grid-row-end: 5; }
    .row-end-6 { grid-row-end: 6; }
    .row-end-auto { grid-row-end: auto; }

    /* Grid Auto Flow */
    .grid-flow-row { grid-auto-flow: row; }
    .grid-flow-col { grid-auto-flow: column; }
    .grid-flow-row-dense { grid-auto-flow: row dense; }
    .grid-flow-col-dense { grid-auto-flow: column dense; }

    /* Grid Auto Columns */
    .auto-cols-auto { grid-auto-columns: auto; }
    .auto-cols-min { grid-auto-columns: min-content; }
    .auto-cols-max { grid-auto-columns: max-content; }
    .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

    /* Grid Auto Rows */
    .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); }

    /* Place Items */
    .place-items-start { place-items: start; }
    .place-items-end { place-items: end; }
    .place-items-center { place-items: center; }
    .place-items-stretch { place-items: stretch; }

    /* Place Content */
    .place-content-start { place-content: start; }
    .place-content-end { place-content: end; }
    .place-content-center { place-content: center; }
    .place-content-between { place-content: space-between; }
    .place-content-around { place-content: space-around; }
    .place-content-evenly { place-content: space-evenly; }
    .place-content-stretch { place-content: stretch; }

    /* Place Self */
    .place-self-auto { place-self: auto; }
    .place-self-start { place-self: start; }
    .place-self-end { place-self: end; }
    .place-self-center { place-self: center; }
    .place-self-stretch { place-self: stretch; }

    /* Justify Items */
    .justify-items-start { justify-items: start; }
    .justify-items-end { justify-items: end; }
    .justify-items-center { justify-items: center; }
    .justify-items-stretch { justify-items: stretch; }

    /* Justify Self */
    .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; }

    /* Text Alignment */
    .text-left { text-align: left; }
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-justify { text-align: justify; }
    .text-start { text-align: start; }
    .text-end { text-align: end; }
    
    /* Text Transform */
    .uppercase { text-transform: uppercase; }
    .lowercase { text-transform: lowercase; }
    .capitalize, .capitalise { text-transform: capitalize; }
    .normal-case { text-transform: none; }

    /* Font Size Classes */
    .fs--1{ font-size: var(--fs--1); font-weight: 700; line-height: 1.1em; letter-spacing: -.02em;}
    .fs-1{ font-size: var(--fs-1); font-weight: 400; line-height: 1.2em; letter-spacing: -.02em;}
    .fs-2{ font-size: var(--fs-2); font-weight: 400; line-height: 1.2em; letter-spacing: -.02em;}
    .fs-3{ font-size: var(--fs-3); font-weight: 400; line-height: 1.2em; letter-spacing: -.02em;}
    .fs-4{ font-size: var(--fs-4); font-weight: 400; line-height: 1.2em; letter-spacing: -.02em;}
    .fs-5{ font-size: var(--fs-5); font-weight: 400; line-height: 1.2em; letter-spacing: -.02em;}
    .fs-6{ font-size: var(--fs-6); font-weight: 400; line-height: 1.2em; letter-spacing: -.02em;}
    /* font weight utilities */
    .fw-200{ font-weight: 200; }
    .fw-300{ font-weight: 300; }
    .fw-400{ font-weight: 400; }
    .fw-500{ font-weight: 500; }
    .fw-600{ font-weight: 600; }
    .fw-700{ font-weight: 700; }
    .fw-800{ font-weight: 800; }
    .fw-900{ font-weight: 900; }
    /* Max Width in rem with 5rem increments */
    .max-w-5 { max-width: 5rem; }
    .max-w-10 { max-width: 10rem; }
    .max-w-15 { max-width: 15rem; }
    .max-w-20 { max-width: 20rem; }
    .max-w-25 { max-width: 25rem; }
    .max-w-30 { max-width: 30rem; }
    .max-w-35 { max-width: 35rem; }
    .max-w-40 { max-width: 40rem; }
    .max-w-45 { max-width: 45rem; }
    .max-w-50 { max-width: 50rem; }
    .max-w-55 { max-width: 55rem; }
    .max-w-60 { max-width: 60rem; }
    .max-w-65 { max-width: 65rem; }
    .max-w-70 { max-width: 70rem; }
    .max-w-75 { max-width: 75rem; }
    .max-w-80 { max-width: 80rem; }
    .max-w-85 { max-width: 85rem; }
    .max-w-90 { max-width: 90rem; }
    .max-w-95 { max-width: 95rem; }
    .max-w-100 { max-width: 100rem; }

    /* Additional common max-width values */
    .max-w-none { max-width: none; }
    .max-w-full { max-width: 100%; }
    .max-w-screen { max-width: 100vw; }



    /* Overflow utilities */
    .overflow-hidden { overflow: hidden; }
    .overflow-auto { overflow: auto; }
    .overflow-scroll { overflow: scroll; }
    .overflow-visible { overflow: visible; }
    .overflow-x-hidden { overflow-x: hidden; }
    .overflow-y-hidden { overflow-y: hidden; }
    .overflow-x-auto { overflow-x: auto; }
    .overflow-y-auto { overflow-y: auto; }
    .overflow-x-scroll { overflow-x: scroll; }
    .overflow-y-scroll { overflow-y: scroll; }

    /* Min Height in rem with 5rem increments */
    .min-h-5 { min-height: 5rem; }
    .min-h-10 { min-height: 10rem; }
    .min-h-15 { min-height: 15rem; }
    .min-h-20 { min-height: 20rem; }
    .min-h-25 { min-height: 25rem; }
    .min-h-30 { min-height: 30rem; }
    .min-h-35 { min-height: 35rem; }
    .min-h-40 { min-height: 40rem; }
    .min-h-45 { min-height: 45rem; }
    .min-h-50 { min-height: 50rem; }
    .min-h-55 { min-height: 55rem; }
    .min-h-60 { min-height: 60rem; }
    .min-h-65 { min-height: 65rem; }
    .min-h-70 { min-height: 70rem; }
    .min-h-75 { min-height: 75rem; }
    .min-h-80 { min-height: 80rem; }
    .min-h-85 { min-height: 85rem; }
    .min-h-90 { min-height: 90rem; }
    .min-h-95 { min-height: 95rem; }
    .min-h-100 { min-height: 100rem; }

    /* Additional common min-height values */
    .min-h-screen { min-height: 100vh; }
    .min-h-50vh { min-height: 50vh; }
    .min-h-25vh { min-height: 25vh; }
    .min-h-full { min-height: 100%; }
    
    /* Max Height in rem with 5rem increments */
    .max-h-5 { max-height: 5rem; }
    .max-h-10 { max-height: 10rem; }
    .max-h-15 { max-height: 15rem; }
    .max-h-20 { max-height: 20rem; }
    .max-h-25 { max-height: 25rem; }
    .max-h-30 { max-height: 30rem; }
    .max-h-35 { max-height: 35rem; }
    .max-h-40 { max-height: 40rem; }
    .max-h-45 { max-height: 45rem; }
    .max-h-50 { max-height: 50rem; }
    .max-h-55 { max-height: 55rem; }
    .max-h-60 { max-height: 60rem; }
    .max-h-65 { max-height: 65rem; }
    .max-h-70 { max-height: 70rem; }
    .max-h-75 { max-height: 75rem; }
    .max-h-80 { max-height: 80rem; }
    .max-h-85 { max-height: 85rem; }
    .max-h-90 { max-height: 90rem; }
    .max-h-95 { max-height: 95rem; }
    .max-h-100 { max-height: 100rem; }

    /* Additional common max-height values */
    .max-h-none { max-height: none; }
    .max-h-full { max-height: 100%; }
    .max-h-screen { max-height: 100vh; }
    .h-full { height: 100%; }
    /* Width utilities */
    .w-auto { width: auto; }
    .w-full {width: 100%}
    /* Position utilities */
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .static { position: static; }
    .sticky { position: sticky; }
    /* Sticky top positioning with spacing variables */
    .sticky-top-5xs { top: var(--space-5xs); }
    .sticky-top-4xs { top: var(--space-4xs); }
    .sticky-top-3xs {  top: var(--space-3xs); }
    .sticky-top-2xs {top: var(--space-2xs); }
    .sticky-top-xs { top: var(--space-xs); }
    .sticky-top-s {  top: var(--space-s); }
    .sticky-top-m {top: var(--space-m); }
    .sticky-top-l { top: var(--space-l); }
    .sticky-top-xl {top: var(--space-xl); }
    .sticky-top-2xl { top: var(--space-2xl); }
    .sticky-top-3xl { top: var(--space-3xl); }
    /* Stiky bottom */
    .bottom-top-5xs {  bottom: var(--space-5xs); }
    .bottom-top-4xs {  bottom: var(--space-4xs); }
    .bottom-top-3xs { bottom: var(--space-3xs); }
    .bottom-top-2xs { bottom: var(--space-2xs); }
    .bottom-top-xs {  bottom: var(--space-xs); }
    .bottom-top-s { bottom: var(--space-s); }
    .bottom-top-m { bottom: var(--space-m); }
    .bottom-top-l { bottom: var(--space-l); }
    .bottom-top-xl { bottom: var(--space-xl); }
    .bottom-top-2xl { bottom: var(--space-2xl); }
    .bottom-top-3xl { bottom: var(--space-3xl); }

    /* 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: auto; }
    .z-negative { z-index: -1; }

/* Border styles */
.border-radius-s{
    border-radius: var(--space-s);
}
/* Tablet breakpoint - 768px and up (over 767px) */
@media (min-width: 768px) {
    /* Padding Classes */
    .md\:p-0{ padding:0;}
    .md\:p-5xs { padding: var(--space-5xs); }
    .md\:p-4xs { padding: var(--space-4xs); }
    .md\:p-3xs { padding: var(--space-3xs); }
    .md\:p-2xs { padding: var(--space-2xs); }
    .md\:p-xs { padding: var(--space-xs); }
    .md\:p-s { padding: var(--space-s); }
    .md\:p-m { padding: var(--space-m); }
    .md\:p-l { padding: var(--space-l); }
    .md\:p-xl { padding: var(--space-xl); }
    .md\:p-2xl { padding: var(--space-2xl); }
    .md\:p-3xl { padding: var(--space-3xl); }

    .md\:pt-0{ padding-top:0;}
    .md\:pt-5xs { padding-top: var(--space-5xs); }
    .md\:pt-4xs { padding-top: var(--space-4xs); }
    .md\:pt-3xs { padding-top: var(--space-3xs); }
    .md\:pt-2xs { padding-top: var(--space-2xs); }
    .md\:pt-xs { padding-top: var(--space-xs); }
    .md\:pt-s { padding-top: var(--space-s); }
    .md\:pt-m { padding-top: var(--space-m); }
    .md\:pt-l { padding-top: var(--space-l); }
    .md\:pt-xl { padding-top: var(--space-xl); }
    .md\:pt-2xl { padding-top: var(--space-2xl); }
    .md\:pt-3xl { padding-top: var(--space-3xl); }

    .md\:pr-0{ padding-right:0;}
    .md\:pr-5xs { padding-right: var(--space-5xs); }
    .md\:pr-4xs { padding-right: var(--space-4xs); }
    .md\:pr-3xs { padding-right: var(--space-3xs); }
    .md\:pr-2xs { padding-right: var(--space-2xs); }
    .md\:pr-xs { padding-right: var(--space-xs); }
    .md\:pr-s { padding-right: var(--space-s); }
    .md\:pr-m { padding-right: var(--space-m); }
    .md\:pr-l { padding-right: var(--space-l); }
    .md\:pr-xl { padding-right: var(--space-xl); }
    .md\:pr-2xl { padding-right: var(--space-2xl); }
    .md\:pr-3xl { padding-right: var(--space-3xl); }

    .md\:pb-0{ padding-bottom:0;}
    .md\:pb-5xs { padding-bottom: var(--space-5xs); }
    .md\:pb-4xs { padding-bottom: var(--space-4xs); }
    .md\:pb-3xs { padding-bottom: var(--space-3xs); }
    .md\:pb-2xs { padding-bottom: var(--space-2xs); }
    .md\:pb-xs { padding-bottom: var(--space-xs); }
    .md\:pb-s { padding-bottom: var(--space-s); }
    .md\:pb-m { padding-bottom: var(--space-m); }
    .md\:pb-l { padding-bottom: var(--space-l); }
    .md\:pb-xl { padding-bottom: var(--space-xl); }
    .md\:pb-2xl { padding-bottom: var(--space-2xl); }
    .md\:pb-3xl { padding-bottom: var(--space-3xl); }

    .md\:pl-0{ padding-left:0;}
    .md\:pl-5xs { padding-left: var(--space-5xs); }
    .md\:pl-4xs { padding-left: var(--space-4xs); }
    .md\:pl-3xs { padding-left: var(--space-3xs); }
    .md\:pl-2xs { padding-left: var(--space-2xs); }
    .md\:pl-xs { padding-left: var(--space-xs); }
    .md\:pl-s { padding-left: var(--space-s); }
    .md\:pl-m { padding-left: var(--space-m); }
    .md\:pl-l { padding-left: var(--space-l); }
    .md\:pl-xl { padding-left: var(--space-xl); }
    .md\:pl-2xl { padding-left: var(--space-2xl); }
    .md\:pl-3xl { padding-left: var(--space-3xl); }

    .md\:px-0{ padding-left:0; padding-right:0;}
    .md\:px-5xs { padding-left: var(--space-5xs); padding-right: var(--space-5xs); }
    .md\:px-4xs { padding-left: var(--space-4xs); padding-right: var(--space-4xs); }
    .md\:px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
    .md\:px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
    .md\:px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .md\:px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
    .md\:px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
    .md\:px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
    .md\:px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .md\:px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
    .md\:px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

    .md\:py-0{ padding-top:0; padding-bottom:0;}
    .md\:py-5xs { padding-top: var(--space-5xs); padding-bottom: var(--space-5xs); }
    .md\:py-4xs { padding-top: var(--space-4xs); padding-bottom: var(--space-4xs); }
    .md\:py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
    .md\:py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
    .md\:py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .md\:py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
    .md\:py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
    .md\:py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
    .md\:py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .md\:py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
    .md\:py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

    /* Padding in rem with 10rem increments */
    .md\:p-10 { padding: 10rem; }
    .md\:p-20 { padding: 20rem; }
    .md\:p-30 { padding: 30rem; }
    .md\:p-40 { padding: 40rem; }
    .md\:p-50 { padding: 50rem; }
    .md\:p-60 { padding: 60rem; }
    .md\:p-70 { padding: 70rem; }
    .md\:p-80 { padding: 80rem; }
    .md\:p-90 { padding: 90rem; }
    .md\:p-100 { padding: 100rem; }

    .md\:pt-10 { padding-top: 10rem; }
    .md\:pt-20 { padding-top: 20rem; }
    .md\:pt-30 { padding-top: 30rem; }
    .md\:pt-40 { padding-top: 40rem; }
    .md\:pt-50 { padding-top: 50rem; }
    .md\:pt-60 { padding-top: 60rem; }
    .md\:pt-70 { padding-top: 70rem; }
    .md\:pt-80 { padding-top: 80rem; }
    .md\:pt-90 { padding-top: 90rem; }
    .md\:pt-100 { padding-top: 100rem; }

    .md\:pr-10 { padding-right: 10rem; }
    .md\:pr-20 { padding-right: 20rem; }
    .md\:pr-30 { padding-right: 30rem; }
    .md\:pr-40 { padding-right: 40rem; }
    .md\:pr-50 { padding-right: 50rem; }
    .md\:pr-60 { padding-right: 60rem; }
    .md\:pr-70 { padding-right: 70rem; }
    .md\:pr-80 { padding-right: 80rem; }
    .md\:pr-90 { padding-right: 90rem; }
    .md\:pr-100 { padding-right: 100rem; }

    .md\:pb-10 { padding-bottom: 10rem; }
    .md\:pb-20 { padding-bottom: 20rem; }
    .md\:pb-30 { padding-bottom: 30rem; }
    .md\:pb-40 { padding-bottom: 40rem; }
    .md\:pb-50 { padding-bottom: 50rem; }
    .md\:pb-60 { padding-bottom: 60rem; }
    .md\:pb-70 { padding-bottom: 70rem; }
    .md\:pb-80 { padding-bottom: 80rem; }
    .md\:pb-90 { padding-bottom: 90rem; }
    .md\:pb-100 { padding-bottom: 100rem; }

    .md\:pl-10 { padding-left: 10rem; }
    .md\:pl-20 { padding-left: 20rem; }
    .md\:pl-30 { padding-left: 30rem; }
    .md\:pl-40 { padding-left: 40rem; }
    .md\:pl-50 { padding-left: 50rem; }
    .md\:pl-60 { padding-left: 60rem; }
    .md\:pl-70 { padding-left: 70rem; }
    .md\:pl-80 { padding-left: 80rem; }
    .md\:pl-90 { padding-left: 90rem; }
    .md\:pl-100 { padding-left: 100rem; }

    .md\:px-10 { padding-left: 10rem; padding-right: 10rem; }
    .md\:px-20 { padding-left: 20rem; padding-right: 20rem; }
    .md\:px-30 { padding-left: 30rem; padding-right: 30rem; }
    .md\:px-40 { padding-left: 40rem; padding-right: 40rem; }
    .md\:px-50 { padding-left: 50rem; padding-right: 50rem; }
    .md\:px-60 { padding-left: 60rem; padding-right: 60rem; }
    .md\:px-70 { padding-left: 70rem; padding-right: 70rem; }
    .md\:px-80 { padding-left: 80rem; padding-right: 80rem; }
    .md\:px-90 { padding-left: 90rem; padding-right: 90rem; }
    .md\:px-100 { padding-left: 100rem; padding-right: 100rem; }

    .md\:py-10 { padding-top: 10rem; padding-bottom: 10rem; }
    .md\:py-20 { padding-top: 20rem; padding-bottom: 20rem; }
    .md\:py-30 { padding-top: 30rem; padding-bottom: 30rem; }
    .md\:py-40 { padding-top: 40rem; padding-bottom: 40rem; }
    .md\:py-50 { padding-top: 50rem; padding-bottom: 50rem; }
    .md\:py-60 { padding-top: 60rem; padding-bottom: 60rem; }
    .md\:py-70 { padding-top: 70rem; padding-bottom: 70rem; }
    .md\:py-80 { padding-top: 80rem; padding-bottom: 80rem; }
    .md\:py-90 { padding-top: 90rem; padding-bottom: 90rem; }
    .md\:py-100 { padding-top: 100rem; padding-bottom: 100rem; }

    /* Section Padding */
    .md\:px-section { padding-left: var(--section-pad--hor); padding-right: var(--section-pad--hor); }
    .md\:py-section { padding-bottom: var(--section-pad--ver); padding-top: var(--section-pad--ver); }
    .md\:p-section {
        padding-left: var(--section-pad--hor);
        padding-right: var(--section-pad--hor);
        padding-bottom: var(--section-pad--ver);
        padding-top: var(--section-pad--ver);
    }

    /* Gap Classes */
    .md\:gap-5xs { gap: var(--space-5xs); }
    .md\:gap-4xs { gap: var(--space-4xs); }
    .md\:gap-3xs { gap: var(--space-3xs); }
    .md\:gap-2xs { gap: var(--space-2xs); }
    .md\:gap-xs { gap: var(--space-xs); }
    .md\:gap-s { gap: var(--space-s); }
    .md\:gap-m { gap: var(--space-m); }
    .md\:gap-l { gap: var(--space-l); }
    .md\:gap-xl { gap: var(--space-xl); }
    .md\:gap-2xl { gap: var(--space-2xl); }
    .md\:gap-3xl { gap: var(--space-3xl); }

    .md\:gap-x-5xs { column-gap: var(--space-5xs); }
    .md\:gap-x-4xs { column-gap: var(--space-4xs); }
    .md\:gap-x-3xs { column-gap: var(--space-3xs); }
    .md\:gap-x-2xs { column-gap: var(--space-2xs); }
    .md\:gap-x-xs { column-gap: var(--space-xs); }
    .md\:gap-x-s { column-gap: var(--space-s); }
    .md\:gap-x-m { column-gap: var(--space-m); }
    .md\:gap-x-l { column-gap: var(--space-l); }
    .md\:gap-x-xl { column-gap: var(--space-xl); }
    .md\:gap-x-2xl { column-gap: var(--space-2xl); }
    .md\:gap-x-3xl { column-gap: var(--space-3xl); }

    .md\:gap-y-5xs { row-gap: var(--space-5xs); }
    .md\:gap-y-4xs { row-gap: var(--space-4xs); }
    .md\:gap-y-3xs { row-gap: var(--space-3xs); }
    .md\:gap-y-2xs { row-gap: var(--space-2xs); }
    .md\:gap-y-xs { row-gap: var(--space-xs); }
    .md\:gap-y-s { row-gap: var(--space-s); }
    .md\:gap-y-m { row-gap: var(--space-m); }
    .md\:gap-y-l { row-gap: var(--space-l); }
    .md\:gap-y-xl { row-gap: var(--space-xl); }
    .md\:gap-y-2xl { row-gap: var(--space-2xl); }
    .md\:gap-y-3xl { row-gap: var(--space-3xl); }

    /* Flex Utilities */

    /* Display */
    .md\:block { display: block; }
    .md\:inline-block { display: inline-block; }
    .md\:inline { display: inline; }
    .md\:flex { display: flex; }
    .md\:inline-flex { display: inline-flex; }
    .md\:hidden { display: none; }

    /* Flex Direction */
    .md\:flex-row { flex-direction: row; }
    .md\:flex-row-reverse { flex-direction: row-reverse; }
    .md\:flex-col { flex-direction: column; }
    .md\:flex-col-reverse { flex-direction: column-reverse; }
    .md\:flex-wrap { flex-wrap: wrap; }
    .md\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .md\:flex-nowrap { flex-wrap: nowrap; }
    .md\:flex-1 { flex: 1 1 0%; }
    .md\:flex-auto { flex: 1 1 auto; }
    .md\:flex-initial { flex: 0 1 auto; }
    .md\:flex-none { flex: none; }
    .md\:grow { flex-grow: 1; }
    .md\:grow-0 { flex-grow: 0; }
    .md\:shrink { flex-shrink: 1; }
    .md\:shrink-0 { flex-shrink: 0; }
    .md\:justify-start { justify-content: flex-start; }
    .md\:justify-end { justify-content: flex-end; }
    .md\:justify-center { justify-content: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:justify-around { justify-content: space-around; }
    .md\:justify-evenly { justify-content: space-evenly; }
    .md\:items-start { align-items: flex-start; }
    .md\:items-end { align-items: flex-end; }
    .md\:items-center { align-items: center; }
    .md\:items-baseline { align-items: baseline; }
    .md\:items-stretch { align-items: stretch; }
    .md\:content-start { align-content: flex-start; }
    .md\:content-end { align-content: flex-end; }
    .md\:content-center { align-content: center; }
    .md\:content-between { align-content: space-between; }
    .md\:content-around { align-content: space-around; }
    .md\:content-evenly { align-content: space-evenly; }

    /* Grid Utilities */
    .md\:grid { display: grid; }
    .md\:inline-grid { display: inline-grid; }
    .md\:grid-cols-xs { grid-template-columns: var(--grid-xs); }
    .md\:grid-cols-s { grid-template-columns: var(--grid-s); }
    .md\:grid-cols-m { grid-template-columns: var(--grid-m); }
    .md\:grid-cols-l { grid-template-columns: var(--grid-l); }
    .md\:grid-cols-xl { grid-template-columns: var(--grid-xl); }
    .md\:grid-cols-2xl { grid-template-columns: var(--grid-2xl); }
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
    .md\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .md\:grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
    .md\:grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
    .md\:grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
    .md\:grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
    .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-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-full { grid-row: 1 / -1; }
    .md\:col-start-1 { grid-column-start: 1; }
    .md\:col-start-2 { grid-column-start: 2; }
    .md\:col-start-3 { grid-column-start: 3; }
    .md\:col-start-4 { grid-column-start: 4; }
    .md\:col-start-5 { grid-column-start: 5; }
    .md\:col-start-6 { grid-column-start: 6; }
    .md\:col-start-auto { grid-column-start: auto; }
    .md\:col-end-1 { grid-column-end: 1; }
    .md\:col-end-2 { grid-column-end: 2; }
    .md\:col-end-3 { grid-column-end: 3; }
    .md\:col-end-4 { grid-column-end: 4; }
    .md\:col-end-5 { grid-column-end: 5; }
    .md\:col-end-6 { grid-column-end: 6; }
    .md\:col-end-auto { grid-column-end: auto; }
    .md\:row-start-1 { grid-row-start: 1; }
    .md\:row-start-2 { grid-row-start: 2; }
    .md\:row-start-3 { grid-row-start: 3; }
    .md\:row-start-4 { grid-row-start: 4; }
    .md\:row-start-5 { grid-row-start: 5; }
    .md\:row-start-6 { grid-row-start: 6; }
    .md\:row-start-auto { grid-row-start: auto; }
    .md\:row-end-1 { grid-row-end: 1; }
    .md\:row-end-2 { grid-row-end: 2; }
    .md\:row-end-3 { grid-row-end: 3; }
    .md\:row-end-4 { grid-row-end: 4; }
    .md\:row-end-5 { grid-row-end: 5; }
    .md\:row-end-6 { grid-row-end: 6; }
    .md\:row-end-auto { grid-row-end: auto; }
    .md\:grid-flow-row { grid-auto-flow: row; }
    .md\:grid-flow-col { grid-auto-flow: column; }
    .md\:grid-flow-row-dense { grid-auto-flow: row dense; }
    .md\:grid-flow-col-dense { grid-auto-flow: column dense; }
    .md\:auto-cols-auto { grid-auto-columns: auto; }
    .md\:auto-cols-min { grid-auto-columns: min-content; }
    .md\:auto-cols-max { grid-auto-columns: max-content; }
    .md\:auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }
    .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\:place-items-start { place-items: start; }
    .md\:place-items-end { place-items: end; }
    .md\:place-items-center { place-items: center; }
    .md\:place-items-stretch { place-items: stretch; }
    .md\:place-content-start { place-content: start; }
    .md\:place-content-end { place-content: end; }
    .md\:place-content-center { place-content: center; }
    .md\:place-content-between { place-content: space-between; }
    .md\:place-content-around { place-content: space-around; }
    .md\:place-content-evenly { place-content: space-evenly; }
    .md\:place-content-stretch { place-content: stretch; }
    .md\:place-self-auto { place-self: auto; }
    .md\:place-self-start { place-self: start; }
    .md\:place-self-end { place-self: end; }
    .md\:place-self-center { place-self: center; }
    .md\:place-self-stretch { place-self: stretch; }
    .md\:justify-items-start { justify-items: start; }
    .md\:justify-items-end { justify-items: end; }
    .md\:justify-items-center { justify-items: center; }
    .md\:justify-items-stretch { justify-items: stretch; }
    .md\:justify-self-auto { justify-self: auto; }
    .md\:justify-self-start { justify-self: start; }
    .md\:justify-self-end { justify-self: end; }
    .md\:justify-self-center { justify-self: center; }
    .md\:justify-self-stretch { justify-self: stretch; }

    /* Text Alignment */
    .md\:text-left { text-align: left; }
    .md\:text-center { text-align: center; }
    .md\:text-right { text-align: right; }
    .md\:text-justify { text-align: justify; }
    .md\:text-start { text-align: start; }
    .md\:text-end { text-align: end; }

    /* Text Transform */
    .md\:uppercase { text-transform: uppercase; }
    .md\:lowercase { text-transform: lowercase; }
    .md\:capitalize { text-transform: capitalize; }
    .md\:normal-case { text-transform: none; }

    /* Max Width */
    .md\:max-w-5 { max-width: 5rem; }
    .md\:max-w-10 { max-width: 10rem; }
    .md\:max-w-15 { max-width: 15rem; }
    .md\:max-w-20 { max-width: 20rem; }
    .md\:max-w-25 { max-width: 25rem; }
    .md\:max-w-30 { max-width: 30rem; }
    .md\:max-w-35 { max-width: 35rem; }
    .md\:max-w-40 { max-width: 40rem; }
    .md\:max-w-45 { max-width: 45rem; }
    .md\:max-w-50 { max-width: 50rem; }
    .md\:max-w-55 { max-width: 55rem; }
    .md\:max-w-60 { max-width: 60rem; }
    .md\:max-w-65 { max-width: 65rem; }
    .md\:max-w-70 { max-width: 70rem; }
    .md\:max-w-75 { max-width: 75rem; }
    .md\:max-w-80 { max-width: 80rem; }
    .md\:max-w-85 { max-width: 85rem; }
    .md\:max-w-90 { max-width: 90rem; }
    .md\:max-w-95 { max-width: 95rem; }
    .md\:max-w-100 { max-width: 100rem; }
    .md\:max-w-none { max-width: none; }
    .md\:max-w-full { max-width: 100%; }
    .md\:max-w-screen { max-width: 100vw; }

    /* Min Height */
    .md\:min-h-5 { min-height: 5rem; }
    .md\:min-h-10 { min-height: 10rem; }
    .md\:min-h-15 { min-height: 15rem; }
    .md\:min-h-20 { min-height: 20rem; }
    .md\:min-h-25 { min-height: 25rem; }
    .md\:min-h-30 { min-height: 30rem; }
    .md\:min-h-35 { min-height: 35rem; }
    .md\:min-h-40 { min-height: 40rem; }
    .md\:min-h-45 { min-height: 45rem; }
    .md\:min-h-50 { min-height: 50rem; }
    .md\:min-h-55 { min-height: 55rem; }
    .md\:min-h-60 { min-height: 60rem; }
    .md\:min-h-65 { min-height: 65rem; }
    .md\:min-h-70 { min-height: 70rem; }
    .md\:min-h-75 { min-height: 75rem; }
    .md\:min-h-80 { min-height: 80rem; }
    .md\:min-h-85 { min-height: 85rem; }
    .md\:min-h-90 { min-height: 90rem; }
    .md\:min-h-95 { min-height: 95rem; }
    .md\:min-h-100 { min-height: 100rem; }
    .md\:min-h-screen { min-height: 100vh; }
    .md\:min-h-full { min-height: 100%; }

    /* Width utilities */
    .md\:w-auto { width: auto; }
    .md\:w-full { width: 100%; }

    /* Position utilities */
    .md\:sticky { position: sticky; top: 0; }
    .md\:sticky-top-5xs { position: sticky; top: var(--space-5xs); }
    .md\:sticky-top-4xs { position: sticky; top: var(--space-4xs); }
    .md\:sticky-top-3xs { position: sticky; top: var(--space-3xs); }
    .md\:sticky-top-2xs { position: sticky; top: var(--space-2xs); }
    .md\:sticky-top-xs { position: sticky; top: var(--space-xs); }
    .md\:sticky-top-s { position: sticky; top: var(--space-s); }
    .md\:sticky-top-m { position: sticky; top: var(--space-m); }
    .md\:sticky-top-l { position: sticky; top: var(--space-l); }
    .md\:sticky-top-xl { position: sticky; top: var(--space-xl); }
    .md\:sticky-top-2xl { position: sticky; top: var(--space-2xl); }
    .md\:sticky-top-3xl { position: sticky; top: var(--space-3xl); }
}

/* Desktop breakpoint - 992px and up (over 991px) */
@media (min-width: 992px) {
    /* Padding Classes */
    .lg\:p-0{ padding:0;}
    .lg\:p-5xs { padding: var(--space-5xs); }
    .lg\:p-4xs { padding: var(--space-4xs); }
    .lg\:p-3xs { padding: var(--space-3xs); }
    .lg\:p-2xs { padding: var(--space-2xs); }
    .lg\:p-xs { padding: var(--space-xs); }
    .lg\:p-s { padding: var(--space-s); }
    .lg\:p-m { padding: var(--space-m); }
    .lg\:p-l { padding: var(--space-l); }
    .lg\:p-xl { padding: var(--space-xl); }
    .lg\:p-2xl { padding: var(--space-2xl); }
    .lg\:p-3xl { padding: var(--space-3xl); }

    .lg\:pt-0{ padding-top:0;}
    .lg\:pt-5xs { padding-top: var(--space-5xs); }
    .lg\:pt-4xs { padding-top: var(--space-4xs); }
    .lg\:pt-3xs { padding-top: var(--space-3xs); }
    .lg\:pt-2xs { padding-top: var(--space-2xs); }
    .lg\:pt-xs { padding-top: var(--space-xs); }
    .lg\:pt-s { padding-top: var(--space-s); }
    .lg\:pt-m { padding-top: var(--space-m); }
    .lg\:pt-l { padding-top: var(--space-l); }
    .lg\:pt-xl { padding-top: var(--space-xl); }
    .lg\:pt-2xl { padding-top: var(--space-2xl); }
    .lg\:pt-3xl { padding-top: var(--space-3xl); }

    .lg\:pr-0{ padding-right:0;}
    .lg\:pr-5xs { padding-right: var(--space-5xs); }
    .lg\:pr-4xs { padding-right: var(--space-4xs); }
    .lg\:pr-3xs { padding-right: var(--space-3xs); }
    .lg\:pr-2xs { padding-right: var(--space-2xs); }
    .lg\:pr-xs { padding-right: var(--space-xs); }
    .lg\:pr-s { padding-right: var(--space-s); }
    .lg\:pr-m { padding-right: var(--space-m); }
    .lg\:pr-l { padding-right: var(--space-l); }
    .lg\:pr-xl { padding-right: var(--space-xl); }
    .lg\:pr-2xl { padding-right: var(--space-2xl); }
    .lg\:pr-3xl { padding-right: var(--space-3xl); }

    .lg\:pb-0{ padding-bottom:0;}
    .lg\:pb-5xs { padding-bottom: var(--space-5xs); }
    .lg\:pb-4xs { padding-bottom: var(--space-4xs); }
    .lg\:pb-3xs { padding-bottom: var(--space-3xs); }
    .lg\:pb-2xs { padding-bottom: var(--space-2xs); }
    .lg\:pb-xs { padding-bottom: var(--space-xs); }
    .lg\:pb-s { padding-bottom: var(--space-s); }
    .lg\:pb-m { padding-bottom: var(--space-m); }
    .lg\:pb-l { padding-bottom: var(--space-l); }
    .lg\:pb-xl { padding-bottom: var(--space-xl); }
    .lg\:pb-2xl { padding-bottom: var(--space-2xl); }
    .lg\:pb-3xl { padding-bottom: var(--space-3xl); }

    .lg\:pl-0{ padding-left:0;}
    .lg\:pl-5xs { padding-left: var(--space-5xs); }
    .lg\:pl-4xs { padding-left: var(--space-4xs); }
    .lg\:pl-3xs { padding-left: var(--space-3xs); }
    .lg\:pl-2xs { padding-left: var(--space-2xs); }
    .lg\:pl-xs { padding-left: var(--space-xs); }
    .lg\:pl-s { padding-left: var(--space-s); }
    .lg\:pl-m { padding-left: var(--space-m); }
    .lg\:pl-l { padding-left: var(--space-l); }
    .lg\:pl-xl { padding-left: var(--space-xl); }
    .lg\:pl-2xl { padding-left: var(--space-2xl); }
    .lg\:pl-3xl { padding-left: var(--space-3xl); }

    .lg\:px-0{ padding-left:0; padding-right:0;}
    .lg\:px-5xs { padding-left: var(--space-5xs); padding-right: var(--space-5xs); }
    .lg\:px-4xs { padding-left: var(--space-4xs); padding-right: var(--space-4xs); }
    .lg\:px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
    .lg\:px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
    .lg\:px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .lg\:px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
    .lg\:px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
    .lg\:px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
    .lg\:px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .lg\:px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
    .lg\:px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

    .lg\:py-0{ padding-top:0; padding-bottom:0;}
    .lg\:py-5xs { padding-top: var(--space-5xs); padding-bottom: var(--space-5xs); }
    .lg\:py-4xs { padding-top: var(--space-4xs); padding-bottom: var(--space-4xs); }
    .lg\:py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
    .lg\:py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
    .lg\:py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .lg\:py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
    .lg\:py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
    .lg\:py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
    .lg\:py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .lg\:py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
    .lg\:py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

    /* Padding in rem with 10rem increments */
    .lg\:p-10 { padding: 10rem; }
    .lg\:p-20 { padding: 20rem; }
    .lg\:p-30 { padding: 30rem; }
    .lg\:p-40 { padding: 40rem; }
    .lg\:p-50 { padding: 50rem; }
    .lg\:p-60 { padding: 60rem; }
    .lg\:p-70 { padding: 70rem; }
    .lg\:p-80 { padding: 80rem; }
    .lg\:p-90 { padding: 90rem; }
    .lg\:p-100 { padding: 100rem; }

    .lg\:pt-10 { padding-top: 10rem; }
    .lg\:pt-20 { padding-top: 20rem; }
    .lg\:pt-30 { padding-top: 30rem; }
    .lg\:pt-40 { padding-top: 40rem; }
    .lg\:pt-50 { padding-top: 50rem; }
    .lg\:pt-60 { padding-top: 60rem; }
    .lg\:pt-70 { padding-top: 70rem; }
    .lg\:pt-80 { padding-top: 80rem; }
    .lg\:pt-90 { padding-top: 90rem; }
    .lg\:pt-100 { padding-top: 100rem; }

    .lg\:pr-10 { padding-right: 10rem; }
    .lg\:pr-20 { padding-right: 20rem; }
    .lg\:pr-30 { padding-right: 30rem; }
    .lg\:pr-40 { padding-right: 40rem; }
    .lg\:pr-50 { padding-right: 50rem; }
    .lg\:pr-60 { padding-right: 60rem; }
    .lg\:pr-70 { padding-right: 70rem; }
    .lg\:pr-80 { padding-right: 80rem; }
    .lg\:pr-90 { padding-right: 90rem; }
    .lg\:pr-100 { padding-right: 100rem; }

    .lg\:pb-10 { padding-bottom: 10rem; }
    .lg\:pb-20 { padding-bottom: 20rem; }
    .lg\:pb-30 { padding-bottom: 30rem; }
    .lg\:pb-40 { padding-bottom: 40rem; }
    .lg\:pb-50 { padding-bottom: 50rem; }
    .lg\:pb-60 { padding-bottom: 60rem; }
    .lg\:pb-70 { padding-bottom: 70rem; }
    .lg\:pb-80 { padding-bottom: 80rem; }
    .lg\:pb-90 { padding-bottom: 90rem; }
    .lg\:pb-100 { padding-bottom: 100rem; }

    .lg\:pl-10 { padding-left: 10rem; }
    .lg\:pl-20 { padding-left: 20rem; }
    .lg\:pl-30 { padding-left: 30rem; }
    .lg\:pl-40 { padding-left: 40rem; }
    .lg\:pl-50 { padding-left: 50rem; }
    .lg\:pl-60 { padding-left: 60rem; }
    .lg\:pl-70 { padding-left: 70rem; }
    .lg\:pl-80 { padding-left: 80rem; }
    .lg\:pl-90 { padding-left: 90rem; }
    .lg\:pl-100 { padding-left: 100rem; }

    .lg\:px-10 { padding-left: 10rem; padding-right: 10rem; }
    .lg\:px-20 { padding-left: 20rem; padding-right: 20rem; }
    .lg\:px-30 { padding-left: 30rem; padding-right: 30rem; }
    .lg\:px-40 { padding-left: 40rem; padding-right: 40rem; }
    .lg\:px-50 { padding-left: 50rem; padding-right: 50rem; }
    .lg\:px-60 { padding-left: 60rem; padding-right: 60rem; }
    .lg\:px-70 { padding-left: 70rem; padding-right: 70rem; }
    .lg\:px-80 { padding-left: 80rem; padding-right: 80rem; }
    .lg\:px-90 { padding-left: 90rem; padding-right: 90rem; }
    .lg\:px-100 { padding-left: 100rem; padding-right: 100rem; }

    .lg\:py-10 { padding-top: 10rem; padding-bottom: 10rem; }
    .lg\:py-20 { padding-top: 20rem; padding-bottom: 20rem; }
    .lg\:py-30 { padding-top: 30rem; padding-bottom: 30rem; }
    .lg\:py-40 { padding-top: 40rem; padding-bottom: 40rem; }
    .lg\:py-50 { padding-top: 50rem; padding-bottom: 50rem; }
    .lg\:py-60 { padding-top: 60rem; padding-bottom: 60rem; }
    .lg\:py-70 { padding-top: 70rem; padding-bottom: 70rem; }
    .lg\:py-80 { padding-top: 80rem; padding-bottom: 80rem; }
    .lg\:py-90 { padding-top: 90rem; padding-bottom: 90rem; }
    .lg\:py-100 { padding-top: 100rem; padding-bottom: 100rem; }

    /* Section Padding */
    .lg\:px-section { padding-left: var(--section-pad--hor); padding-right: var(--section-pad--hor); }
    .lg\:py-section { padding-bottom: var(--section-pad--ver); padding-top: var(--section-pad--ver); }
    .lg\:p-section {
        padding-left: var(--section-pad--hor);
        padding-right: var(--section-pad--hor);
        padding-bottom: var(--section-pad--ver);
        padding-top: var(--section-pad--ver);
    }

    /* Gap Classes */
    .lg\:gap-5xs { gap: var(--space-5xs); }
    .lg\:gap-4xs { gap: var(--space-4xs); }
    .lg\:gap-3xs { gap: var(--space-3xs); }
    .lg\:gap-2xs { gap: var(--space-2xs); }
    .lg\:gap-xs { gap: var(--space-xs); }
    .lg\:gap-s { gap: var(--space-s); }
    .lg\:gap-m { gap: var(--space-m); }
    .lg\:gap-l { gap: var(--space-l); }
    .lg\:gap-xl { gap: var(--space-xl); }
    .lg\:gap-2xl { gap: var(--space-2xl); }
    .lg\:gap-3xl { gap: var(--space-3xl); }

    .lg\:gap-x-5xs { column-gap: var(--space-5xs); }
    .lg\:gap-x-4xs { column-gap: var(--space-4xs); }
    .lg\:gap-x-3xs { column-gap: var(--space-3xs); }
    .lg\:gap-x-2xs { column-gap: var(--space-2xs); }
    .lg\:gap-x-xs { column-gap: var(--space-xs); }
    .lg\:gap-x-s { column-gap: var(--space-s); }
    .lg\:gap-x-m { column-gap: var(--space-m); }
    .lg\:gap-x-l { column-gap: var(--space-l); }
    .lg\:gap-x-xl { column-gap: var(--space-xl); }
    .lg\:gap-x-2xl { column-gap: var(--space-2xl); }
    .lg\:gap-x-3xl { column-gap: var(--space-3xl); }

    .lg\:gap-y-5xs { row-gap: var(--space-5xs); }
    .lg\:gap-y-4xs { row-gap: var(--space-4xs); }
    .lg\:gap-y-3xs { row-gap: var(--space-3xs); }
    .lg\:gap-y-2xs { row-gap: var(--space-2xs); }
    .lg\:gap-y-xs { row-gap: var(--space-xs); }
    .lg\:gap-y-s { row-gap: var(--space-s); }
    .lg\:gap-y-m { row-gap: var(--space-m); }
    .lg\:gap-y-l { row-gap: var(--space-l); }
    .lg\:gap-y-xl { row-gap: var(--space-xl); }
    .lg\:gap-y-2xl { row-gap: var(--space-2xl); }
    .lg\:gap-y-3xl { row-gap: var(--space-3xl); }

    /* Flex Utilities */
    .lg\:flex { display: flex; }
    .lg\:inline-flex { display: inline-flex; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-row-reverse { flex-direction: row-reverse; }
    .lg\:flex-col { flex-direction: column; }
    .lg\:flex-col-reverse { flex-direction: column-reverse; }
    .lg\:flex-wrap { flex-wrap: wrap; }
    .lg\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .lg\:flex-nowrap { flex-wrap: nowrap; }
    .lg\:flex-1 { flex: 1 1 0%; }
    .lg\:flex-auto { flex: 1 1 auto; }
    .lg\:flex-initial { flex: 0 1 auto; }
    .lg\:flex-none { flex: none; }
    .lg\:grow { flex-grow: 1; }
    .lg\:grow-0 { flex-grow: 0; }
    .lg\:shrink { flex-shrink: 1; }
    .lg\:shrink-0 { flex-shrink: 0; }
    .lg\:justify-start { justify-content: flex-start; }
    .lg\:justify-end { justify-content: flex-end; }
    .lg\:justify-center { justify-content: center; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:justify-around { justify-content: space-around; }
    .lg\:justify-evenly { justify-content: space-evenly; }
    .lg\:items-start { align-items: flex-start; }
    .lg\:items-end { align-items: flex-end; }
    .lg\:items-center { align-items: center; }
    .lg\:items-baseline { align-items: baseline; }
    .lg\:items-stretch { align-items: stretch; }
    .lg\:content-start { align-content: flex-start; }
    .lg\:content-end { align-content: flex-end; }
    .lg\:content-center { align-content: center; }
    .lg\:content-between { align-content: space-between; }
    .lg\:content-around { align-content: space-around; }
    .lg\:content-evenly { align-content: space-evenly; }

    /* Grid Utilities */
    .lg\:grid { display: grid; }
    .lg\:inline-grid { display: inline-grid; }
    .lg\:grid-cols-xs { grid-template-columns: var(--grid-xs); }
    .lg\:grid-cols-s { grid-template-columns: var(--grid-s); }
    .lg\:grid-cols-m { grid-template-columns: var(--grid-m); }
    .lg\:grid-cols-l { grid-template-columns: var(--grid-l); }
    .lg\:grid-cols-xl { grid-template-columns: var(--grid-xl); }
    .lg\:grid-cols-2xl { grid-template-columns: var(--grid-2xl); }
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-full { grid-column: 1 / -1; }
    .lg\:row-span-1 { grid-row: span 1 / span 1; }
    .lg\:row-span-2 { grid-row: span 2 / span 2; }
    .lg\:row-span-3 { grid-row: span 3 / span 3; }
    .lg\:row-span-4 { grid-row: span 4 / span 4; }
    .lg\:row-span-5 { grid-row: span 5 / span 5; }
    .lg\:row-span-6 { grid-row: span 6 / span 6; }
    .lg\:row-span-full { grid-row: 1 / -1; }
    .lg\:col-start-1 { grid-column-start: 1; }
    .lg\:col-start-2 { grid-column-start: 2; }
    .lg\:col-start-3 { grid-column-start: 3; }
    .lg\:col-start-4 { grid-column-start: 4; }
    .lg\:col-start-5 { grid-column-start: 5; }
    .lg\:col-start-6 { grid-column-start: 6; }
    .lg\:col-start-auto { grid-column-start: auto; }
    .lg\:col-end-1 { grid-column-end: 1; }
    .lg\:col-end-2 { grid-column-end: 2; }
    .lg\:col-end-3 { grid-column-end: 3; }
    .lg\:col-end-4 { grid-column-end: 4; }
    .lg\:col-end-5 { grid-column-end: 5; }
    .lg\:col-end-6 { grid-column-end: 6; }
    .lg\:col-end-auto { grid-column-end: auto; }
    .lg\:row-start-1 { grid-row-start: 1; }
    .lg\:row-start-2 { grid-row-start: 2; }
    .lg\:row-start-3 { grid-row-start: 3; }
    .lg\:row-start-4 { grid-row-start: 4; }
    .lg\:row-start-5 { grid-row-start: 5; }
    .lg\:row-start-6 { grid-row-start: 6; }
    .lg\:row-start-auto { grid-row-start: auto; }
    .lg\:row-end-1 { grid-row-end: 1; }
    .lg\:row-end-2 { grid-row-end: 2; }
    .lg\:row-end-3 { grid-row-end: 3; }
    .lg\:row-end-4 { grid-row-end: 4; }
    .lg\:row-end-5 { grid-row-end: 5; }
    .lg\:row-end-6 { grid-row-end: 6; }
    .lg\:row-end-auto { grid-row-end: auto; }
    .lg\:grid-flow-row { grid-auto-flow: row; }
    .lg\:grid-flow-col { grid-auto-flow: column; }
    .lg\:grid-flow-row-dense { grid-auto-flow: row dense; }
    .lg\:grid-flow-col-dense { grid-auto-flow: column dense; }
    .lg\:auto-cols-auto { grid-auto-columns: auto; }
    .lg\:auto-cols-min { grid-auto-columns: min-content; }
    .lg\:auto-cols-max { grid-auto-columns: max-content; }
    .lg\:auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }
    .lg\:auto-rows-auto { grid-auto-rows: auto; }
    .lg\:auto-rows-min { grid-auto-rows: min-content; }
    .lg\:auto-rows-max { grid-auto-rows: max-content; }
    .lg\:auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }
    .lg\:place-items-start { place-items: start; }
    .lg\:place-items-end { place-items: end; }
    .lg\:place-items-center { place-items: center; }
    .lg\:place-items-stretch { place-items: stretch; }
    .lg\:place-content-start { place-content: start; }
    .lg\:place-content-end { place-content: end; }
    .lg\:place-content-center { place-content: center; }
    .lg\:place-content-between { place-content: space-between; }
    .lg\:place-content-around { place-content: space-around; }
    .lg\:place-content-evenly { place-content: space-evenly; }
    .lg\:place-content-stretch { place-content: stretch; }
    .lg\:place-self-auto { place-self: auto; }
    .lg\:place-self-start { place-self: start; }
    .lg\:place-self-end { place-self: end; }
    .lg\:place-self-center { place-self: center; }
    .lg\:place-self-stretch { place-self: stretch; }
    .lg\:justify-items-start { justify-items: start; }
    .lg\:justify-items-end { justify-items: end; }
    .lg\:justify-items-center { justify-items: center; }
    .lg\:justify-items-stretch { justify-items: stretch; }
    .lg\:justify-self-auto { justify-self: auto; }
    .lg\:justify-self-start { justify-self: start; }
    .lg\:justify-self-end { justify-self: end; }
    .lg\:justify-self-center { justify-self: center; }
    .lg\:justify-self-stretch { justify-self: stretch; }

    /* Text Alignment */
    .lg\:text-left { text-align: left; }
    .lg\:text-center { text-align: center; }
    .lg\:text-right { text-align: right; }
    .lg\:text-justify { text-align: justify; }
    .lg\:text-start { text-align: start; }
    .lg\:text-end { text-align: end; }

    /* Text Transform */
    .lg\:uppercase { text-transform: uppercase; }
    .lg\:lowercase { text-transform: lowercase; }
    .lg\:capitalize { text-transform: capitalize; }
    .lg\:normal-case { text-transform: none; }

    /* Max Width */
    .lg\:max-w-5 { max-width: 5rem; }
    .lg\:max-w-10 { max-width: 10rem; }
    .lg\:max-w-15 { max-width: 15rem; }
    .lg\:max-w-20 { max-width: 20rem; }
    .lg\:max-w-25 { max-width: 25rem; }
    .lg\:max-w-30 { max-width: 30rem; }
    .lg\:max-w-35 { max-width: 35rem; }
    .lg\:max-w-40 { max-width: 40rem; }
    .lg\:max-w-45 { max-width: 45rem; }
    .lg\:max-w-50 { max-width: 50rem; }
    .lg\:max-w-55 { max-width: 55rem; }
    .lg\:max-w-60 { max-width: 60rem; }
    .lg\:max-w-65 { max-width: 65rem; }
    .lg\:max-w-70 { max-width: 70rem; }
    .lg\:max-w-75 { max-width: 75rem; }
    .lg\:max-w-80 { max-width: 80rem; }
    .lg\:max-w-85 { max-width: 85rem; }
    .lg\:max-w-90 { max-width: 90rem; }
    .lg\:max-w-95 { max-width: 95rem; }
    .lg\:max-w-100 { max-width: 100rem; }
    .lg\:max-w-none { max-width: none; }
    .lg\:max-w-full { max-width: 100%; }
    .lg\:max-w-screen { max-width: 100vw; }

    /* Min Height */
    .lg\:min-h-5 { min-height: 5rem; }
    .lg\:min-h-10 { min-height: 10rem; }
    .lg\:min-h-15 { min-height: 15rem; }
    .lg\:min-h-20 { min-height: 20rem; }
    .lg\:min-h-25 { min-height: 25rem; }
    .lg\:min-h-30 { min-height: 30rem; }
    .lg\:min-h-35 { min-height: 35rem; }
    .lg\:min-h-40 { min-height: 40rem; }
    .lg\:min-h-45 { min-height: 45rem; }
    .lg\:min-h-50 { min-height: 50rem; }
    .lg\:min-h-55 { min-height: 55rem; }
    .lg\:min-h-60 { min-height: 60rem; }
    .lg\:min-h-65 { min-height: 65rem; }
    .lg\:min-h-70 { min-height: 70rem; }
    .lg\:min-h-75 { min-height: 75rem; }
    .lg\:min-h-80 { min-height: 80rem; }
    .lg\:min-h-85 { min-height: 85rem; }
    .lg\:min-h-90 { min-height: 90rem; }
    .lg\:min-h-95 { min-height: 95rem; }
    .lg\:min-h-100 { min-height: 100rem; }
    .lg\:min-h-screen { min-height: 100vh; }
    .lg\:min-h-full { min-height: 100%; }

    /* Width utilities */
    .lg\:w-auto { width: auto; }
    .lg\:w-full { width: 100%; }

    /* Position utilities */
    .lg\:sticky { position: sticky; top: 0; }
    .lg\:sticky-top-5xs { position: sticky; top: var(--space-5xs); }
    .lg\:sticky-top-4xs { position: sticky; top: var(--space-4xs); }
    .lg\:sticky-top-3xs { position: sticky; top: var(--space-3xs); }
    .lg\:sticky-top-2xs { position: sticky; top: var(--space-2xs); }
    .lg\:sticky-top-xs { position: sticky; top: var(--space-xs); }
    .lg\:sticky-top-s { position: sticky; top: var(--space-s); }
    .lg\:sticky-top-m { position: sticky; top: var(--space-m); }
    .lg\:sticky-top-l { position: sticky; top: var(--space-l); }
    .lg\:sticky-top-xl { position: sticky; top: var(--space-xl); }
    .lg\:sticky-top-2xl { position: sticky; top: var(--space-2xl); }
    .lg\:sticky-top-3xl { position: sticky; top: var(--space-3xl); }

    /* Legacy styles */
} 

/* Tailwind utilities */
/* Tailwind Positions */
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
/* tailwind font sizes */
.text-1\.1em{
  font-size: 1.1em
}
.text-1\.2em{
  font-size: 1.2em
}
/* Tailwind Padding */
.p-3xs{
  padding: var(--space-3xs);
}
.p-2xs{
  padding: var(--space-2xs);
}
.p-xs{
  padding: var(--space-xs);
}
.p-s{
  padding: var(--space-s);
}
.p-m{
  padding: var(--space-m);
}
.p-l{
  padding: var(--space-l);
}
.p-xl{
  padding: var(--space-xl);
}
.p-2xl{
  padding: var(--space-2xl);
}
.p-3xl{
  padding: var(--space-3xl);
}
.px-xs {
  padding-left:var(--space-2xs);
  padding-right:var(--space-2xs);
}
.py-l {
  padding-top:var(--space-l);
  padding-bottom:var(--space-l);
}
/* padding top */
.pt-m{
  padding-top: var(--space-m);
}
.pt-l{
  padding-top: var(--space-l);
}
.pt-xl{
  padding-top: var(--space-xl);
}
.pt-2xl{
  padding-top: var(--space-2xl);
}
/* Tailwind text */
.text-center{
  text-align: center;
}
.text-light {
  color: var(--col-txt--light);
}
.text-blue {
  color: var(--col-brand--primary);
}
.text-white {
  color: #fff;
}
.text-dark {
  color: var(--col-bg--dark);
}
.text-shadow-light{
    text-shadow: 0 0 10px var(--col-bg--light)
}
.text-shadow-dark{
  text-shadow: 0 0  10px #000;
}
.text-shadow-dark-80{
  text-shadow: 0 0 10px #00000080
}
.text-shadow-dark-50{
  text-shadow: 0 0 10px #00000050
}

.fw-500{
  font-weight: 500;
}
.fw-700{
  font-weight: 700;
}
.flex-col{
  display: flex;
  flex-direction: column;
}
.flex-row{
  display: flex;
  flex-direction: row;
}
.flex-nowrap{
  flex-wrap: nowrap;
}
.flex-wrap{
  flex-wrap: wrap;
}
.justify-end{
  justify-content: end;
}
.justify-start{
  justify-content: start;
}
.justify-center{
  justify-content: center;
}
.justify-around{
  justify-content: space-around;
}
.justify-between{
  justify-content: space-between;
}
.justify-evenly{
  justify-content: space-evenly;
}
.align-start, .items-start{
  align-items: start;
}
.align-center, .items-center{
  align-items: center;
}
.align-end, .items-end{
  align-items: end;
}
.align-stretch{
  align-items: stretch;
}
.items-stretch{
 align-items: stretch;
}

/* Border radius */
.border-radius-2xs{
  border-radius: var(--space-2xs);
}
.border-radius-s{
  border-radius: var(--space-s);
}
.border-radius-m{
  border-radius: var(--space-m);
}
.border-radius-l{
  border-radius: var(--space-l);
}

/* Font Weight Tailwind */
.font-weight-100 {
  font-weight: 100;
}
.font-weight-200 {
  font-weight: 200;
}
.font-weight-300 {
  font-weight: 300;
}
.font-weight-400 {
  font-weight: 400; /* Normal */
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-600 {
  font-weight: 600;
}
.font-weight-700 {
  font-weight: 700; /* Bold */
}
.font-weight-800 {
  font-weight: 800;
}
.font-weight-900 {
  font-weight: 900;
}
/* Tailwind blur */
.blur-10{
  backdrop-filter: blur(10px);
}

/* Tailwind Height */
.min-h-screen{ 
  min-height: 100vh;
}
.min-h-70vh{ 
  min-height: 70vh;
}

/* Tailwind Border Radius */
.rounded-xs{
  border-radius: var(--space-xs);
}
.rounded-s{
  border-radius: var(--space-s);
}
.rounded-m{
  border-radius: var(--space-m);
}
.rounded-l{
  border-radius: var(--space-l);
}
.rounded-xl{
  border-radius: var(--space-xl);
}  
/*Grid utilities*/
.grid {
  display: grid;
  grid-template-columns: var(--grid-m);
  gap: var(--space-m);
}
.grid-xs {
  display: grid;
  grid-template-columns: var(--grid-xs);
  gap: var(--space-m);
}
.grid-s {
  display: grid;
  grid-template-columns: var(--grid-s);
  gap: var(--space-m);
}
.grid-m {
  display: grid;
  grid-template-columns: var(--grid-m);
  gap: var(--space-m);
}
.grid-l {
  display: grid;
  grid-template-columns: var(--grid-l);
  gap: var(--space-l);
}
.grid-xl {
  display: grid;
  grid-template-columns: var(--grid-xl);
  gap: var(--space-xl);
}
.grid-2xl {
  display: grid;
  grid-template-columns: var(--grid-xl);
  gap: var(--space-2xl);
}
@media only screen and (min-width: 1100px){
  .grid-m {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* sticky utilitiies */
.sticky{
  position: sticky;
  top:0;
}
.sticky-10, top-10{
  top: 10rem
}
.sticky-20{
  top: 20rem
}
.sticky--15{
  top: -15rem
}
.sticky-20vh{
  top: 20vh;
}
/* width utilities */
.w-full{
    width:100%;
}
/* height utilities */
.h-full{
  height: 100%;
}
.max-w-10{
  max-width: 10rem;
}
.max-w-15{
  max-width: 15rem;
}
.max-w-20{
  max-width: 20rem;
}
.max-w-30{
  max-width: 30rem;
}
.max-w-40{
  max-width: 50rem;
}
.max-w-50{
  max-width: 50rem;
}
.max-w-60{
  max-width: 60rem;
}
.max-w-70{
  max-width: 70rem;
}
.max-w-80{
  max-width: 80rem;
}
.max-w-90{
  max-width: 90rem;
}
/* gap utilities */
.gap-3xs{ 
  gap: var(--space-3xs);
}
.gap-2xs{ 
  gap: var(--space-2xs);
}
.gap-xs{ 
  gap: var(--space-s);
}
.gap-s{ 
  gap: var(--space-s);
}
.gap-m{ 
  gap: var(--space-m);
}
.gap-l{ 
  gap: var(--space-l);
}
.gap-xl{ 
  gap: var(--space-xl);
}
.gap-2xl{ 
  gap: var(--space-2xl);
}
.gap-3xl{ 
  gap: var(--space-3xl);
}
}