santycss/dist/santy-core.css

Plain-English utility-first CSS framework — no build step, just classes

/* @SANTYMOD:reset */
/* ============================================================
   SantyCSS v2.3.0  —  Plain-English Utility CSS Framework
   https://github.com/santybad/santy_css
   ============================================================ */

/* ── Box Sizing Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── CSS Custom Properties (Theme) ── */
:root {
  /* ── Design Tokens (override to customise) ── */
  --santy-primary:        #3b82f6;
  --santy-primary-dark:   #2563eb;
  --santy-primary-light:  #dbeafe;
  --santy-secondary:      #6b7280;
  --santy-success:        #22c55e;
  --santy-warning:        #f59e0b;
  --santy-danger:         #ef4444;
  --santy-info:           #06b6d4;
  --santy-radius-sm:      4px;
  --santy-radius:         8px;
  --santy-radius-md:      12px;
  --santy-radius-lg:      16px;
  --santy-radius-xl:      24px;
  --santy-radius-full:    9999px;
  --santy-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --santy-font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --santy-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --santy-transition-fast: all 0.15s ease;
  --santy-transition-normal: all 0.3s ease;
  --santy-transition-slow: all 0.5s ease;
  --santy-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --santy-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --santy-shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --santy-shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --santy-shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --santy-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
}


/* @SANTYMOD:layout */
/* ── Display ── */
.make-block        { display: block; }
.make-inline       { display: inline; }
.make-inline-block { display: inline-block; }
.make-flex         { display: flex; }
.make-inline-flex  { display: inline-flex; }
.make-grid         { display: grid; }
.make-inline-grid  { display: inline-grid; }
.make-table        { display: table; }
.make-hidden       { display: none; }
.make-contents     { display: contents; }

/* ── Visibility ── */
.make-visible   { visibility: visible; }
.make-invisible { visibility: hidden; }
.make-collapse  { visibility: collapse; }


/* @SANTYMOD:flex */
/* ── Flex Direction ── */
.flex-row            { flex-direction: row; }
.flex-row-reverse    { flex-direction: row-reverse; }
.flex-column         { flex-direction: column; }
.flex-column-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 Grow / Shrink / None ── */
.flex-grow        { flex-grow: 1; }
.flex-grow-none   { flex-grow: 0; }
.flex-shrink      { flex-shrink: 1; }
.flex-shrink-none { flex-shrink: 0; }
.flex-auto        { flex: 1 1 auto; }
.flex-initial     { flex: 0 1 auto; }
.flex-none        { flex: none; }
.flex-equal       { flex: 1; }

/* ── Align Items ── */
.align-start    { align-items: flex-start; }
.align-end      { align-items: flex-end; }
.align-center   { align-items: center; }
.align-stretch  { align-items: stretch; }
.align-baseline { align-items: baseline; }

/* ── Align Self ── */
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-stretch  { align-self: stretch; }
.self-baseline { align-self: baseline; }
.self-auto     { align-self: auto; }

/* ── Align Content ── */
.content-start   { align-content: flex-start; }
.content-end     { align-content: flex-end; }
.content-center  { align-content: center; }
.content-stretch { align-content: stretch; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-evenly  { align-content: space-evenly; }

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

/* ── 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-start   { justify-self: start; }
.justify-self-end     { justify-self: end; }
.justify-self-center  { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }
.justify-self-auto    { justify-self: auto; }

/* ── Place Content / Items / Self ── */
.place-center  { place-items: center; place-content: center; }
.place-stretch { place-items: stretch; }

/* ── Order ── */
.order-first { order: -9999; }
.order-last  { order: 9999; }
.order-none  { order: 0; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

/* @SANTYMOD:grid */

/* ── 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-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

/* ── 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 / Row Span ── */
.span-col-1 { grid-column: span 1 / span 1; }
.span-col-2 { grid-column: span 2 / span 2; }
.span-col-3 { grid-column: span 3 / span 3; }
.span-col-4 { grid-column: span 4 / span 4; }
.span-col-5 { grid-column: span 5 / span 5; }
.span-col-6 { grid-column: span 6 / span 6; }
.span-col-7 { grid-column: span 7 / span 7; }
.span-col-8 { grid-column: span 8 / span 8; }
.span-col-9 { grid-column: span 9 / span 9; }
.span-col-10 { grid-column: span 10 / span 10; }
.span-col-11 { grid-column: span 11 / span 11; }
.span-col-12 { grid-column: span 12 / span 12; }
.span-row-1 { grid-row: span 1 / span 1; }
.span-row-2 { grid-row: span 2 / span 2; }
.span-row-3 { grid-row: span 3 / span 3; }
.span-row-4 { grid-row: span 4 / span 4; }
.span-row-5 { grid-row: span 5 / span 5; }
.span-row-6 { grid-row: span 6 / span 6; }
.span-col-full { grid-column: 1 / -1; }
.span-row-full { grid-row: 1 / -1; }

/* ── Grid Auto Flow ── */
.grid-flow-row    { grid-auto-flow: row; }
.grid-flow-col    { grid-auto-flow: column; }
.grid-flow-dense  { grid-auto-flow: dense; }
.grid-auto-cols-min  { grid-auto-columns: min-content; }
.grid-auto-cols-max  { grid-auto-columns: max-content; }
.grid-auto-cols-fr   { grid-auto-columns: minmax(0, 1fr); }


/* @SANTYMOD:spacing */

/* ── Padding ── */
.add-padding-0        { padding: 0px; }
.add-padding-top-0    { padding-top: 0px; }
.add-padding-bottom-0 { padding-bottom: 0px; }
.add-padding-left-0   { padding-left: 0px; }
.add-padding-right-0  { padding-right: 0px; }
.add-padding-x-0      { padding-left: 0px; padding-right: 0px; }
.add-padding-y-0      { padding-top: 0px; padding-bottom: 0px; }
.add-padding-1        { padding: 1px; }
.add-padding-top-1    { padding-top: 1px; }
.add-padding-bottom-1 { padding-bottom: 1px; }
.add-padding-left-1   { padding-left: 1px; }
.add-padding-right-1  { padding-right: 1px; }
.add-padding-x-1      { padding-left: 1px; padding-right: 1px; }
.add-padding-y-1      { padding-top: 1px; padding-bottom: 1px; }
.add-padding-2        { padding: 2px; }
.add-padding-top-2    { padding-top: 2px; }
.add-padding-bottom-2 { padding-bottom: 2px; }
.add-padding-left-2   { padding-left: 2px; }
.add-padding-right-2  { padding-right: 2px; }
.add-padding-x-2      { padding-left: 2px; padding-right: 2px; }
.add-padding-y-2      { padding-top: 2px; padding-bottom: 2px; }
.add-padding-3        { padding: 3px; }
.add-padding-top-3    { padding-top: 3px; }
.add-padding-bottom-3 { padding-bottom: 3px; }
.add-padding-left-3   { padding-left: 3px; }
.add-padding-right-3  { padding-right: 3px; }
.add-padding-x-3      { padding-left: 3px; padding-right: 3px; }
.add-padding-y-3      { padding-top: 3px; padding-bottom: 3px; }
.add-padding-4        { padding: 4px; }
.add-padding-top-4    { padding-top: 4px; }
.add-padding-bottom-4 { padding-bottom: 4px; }
.add-padding-left-4   { padding-left: 4px; }
.add-padding-right-4  { padding-right: 4px; }
.add-padding-x-4      { padding-left: 4px; padding-right: 4px; }
.add-padding-y-4      { padding-top: 4px; padding-bottom: 4px; }
.add-padding-5        { padding: 5px; }
.add-padding-top-5    { padding-top: 5px; }
.add-padding-bottom-5 { padding-bottom: 5px; }
.add-padding-left-5   { padding-left: 5px; }
.add-padding-right-5  { padding-right: 5px; }
.add-padding-x-5      { padding-left: 5px; padding-right: 5px; }
.add-padding-y-5      { padding-top: 5px; padding-bottom: 5px; }
.add-padding-6        { padding: 6px; }
.add-padding-top-6    { padding-top: 6px; }
.add-padding-bottom-6 { padding-bottom: 6px; }
.add-padding-left-6   { padding-left: 6px; }
.add-padding-right-6  { padding-right: 6px; }
.add-padding-x-6      { padding-left: 6px; padding-right: 6px; }
.add-padding-y-6      { padding-top: 6px; padding-bottom: 6px; }
.add-padding-8        { padding: 8px; }
.add-padding-top-8    { padding-top: 8px; }
.add-padding-bottom-8 { padding-bottom: 8px; }
.add-padding-left-8   { padding-left: 8px; }
.add-padding-right-8  { padding-right: 8px; }
.add-padding-x-8      { padding-left: 8px; padding-right: 8px; }
.add-padding-y-8      { padding-top: 8px; padding-bottom: 8px; }
.add-padding-10        { padding: 10px; }
.add-padding-top-10    { padding-top: 10px; }
.add-padding-bottom-10 { padding-bottom: 10px; }
.add-padding-left-10   { padding-left: 10px; }
.add-padding-right-10  { padding-right: 10px; }
.add-padding-x-10      { padding-left: 10px; padding-right: 10px; }
.add-padding-y-10      { padding-top: 10px; padding-bottom: 10px; }
.add-padding-12        { padding: 12px; }
.add-padding-top-12    { padding-top: 12px; }
.add-padding-bottom-12 { padding-bottom: 12px; }
.add-padding-left-12   { padding-left: 12px; }
.add-padding-right-12  { padding-right: 12px; }
.add-padding-x-12      { padding-left: 12px; padding-right: 12px; }
.add-padding-y-12      { padding-top: 12px; padding-bottom: 12px; }
.add-padding-14        { padding: 14px; }
.add-padding-top-14    { padding-top: 14px; }
.add-padding-bottom-14 { padding-bottom: 14px; }
.add-padding-left-14   { padding-left: 14px; }
.add-padding-right-14  { padding-right: 14px; }
.add-padding-x-14      { padding-left: 14px; padding-right: 14px; }
.add-padding-y-14      { padding-top: 14px; padding-bottom: 14px; }
.add-padding-16        { padding: 16px; }
.add-padding-top-16    { padding-top: 16px; }
.add-padding-bottom-16 { padding-bottom: 16px; }
.add-padding-left-16   { padding-left: 16px; }
.add-padding-right-16  { padding-right: 16px; }
.add-padding-x-16      { padding-left: 16px; padding-right: 16px; }
.add-padding-y-16      { padding-top: 16px; padding-bottom: 16px; }
.add-padding-18        { padding: 18px; }
.add-padding-top-18    { padding-top: 18px; }
.add-padding-bottom-18 { padding-bottom: 18px; }
.add-padding-left-18   { padding-left: 18px; }
.add-padding-right-18  { padding-right: 18px; }
.add-padding-x-18      { padding-left: 18px; padding-right: 18px; }
.add-padding-y-18      { padding-top: 18px; padding-bottom: 18px; }
.add-padding-20        { padding: 20px; }
.add-padding-top-20    { padding-top: 20px; }
.add-padding-bottom-20 { padding-bottom: 20px; }
.add-padding-left-20   { padding-left: 20px; }
.add-padding-right-20  { padding-right: 20px; }
.add-padding-x-20      { padding-left: 20px; padding-right: 20px; }
.add-padding-y-20      { padding-top: 20px; padding-bottom: 20px; }
.add-padding-24        { padding: 24px; }
.add-padding-top-24    { padding-top: 24px; }
.add-padding-bottom-24 { padding-bottom: 24px; }
.add-padding-left-24   { padding-left: 24px; }
.add-padding-right-24  { padding-right: 24px; }
.add-padding-x-24      { padding-left: 24px; padding-right: 24px; }
.add-padding-y-24      { padding-top: 24px; padding-bottom: 24px; }
.add-padding-28        { padding: 28px; }
.add-padding-top-28    { padding-top: 28px; }
.add-padding-bottom-28 { padding-bottom: 28px; }
.add-padding-left-28   { padding-left: 28px; }
.add-padding-right-28  { padding-right: 28px; }
.add-padding-x-28      { padding-left: 28px; padding-right: 28px; }
.add-padding-y-28      { padding-top: 28px; padding-bottom: 28px; }
.add-padding-32        { padding: 32px; }
.add-padding-top-32    { padding-top: 32px; }
.add-padding-bottom-32 { padding-bottom: 32px; }
.add-padding-left-32   { padding-left: 32px; }
.add-padding-right-32  { padding-right: 32px; }
.add-padding-x-32      { padding-left: 32px; padding-right: 32px; }
.add-padding-y-32      { padding-top: 32px; padding-bottom: 32px; }
.add-padding-40        { padding: 40px; }
.add-padding-top-40    { padding-top: 40px; }
.add-padding-bottom-40 { padding-bottom: 40px; }
.add-padding-left-40   { padding-left: 40px; }
.add-padding-right-40  { padding-right: 40px; }
.add-padding-x-40      { padding-left: 40px; padding-right: 40px; }
.add-padding-y-40      { padding-top: 40px; padding-bottom: 40px; }
.add-padding-48        { padding: 48px; }
.add-padding-top-48    { padding-top: 48px; }
.add-padding-bottom-48 { padding-bottom: 48px; }
.add-padding-left-48   { padding-left: 48px; }
.add-padding-right-48  { padding-right: 48px; }
.add-padding-x-48      { padding-left: 48px; padding-right: 48px; }
.add-padding-y-48      { padding-top: 48px; padding-bottom: 48px; }
.add-padding-56        { padding: 56px; }
.add-padding-top-56    { padding-top: 56px; }
.add-padding-bottom-56 { padding-bottom: 56px; }
.add-padding-left-56   { padding-left: 56px; }
.add-padding-right-56  { padding-right: 56px; }
.add-padding-x-56      { padding-left: 56px; padding-right: 56px; }
.add-padding-y-56      { padding-top: 56px; padding-bottom: 56px; }
.add-padding-64        { padding: 64px; }
.add-padding-top-64    { padding-top: 64px; }
.add-padding-bottom-64 { padding-bottom: 64px; }
.add-padding-left-64   { padding-left: 64px; }
.add-padding-right-64  { padding-right: 64px; }
.add-padding-x-64      { padding-left: 64px; padding-right: 64px; }
.add-padding-y-64      { padding-top: 64px; padding-bottom: 64px; }
.add-padding-80        { padding: 80px; }
.add-padding-top-80    { padding-top: 80px; }
.add-padding-bottom-80 { padding-bottom: 80px; }
.add-padding-left-80   { padding-left: 80px; }
.add-padding-right-80  { padding-right: 80px; }
.add-padding-x-80      { padding-left: 80px; padding-right: 80px; }
.add-padding-y-80      { padding-top: 80px; padding-bottom: 80px; }
.add-padding-96        { padding: 96px; }
.add-padding-top-96    { padding-top: 96px; }
.add-padding-bottom-96 { padding-bottom: 96px; }
.add-padding-left-96   { padding-left: 96px; }
.add-padding-right-96  { padding-right: 96px; }
.add-padding-x-96      { padding-left: 96px; padding-right: 96px; }
.add-padding-y-96      { padding-top: 96px; padding-bottom: 96px; }
.add-padding-128        { padding: 128px; }
.add-padding-top-128    { padding-top: 128px; }
.add-padding-bottom-128 { padding-bottom: 128px; }
.add-padding-left-128   { padding-left: 128px; }
.add-padding-right-128  { padding-right: 128px; }
.add-padding-x-128      { padding-left: 128px; padding-right: 128px; }
.add-padding-y-128      { padding-top: 128px; padding-bottom: 128px; }
.add-padding-160        { padding: 160px; }
.add-padding-top-160    { padding-top: 160px; }
.add-padding-bottom-160 { padding-bottom: 160px; }
.add-padding-left-160   { padding-left: 160px; }
.add-padding-right-160  { padding-right: 160px; }
.add-padding-x-160      { padding-left: 160px; padding-right: 160px; }
.add-padding-y-160      { padding-top: 160px; padding-bottom: 160px; }
.add-padding-192        { padding: 192px; }
.add-padding-top-192    { padding-top: 192px; }
.add-padding-bottom-192 { padding-bottom: 192px; }
.add-padding-left-192   { padding-left: 192px; }
.add-padding-right-192  { padding-right: 192px; }
.add-padding-x-192      { padding-left: 192px; padding-right: 192px; }
.add-padding-y-192      { padding-top: 192px; padding-bottom: 192px; }
.add-padding-256        { padding: 256px; }
.add-padding-top-256    { padding-top: 256px; }
.add-padding-bottom-256 { padding-bottom: 256px; }
.add-padding-left-256   { padding-left: 256px; }
.add-padding-right-256  { padding-right: 256px; }
.add-padding-x-256      { padding-left: 256px; padding-right: 256px; }
.add-padding-y-256      { padding-top: 256px; padding-bottom: 256px; }
.add-padding-320        { padding: 320px; }
.add-padding-top-320    { padding-top: 320px; }
.add-padding-bottom-320 { padding-bottom: 320px; }
.add-padding-left-320   { padding-left: 320px; }
.add-padding-right-320  { padding-right: 320px; }
.add-padding-x-320      { padding-left: 320px; padding-right: 320px; }
.add-padding-y-320      { padding-top: 320px; padding-bottom: 320px; }
.add-padding-384        { padding: 384px; }
.add-padding-top-384    { padding-top: 384px; }
.add-padding-bottom-384 { padding-bottom: 384px; }
.add-padding-left-384   { padding-left: 384px; }
.add-padding-right-384  { padding-right: 384px; }
.add-padding-x-384      { padding-left: 384px; padding-right: 384px; }
.add-padding-y-384      { padding-top: 384px; padding-bottom: 384px; }
.add-padding-512        { padding: 512px; }
.add-padding-top-512    { padding-top: 512px; }
.add-padding-bottom-512 { padding-bottom: 512px; }
.add-padding-left-512   { padding-left: 512px; }
.add-padding-right-512  { padding-right: 512px; }
.add-padding-x-512      { padding-left: 512px; padding-right: 512px; }
.add-padding-y-512      { padding-top: 512px; padding-bottom: 512px; }
.add-padding-640        { padding: 640px; }
.add-padding-top-640    { padding-top: 640px; }
.add-padding-bottom-640 { padding-bottom: 640px; }
.add-padding-left-640   { padding-left: 640px; }
.add-padding-right-640  { padding-right: 640px; }
.add-padding-x-640      { padding-left: 640px; padding-right: 640px; }
.add-padding-y-640      { padding-top: 640px; padding-bottom: 640px; }
.add-padding-768        { padding: 768px; }
.add-padding-top-768    { padding-top: 768px; }
.add-padding-bottom-768 { padding-bottom: 768px; }
.add-padding-left-768   { padding-left: 768px; }
.add-padding-right-768  { padding-right: 768px; }
.add-padding-x-768      { padding-left: 768px; padding-right: 768px; }
.add-padding-y-768      { padding-top: 768px; padding-bottom: 768px; }
.add-padding-1024        { padding: 1024px; }
.add-padding-top-1024    { padding-top: 1024px; }
.add-padding-bottom-1024 { padding-bottom: 1024px; }
.add-padding-left-1024   { padding-left: 1024px; }
.add-padding-right-1024  { padding-right: 1024px; }
.add-padding-x-1024      { padding-left: 1024px; padding-right: 1024px; }
.add-padding-y-1024      { padding-top: 1024px; padding-bottom: 1024px; }

/* ── Margin ── */
.add-margin-0        { margin: 0px; }
.add-margin-top-0    { margin-top: 0px; }
.add-margin-bottom-0 { margin-bottom: 0px; }
.add-margin-left-0   { margin-left: 0px; }
.add-margin-right-0  { margin-right: 0px; }
.add-margin-x-0      { margin-left: 0px; margin-right: 0px; }
.add-margin-y-0      { margin-top: 0px; margin-bottom: 0px; }
.add-margin-1        { margin: 1px; }
.add-margin-top-1    { margin-top: 1px; }
.add-margin-bottom-1 { margin-bottom: 1px; }
.add-margin-left-1   { margin-left: 1px; }
.add-margin-right-1  { margin-right: 1px; }
.add-margin-x-1      { margin-left: 1px; margin-right: 1px; }
.add-margin-y-1      { margin-top: 1px; margin-bottom: 1px; }
.add-margin-2        { margin: 2px; }
.add-margin-top-2    { margin-top: 2px; }
.add-margin-bottom-2 { margin-bottom: 2px; }
.add-margin-left-2   { margin-left: 2px; }
.add-margin-right-2  { margin-right: 2px; }
.add-margin-x-2      { margin-left: 2px; margin-right: 2px; }
.add-margin-y-2      { margin-top: 2px; margin-bottom: 2px; }
.add-margin-3        { margin: 3px; }
.add-margin-top-3    { margin-top: 3px; }
.add-margin-bottom-3 { margin-bottom: 3px; }
.add-margin-left-3   { margin-left: 3px; }
.add-margin-right-3  { margin-right: 3px; }
.add-margin-x-3      { margin-left: 3px; margin-right: 3px; }
.add-margin-y-3      { margin-top: 3px; margin-bottom: 3px; }
.add-margin-4        { margin: 4px; }
.add-margin-top-4    { margin-top: 4px; }
.add-margin-bottom-4 { margin-bottom: 4px; }
.add-margin-left-4   { margin-left: 4px; }
.add-margin-right-4  { margin-right: 4px; }
.add-margin-x-4      { margin-left: 4px; margin-right: 4px; }
.add-margin-y-4      { margin-top: 4px; margin-bottom: 4px; }
.add-margin-5        { margin: 5px; }
.add-margin-top-5    { margin-top: 5px; }
.add-margin-bottom-5 { margin-bottom: 5px; }
.add-margin-left-5   { margin-left: 5px; }
.add-margin-right-5  { margin-right: 5px; }
.add-margin-x-5      { margin-left: 5px; margin-right: 5px; }
.add-margin-y-5      { margin-top: 5px; margin-bottom: 5px; }
.add-margin-6        { margin: 6px; }
.add-margin-top-6    { margin-top: 6px; }
.add-margin-bottom-6 { margin-bottom: 6px; }
.add-margin-left-6   { margin-left: 6px; }
.add-margin-right-6  { margin-right: 6px; }
.add-margin-x-6      { margin-left: 6px; margin-right: 6px; }
.add-margin-y-6      { margin-top: 6px; margin-bottom: 6px; }
.add-margin-8        { margin: 8px; }
.add-margin-top-8    { margin-top: 8px; }
.add-margin-bottom-8 { margin-bottom: 8px; }
.add-margin-left-8   { margin-left: 8px; }
.add-margin-right-8  { margin-right: 8px; }
.add-margin-x-8      { margin-left: 8px; margin-right: 8px; }
.add-margin-y-8      { margin-top: 8px; margin-bottom: 8px; }
.add-margin-10        { margin: 10px; }
.add-margin-top-10    { margin-top: 10px; }
.add-margin-bottom-10 { margin-bottom: 10px; }
.add-margin-left-10   { margin-left: 10px; }
.add-margin-right-10  { margin-right: 10px; }
.add-margin-x-10      { margin-left: 10px; margin-right: 10px; }
.add-margin-y-10      { margin-top: 10px; margin-bottom: 10px; }
.add-margin-12        { margin: 12px; }
.add-margin-top-12    { margin-top: 12px; }
.add-margin-bottom-12 { margin-bottom: 12px; }
.add-margin-left-12   { margin-left: 12px; }
.add-margin-right-12  { margin-right: 12px; }
.add-margin-x-12      { margin-left: 12px; margin-right: 12px; }
.add-margin-y-12      { margin-top: 12px; margin-bottom: 12px; }
.add-margin-14        { margin: 14px; }
.add-margin-top-14    { margin-top: 14px; }
.add-margin-bottom-14 { margin-bottom: 14px; }
.add-margin-left-14   { margin-left: 14px; }
.add-margin-right-14  { margin-right: 14px; }
.add-margin-x-14      { margin-left: 14px; margin-right: 14px; }
.add-margin-y-14      { margin-top: 14px; margin-bottom: 14px; }
.add-margin-16        { margin: 16px; }
.add-margin-top-16    { margin-top: 16px; }
.add-margin-bottom-16 { margin-bottom: 16px; }
.add-margin-left-16   { margin-left: 16px; }
.add-margin-right-16  { margin-right: 16px; }
.add-margin-x-16      { margin-left: 16px; margin-right: 16px; }
.add-margin-y-16      { margin-top: 16px; margin-bottom: 16px; }
.add-margin-18        { margin: 18px; }
.add-margin-top-18    { margin-top: 18px; }
.add-margin-bottom-18 { margin-bottom: 18px; }
.add-margin-left-18   { margin-left: 18px; }
.add-margin-right-18  { margin-right: 18px; }
.add-margin-x-18      { margin-left: 18px; margin-right: 18px; }
.add-margin-y-18      { margin-top: 18px; margin-bottom: 18px; }
.add-margin-20        { margin: 20px; }
.add-margin-top-20    { margin-top: 20px; }
.add-margin-bottom-20 { margin-bottom: 20px; }
.add-margin-left-20   { margin-left: 20px; }
.add-margin-right-20  { margin-right: 20px; }
.add-margin-x-20      { margin-left: 20px; margin-right: 20px; }
.add-margin-y-20      { margin-top: 20px; margin-bottom: 20px; }
.add-margin-24        { margin: 24px; }
.add-margin-top-24    { margin-top: 24px; }
.add-margin-bottom-24 { margin-bottom: 24px; }
.add-margin-left-24   { margin-left: 24px; }
.add-margin-right-24  { margin-right: 24px; }
.add-margin-x-24      { margin-left: 24px; margin-right: 24px; }
.add-margin-y-24      { margin-top: 24px; margin-bottom: 24px; }
.add-margin-28        { margin: 28px; }
.add-margin-top-28    { margin-top: 28px; }
.add-margin-bottom-28 { margin-bottom: 28px; }
.add-margin-left-28   { margin-left: 28px; }
.add-margin-right-28  { margin-right: 28px; }
.add-margin-x-28      { margin-left: 28px; margin-right: 28px; }
.add-margin-y-28      { margin-top: 28px; margin-bottom: 28px; }
.add-margin-32        { margin: 32px; }
.add-margin-top-32    { margin-top: 32px; }
.add-margin-bottom-32 { margin-bottom: 32px; }
.add-margin-left-32   { margin-left: 32px; }
.add-margin-right-32  { margin-right: 32px; }
.add-margin-x-32      { margin-left: 32px; margin-right: 32px; }
.add-margin-y-32      { margin-top: 32px; margin-bottom: 32px; }
.add-margin-40        { margin: 40px; }
.add-margin-top-40    { margin-top: 40px; }
.add-margin-bottom-40 { margin-bottom: 40px; }
.add-margin-left-40   { margin-left: 40px; }
.add-margin-right-40  { margin-right: 40px; }
.add-margin-x-40      { margin-left: 40px; margin-right: 40px; }
.add-margin-y-40      { margin-top: 40px; margin-bottom: 40px; }
.add-margin-48        { margin: 48px; }
.add-margin-top-48    { margin-top: 48px; }
.add-margin-bottom-48 { margin-bottom: 48px; }
.add-margin-left-48   { margin-left: 48px; }
.add-margin-right-48  { margin-right: 48px; }
.add-margin-x-48      { margin-left: 48px; margin-right: 48px; }
.add-margin-y-48      { margin-top: 48px; margin-bottom: 48px; }
.add-margin-56        { margin: 56px; }
.add-margin-top-56    { margin-top: 56px; }
.add-margin-bottom-56 { margin-bottom: 56px; }
.add-margin-left-56   { margin-left: 56px; }
.add-margin-right-56  { margin-right: 56px; }
.add-margin-x-56      { margin-left: 56px; margin-right: 56px; }
.add-margin-y-56      { margin-top: 56px; margin-bottom: 56px; }
.add-margin-64        { margin: 64px; }
.add-margin-top-64    { margin-top: 64px; }
.add-margin-bottom-64 { margin-bottom: 64px; }
.add-margin-left-64   { margin-left: 64px; }
.add-margin-right-64  { margin-right: 64px; }
.add-margin-x-64      { margin-left: 64px; margin-right: 64px; }
.add-margin-y-64      { margin-top: 64px; margin-bottom: 64px; }
.add-margin-80        { margin: 80px; }
.add-margin-top-80    { margin-top: 80px; }
.add-margin-bottom-80 { margin-bottom: 80px; }
.add-margin-left-80   { margin-left: 80px; }
.add-margin-right-80  { margin-right: 80px; }
.add-margin-x-80      { margin-left: 80px; margin-right: 80px; }
.add-margin-y-80      { margin-top: 80px; margin-bottom: 80px; }
.add-margin-96        { margin: 96px; }
.add-margin-top-96    { margin-top: 96px; }
.add-margin-bottom-96 { margin-bottom: 96px; }
.add-margin-left-96   { margin-left: 96px; }
.add-margin-right-96  { margin-right: 96px; }
.add-margin-x-96      { margin-left: 96px; margin-right: 96px; }
.add-margin-y-96      { margin-top: 96px; margin-bottom: 96px; }
.add-margin-128        { margin: 128px; }
.add-margin-top-128    { margin-top: 128px; }
.add-margin-bottom-128 { margin-bottom: 128px; }
.add-margin-left-128   { margin-left: 128px; }
.add-margin-right-128  { margin-right: 128px; }
.add-margin-x-128      { margin-left: 128px; margin-right: 128px; }
.add-margin-y-128      { margin-top: 128px; margin-bottom: 128px; }
.add-margin-160        { margin: 160px; }
.add-margin-top-160    { margin-top: 160px; }
.add-margin-bottom-160 { margin-bottom: 160px; }
.add-margin-left-160   { margin-left: 160px; }
.add-margin-right-160  { margin-right: 160px; }
.add-margin-x-160      { margin-left: 160px; margin-right: 160px; }
.add-margin-y-160      { margin-top: 160px; margin-bottom: 160px; }
.add-margin-192        { margin: 192px; }
.add-margin-top-192    { margin-top: 192px; }
.add-margin-bottom-192 { margin-bottom: 192px; }
.add-margin-left-192   { margin-left: 192px; }
.add-margin-right-192  { margin-right: 192px; }
.add-margin-x-192      { margin-left: 192px; margin-right: 192px; }
.add-margin-y-192      { margin-top: 192px; margin-bottom: 192px; }
.add-margin-256        { margin: 256px; }
.add-margin-top-256    { margin-top: 256px; }
.add-margin-bottom-256 { margin-bottom: 256px; }
.add-margin-left-256   { margin-left: 256px; }
.add-margin-right-256  { margin-right: 256px; }
.add-margin-x-256      { margin-left: 256px; margin-right: 256px; }
.add-margin-y-256      { margin-top: 256px; margin-bottom: 256px; }
.add-margin-320        { margin: 320px; }
.add-margin-top-320    { margin-top: 320px; }
.add-margin-bottom-320 { margin-bottom: 320px; }
.add-margin-left-320   { margin-left: 320px; }
.add-margin-right-320  { margin-right: 320px; }
.add-margin-x-320      { margin-left: 320px; margin-right: 320px; }
.add-margin-y-320      { margin-top: 320px; margin-bottom: 320px; }
.add-margin-384        { margin: 384px; }
.add-margin-top-384    { margin-top: 384px; }
.add-margin-bottom-384 { margin-bottom: 384px; }
.add-margin-left-384   { margin-left: 384px; }
.add-margin-right-384  { margin-right: 384px; }
.add-margin-x-384      { margin-left: 384px; margin-right: 384px; }
.add-margin-y-384      { margin-top: 384px; margin-bottom: 384px; }
.add-margin-512        { margin: 512px; }
.add-margin-top-512    { margin-top: 512px; }
.add-margin-bottom-512 { margin-bottom: 512px; }
.add-margin-left-512   { margin-left: 512px; }
.add-margin-right-512  { margin-right: 512px; }
.add-margin-x-512      { margin-left: 512px; margin-right: 512px; }
.add-margin-y-512      { margin-top: 512px; margin-bottom: 512px; }
.add-margin-640        { margin: 640px; }
.add-margin-top-640    { margin-top: 640px; }
.add-margin-bottom-640 { margin-bottom: 640px; }
.add-margin-left-640   { margin-left: 640px; }
.add-margin-right-640  { margin-right: 640px; }
.add-margin-x-640      { margin-left: 640px; margin-right: 640px; }
.add-margin-y-640      { margin-top: 640px; margin-bottom: 640px; }
.add-margin-768        { margin: 768px; }
.add-margin-top-768    { margin-top: 768px; }
.add-margin-bottom-768 { margin-bottom: 768px; }
.add-margin-left-768   { margin-left: 768px; }
.add-margin-right-768  { margin-right: 768px; }
.add-margin-x-768      { margin-left: 768px; margin-right: 768px; }
.add-margin-y-768      { margin-top: 768px; margin-bottom: 768px; }
.add-margin-1024        { margin: 1024px; }
.add-margin-top-1024    { margin-top: 1024px; }
.add-margin-bottom-1024 { margin-bottom: 1024px; }
.add-margin-left-1024   { margin-left: 1024px; }
.add-margin-right-1024  { margin-right: 1024px; }
.add-margin-x-1024      { margin-left: 1024px; margin-right: 1024px; }
.add-margin-y-1024      { margin-top: 1024px; margin-bottom: 1024px; }
.center-margin            { margin-left: auto; margin-right: auto; }
.add-margin-auto          { margin: auto; }
.add-margin-top-auto      { margin-top: auto; }
.add-margin-bottom-auto   { margin-bottom: auto; }
.add-margin-left-auto     { margin-left: auto; }
.add-margin-right-auto    { margin-right: auto; }
.add-margin-x-auto        { margin-left: auto; margin-right: auto; }
.add-margin-y-auto        { margin-top: auto; margin-bottom: auto; }

/* ── Negative Margin ── */
.subtract-margin-1        { margin: -1px; }
.subtract-margin-top-1    { margin-top: -1px; }
.subtract-margin-bottom-1 { margin-bottom: -1px; }
.subtract-margin-left-1   { margin-left: -1px; }
.subtract-margin-right-1  { margin-right: -1px; }
.subtract-margin-2        { margin: -2px; }
.subtract-margin-top-2    { margin-top: -2px; }
.subtract-margin-bottom-2 { margin-bottom: -2px; }
.subtract-margin-left-2   { margin-left: -2px; }
.subtract-margin-right-2  { margin-right: -2px; }
.subtract-margin-4        { margin: -4px; }
.subtract-margin-top-4    { margin-top: -4px; }
.subtract-margin-bottom-4 { margin-bottom: -4px; }
.subtract-margin-left-4   { margin-left: -4px; }
.subtract-margin-right-4  { margin-right: -4px; }
.subtract-margin-8        { margin: -8px; }
.subtract-margin-top-8    { margin-top: -8px; }
.subtract-margin-bottom-8 { margin-bottom: -8px; }
.subtract-margin-left-8   { margin-left: -8px; }
.subtract-margin-right-8  { margin-right: -8px; }
.subtract-margin-12        { margin: -12px; }
.subtract-margin-top-12    { margin-top: -12px; }
.subtract-margin-bottom-12 { margin-bottom: -12px; }
.subtract-margin-left-12   { margin-left: -12px; }
.subtract-margin-right-12  { margin-right: -12px; }
.subtract-margin-16        { margin: -16px; }
.subtract-margin-top-16    { margin-top: -16px; }
.subtract-margin-bottom-16 { margin-bottom: -16px; }
.subtract-margin-left-16   { margin-left: -16px; }
.subtract-margin-right-16  { margin-right: -16px; }
.subtract-margin-20        { margin: -20px; }
.subtract-margin-top-20    { margin-top: -20px; }
.subtract-margin-bottom-20 { margin-bottom: -20px; }
.subtract-margin-left-20   { margin-left: -20px; }
.subtract-margin-right-20  { margin-right: -20px; }
.subtract-margin-24        { margin: -24px; }
.subtract-margin-top-24    { margin-top: -24px; }
.subtract-margin-bottom-24 { margin-bottom: -24px; }
.subtract-margin-left-24   { margin-left: -24px; }
.subtract-margin-right-24  { margin-right: -24px; }
.subtract-margin-32        { margin: -32px; }
.subtract-margin-top-32    { margin-top: -32px; }
.subtract-margin-bottom-32 { margin-bottom: -32px; }
.subtract-margin-left-32   { margin-left: -32px; }
.subtract-margin-right-32  { margin-right: -32px; }
.subtract-margin-40        { margin: -40px; }
.subtract-margin-top-40    { margin-top: -40px; }
.subtract-margin-bottom-40 { margin-bottom: -40px; }
.subtract-margin-left-40   { margin-left: -40px; }
.subtract-margin-right-40  { margin-right: -40px; }
.subtract-margin-48        { margin: -48px; }
.subtract-margin-top-48    { margin-top: -48px; }
.subtract-margin-bottom-48 { margin-bottom: -48px; }
.subtract-margin-left-48   { margin-left: -48px; }
.subtract-margin-right-48  { margin-right: -48px; }
.subtract-margin-64        { margin: -64px; }
.subtract-margin-top-64    { margin-top: -64px; }
.subtract-margin-bottom-64 { margin-bottom: -64px; }
.subtract-margin-left-64   { margin-left: -64px; }
.subtract-margin-right-64  { margin-right: -64px; }

/* ── Gap ── */
.gap-0   { gap: 0px; }
.gap-x-0 { column-gap: 0px; }
.gap-y-0 { row-gap: 0px; }
.gap-1   { gap: 1px; }
.gap-x-1 { column-gap: 1px; }
.gap-y-1 { row-gap: 1px; }
.gap-2   { gap: 2px; }
.gap-x-2 { column-gap: 2px; }
.gap-y-2 { row-gap: 2px; }
.gap-3   { gap: 3px; }
.gap-x-3 { column-gap: 3px; }
.gap-y-3 { row-gap: 3px; }
.gap-4   { gap: 4px; }
.gap-x-4 { column-gap: 4px; }
.gap-y-4 { row-gap: 4px; }
.gap-5   { gap: 5px; }
.gap-x-5 { column-gap: 5px; }
.gap-y-5 { row-gap: 5px; }
.gap-6   { gap: 6px; }
.gap-x-6 { column-gap: 6px; }
.gap-y-6 { row-gap: 6px; }
.gap-8   { gap: 8px; }
.gap-x-8 { column-gap: 8px; }
.gap-y-8 { row-gap: 8px; }
.gap-10   { gap: 10px; }
.gap-x-10 { column-gap: 10px; }
.gap-y-10 { row-gap: 10px; }
.gap-12   { gap: 12px; }
.gap-x-12 { column-gap: 12px; }
.gap-y-12 { row-gap: 12px; }
.gap-14   { gap: 14px; }
.gap-x-14 { column-gap: 14px; }
.gap-y-14 { row-gap: 14px; }
.gap-16   { gap: 16px; }
.gap-x-16 { column-gap: 16px; }
.gap-y-16 { row-gap: 16px; }
.gap-18   { gap: 18px; }
.gap-x-18 { column-gap: 18px; }
.gap-y-18 { row-gap: 18px; }
.gap-20   { gap: 20px; }
.gap-x-20 { column-gap: 20px; }
.gap-y-20 { row-gap: 20px; }
.gap-24   { gap: 24px; }
.gap-x-24 { column-gap: 24px; }
.gap-y-24 { row-gap: 24px; }
.gap-28   { gap: 28px; }
.gap-x-28 { column-gap: 28px; }
.gap-y-28 { row-gap: 28px; }
.gap-32   { gap: 32px; }
.gap-x-32 { column-gap: 32px; }
.gap-y-32 { row-gap: 32px; }
.gap-40   { gap: 40px; }
.gap-x-40 { column-gap: 40px; }
.gap-y-40 { row-gap: 40px; }
.gap-48   { gap: 48px; }
.gap-x-48 { column-gap: 48px; }
.gap-y-48 { row-gap: 48px; }
.gap-56   { gap: 56px; }
.gap-x-56 { column-gap: 56px; }
.gap-y-56 { row-gap: 56px; }
.gap-64   { gap: 64px; }
.gap-x-64 { column-gap: 64px; }
.gap-y-64 { row-gap: 64px; }
.gap-80   { gap: 80px; }
.gap-x-80 { column-gap: 80px; }
.gap-y-80 { row-gap: 80px; }
.gap-96   { gap: 96px; }
.gap-x-96 { column-gap: 96px; }
.gap-y-96 { row-gap: 96px; }
.gap-128   { gap: 128px; }
.gap-x-128 { column-gap: 128px; }
.gap-y-128 { row-gap: 128px; }
.gap-160   { gap: 160px; }
.gap-x-160 { column-gap: 160px; }
.gap-y-160 { row-gap: 160px; }
.gap-192   { gap: 192px; }
.gap-x-192 { column-gap: 192px; }
.gap-y-192 { row-gap: 192px; }
.gap-256   { gap: 256px; }
.gap-x-256 { column-gap: 256px; }
.gap-y-256 { row-gap: 256px; }
.gap-320   { gap: 320px; }
.gap-x-320 { column-gap: 320px; }
.gap-y-320 { row-gap: 320px; }
.gap-384   { gap: 384px; }
.gap-x-384 { column-gap: 384px; }
.gap-y-384 { row-gap: 384px; }
.gap-512   { gap: 512px; }
.gap-x-512 { column-gap: 512px; }
.gap-y-512 { row-gap: 512px; }
.gap-640   { gap: 640px; }
.gap-x-640 { column-gap: 640px; }
.gap-y-640 { row-gap: 640px; }
.gap-768   { gap: 768px; }
.gap-x-768 { column-gap: 768px; }
.gap-y-768 { row-gap: 768px; }
.gap-1024   { gap: 1024px; }
.gap-x-1024 { column-gap: 1024px; }
.gap-y-1024 { row-gap: 1024px; }

/* @SANTYMOD:sizing */

/* ── Width ── */
.set-width-0 { width: 0px; }
.set-width-1 { width: 1px; }
.set-width-2 { width: 2px; }
.set-width-3 { width: 3px; }
.set-width-4 { width: 4px; }
.set-width-5 { width: 5px; }
.set-width-6 { width: 6px; }
.set-width-8 { width: 8px; }
.set-width-10 { width: 10px; }
.set-width-12 { width: 12px; }
.set-width-14 { width: 14px; }
.set-width-16 { width: 16px; }
.set-width-18 { width: 18px; }
.set-width-20 { width: 20px; }
.set-width-24 { width: 24px; }
.set-width-28 { width: 28px; }
.set-width-32 { width: 32px; }
.set-width-40 { width: 40px; }
.set-width-48 { width: 48px; }
.set-width-56 { width: 56px; }
.set-width-64 { width: 64px; }
.set-width-80 { width: 80px; }
.set-width-96 { width: 96px; }
.set-width-128 { width: 128px; }
.set-width-160 { width: 160px; }
.set-width-192 { width: 192px; }
.set-width-256 { width: 256px; }
.set-width-320 { width: 320px; }
.set-width-384 { width: 384px; }
.set-width-512 { width: 512px; }
.set-width-640 { width: 640px; }
.set-width-768 { width: 768px; }
.set-width-1024 { width: 1024px; }
.set-width-1-of-2 { width: 50%; }
.set-width-1-of-3 { width: 33.333333%; }
.set-width-1-of-4 { width: 25%; }
.set-width-1-of-5 { width: 20%; }
.set-width-1-of-6 { width: 16.666667%; }
.set-width-1-of-12 { width: 8.333333%; }
.set-width-2-of-3 { width: 66.666667%; }
.set-width-2-of-4 { width: 50%; }
.set-width-2-of-5 { width: 40%; }
.set-width-2-of-6 { width: 33.333333%; }
.set-width-2-of-12 { width: 16.666667%; }
.set-width-3-of-4 { width: 75%; }
.set-width-3-of-5 { width: 60%; }
.set-width-3-of-6 { width: 50%; }
.set-width-3-of-12 { width: 25%; }
.set-width-4-of-5 { width: 80%; }
.set-width-4-of-6 { width: 66.666667%; }
.set-width-4-of-12 { width: 33.333333%; }
.set-width-5-of-6 { width: 83.333333%; }
.set-width-5-of-12 { width: 41.666667%; }
.set-width-6-of-12 { width: 50%; }
.set-width-7-of-12 { width: 58.333333%; }
.set-width-8-of-12 { width: 66.666667%; }
.set-width-9-of-12 { width: 75%; }
.set-width-10-of-12 { width: 83.333333%; }
.set-width-11-of-12 { width: 91.666667%; }
.set-width-full   { width: 100%; }
.set-width-screen { width: 100vw; }
.set-width-auto   { width: auto; }
.set-width-min    { width: min-content; }
.set-width-max    { width: max-content; }
.set-width-fit    { width: fit-content; }

/* ── Height ── */
.set-height-0 { height: 0px; }
.set-height-1 { height: 1px; }
.set-height-2 { height: 2px; }
.set-height-3 { height: 3px; }
.set-height-4 { height: 4px; }
.set-height-5 { height: 5px; }
.set-height-6 { height: 6px; }
.set-height-8 { height: 8px; }
.set-height-10 { height: 10px; }
.set-height-12 { height: 12px; }
.set-height-14 { height: 14px; }
.set-height-16 { height: 16px; }
.set-height-18 { height: 18px; }
.set-height-20 { height: 20px; }
.set-height-24 { height: 24px; }
.set-height-28 { height: 28px; }
.set-height-32 { height: 32px; }
.set-height-40 { height: 40px; }
.set-height-48 { height: 48px; }
.set-height-56 { height: 56px; }
.set-height-64 { height: 64px; }
.set-height-80 { height: 80px; }
.set-height-96 { height: 96px; }
.set-height-128 { height: 128px; }
.set-height-160 { height: 160px; }
.set-height-192 { height: 192px; }
.set-height-256 { height: 256px; }
.set-height-320 { height: 320px; }
.set-height-384 { height: 384px; }
.set-height-512 { height: 512px; }
.set-height-640 { height: 640px; }
.set-height-768 { height: 768px; }
.set-height-1024 { height: 1024px; }
.set-height-full   { height: 100%; }
.set-height-screen { height: 100vh; }
.set-height-auto   { height: auto; }
.set-height-min    { height: min-content; }
.set-height-max    { height: max-content; }
.set-height-fit    { height: fit-content; }

/* ── Min/Max Width/Height ── */
.min-width-0  { min-width: 0px; }
.max-width-0  { max-width: 0px; }
.min-height-0 { min-height: 0px; }
.max-height-0 { max-height: 0px; }
.min-width-1  { min-width: 1px; }
.max-width-1  { max-width: 1px; }
.min-height-1 { min-height: 1px; }
.max-height-1 { max-height: 1px; }
.min-width-2  { min-width: 2px; }
.max-width-2  { max-width: 2px; }
.min-height-2 { min-height: 2px; }
.max-height-2 { max-height: 2px; }
.min-width-3  { min-width: 3px; }
.max-width-3  { max-width: 3px; }
.min-height-3 { min-height: 3px; }
.max-height-3 { max-height: 3px; }
.min-width-4  { min-width: 4px; }
.max-width-4  { max-width: 4px; }
.min-height-4 { min-height: 4px; }
.max-height-4 { max-height: 4px; }
.min-width-5  { min-width: 5px; }
.max-width-5  { max-width: 5px; }
.min-height-5 { min-height: 5px; }
.max-height-5 { max-height: 5px; }
.min-width-6  { min-width: 6px; }
.max-width-6  { max-width: 6px; }
.min-height-6 { min-height: 6px; }
.max-height-6 { max-height: 6px; }
.min-width-8  { min-width: 8px; }
.max-width-8  { max-width: 8px; }
.min-height-8 { min-height: 8px; }
.max-height-8 { max-height: 8px; }
.min-width-10  { min-width: 10px; }
.max-width-10  { max-width: 10px; }
.min-height-10 { min-height: 10px; }
.max-height-10 { max-height: 10px; }
.min-width-12  { min-width: 12px; }
.max-width-12  { max-width: 12px; }
.min-height-12 { min-height: 12px; }
.max-height-12 { max-height: 12px; }
.min-width-14  { min-width: 14px; }
.max-width-14  { max-width: 14px; }
.min-height-14 { min-height: 14px; }
.max-height-14 { max-height: 14px; }
.min-width-16  { min-width: 16px; }
.max-width-16  { max-width: 16px; }
.min-height-16 { min-height: 16px; }
.max-height-16 { max-height: 16px; }
.min-width-18  { min-width: 18px; }
.max-width-18  { max-width: 18px; }
.min-height-18 { min-height: 18px; }
.max-height-18 { max-height: 18px; }
.min-width-20  { min-width: 20px; }
.max-width-20  { max-width: 20px; }
.min-height-20 { min-height: 20px; }
.max-height-20 { max-height: 20px; }
.min-width-24  { min-width: 24px; }
.max-width-24  { max-width: 24px; }
.min-height-24 { min-height: 24px; }
.max-height-24 { max-height: 24px; }
.min-width-28  { min-width: 28px; }
.max-width-28  { max-width: 28px; }
.min-height-28 { min-height: 28px; }
.max-height-28 { max-height: 28px; }
.min-width-32  { min-width: 32px; }
.max-width-32  { max-width: 32px; }
.min-height-32 { min-height: 32px; }
.max-height-32 { max-height: 32px; }
.min-width-40  { min-width: 40px; }
.max-width-40  { max-width: 40px; }
.min-height-40 { min-height: 40px; }
.max-height-40 { max-height: 40px; }
.min-width-48  { min-width: 48px; }
.max-width-48  { max-width: 48px; }
.min-height-48 { min-height: 48px; }
.max-height-48 { max-height: 48px; }
.min-width-56  { min-width: 56px; }
.max-width-56  { max-width: 56px; }
.min-height-56 { min-height: 56px; }
.max-height-56 { max-height: 56px; }
.min-width-64  { min-width: 64px; }
.max-width-64  { max-width: 64px; }
.min-height-64 { min-height: 64px; }
.max-height-64 { max-height: 64px; }
.min-width-80  { min-width: 80px; }
.max-width-80  { max-width: 80px; }
.min-height-80 { min-height: 80px; }
.max-height-80 { max-height: 80px; }
.min-width-96  { min-width: 96px; }
.max-width-96  { max-width: 96px; }
.min-height-96 { min-height: 96px; }
.max-height-96 { max-height: 96px; }
.min-width-128  { min-width: 128px; }
.max-width-128  { max-width: 128px; }
.min-height-128 { min-height: 128px; }
.max-height-128 { max-height: 128px; }
.min-width-160  { min-width: 160px; }
.max-width-160  { max-width: 160px; }
.min-height-160 { min-height: 160px; }
.max-height-160 { max-height: 160px; }
.min-width-192  { min-width: 192px; }
.max-width-192  { max-width: 192px; }
.min-height-192 { min-height: 192px; }
.max-height-192 { max-height: 192px; }
.min-width-256  { min-width: 256px; }
.max-width-256  { max-width: 256px; }
.min-height-256 { min-height: 256px; }
.max-height-256 { max-height: 256px; }
.min-width-320  { min-width: 320px; }
.max-width-320  { max-width: 320px; }
.min-height-320 { min-height: 320px; }
.max-height-320 { max-height: 320px; }
.min-width-384  { min-width: 384px; }
.max-width-384  { max-width: 384px; }
.min-height-384 { min-height: 384px; }
.max-height-384 { max-height: 384px; }
.min-width-512  { min-width: 512px; }
.max-width-512  { max-width: 512px; }
.min-height-512 { min-height: 512px; }
.max-height-512 { max-height: 512px; }
.min-width-full   { min-width: 100%; }
.max-width-full   { max-width: 100%; }
.min-width-screen { min-width: 100vw; }
.max-width-screen { max-width: 100vw; }
.min-height-full   { min-height: 100%; }
.max-height-full   { max-height: 100%; }
.min-height-screen { min-height: 100vh; }
.max-height-screen { max-height: 100vh; }
.min-width-none    { min-width: none; }
.max-width-none    { max-width: none; }

/* @SANTYMOD:borders */

/* ── Border Width ── */
.add-border-0        { border: 0px solid; }
.add-border-top-0    { border-top: 0px solid; }
.add-border-bottom-0 { border-bottom: 0px solid; }
.add-border-left-0   { border-left: 0px solid; }
.add-border-right-0  { border-right: 0px solid; }
.add-border-x-0      { border-left: 0px solid; border-right: 0px solid; }
.add-border-y-0      { border-top: 0px solid; border-bottom: 0px solid; }
.add-border-1        { border: 1px solid; }
.add-border-top-1    { border-top: 1px solid; }
.add-border-bottom-1 { border-bottom: 1px solid; }
.add-border-left-1   { border-left: 1px solid; }
.add-border-right-1  { border-right: 1px solid; }
.add-border-x-1      { border-left: 1px solid; border-right: 1px solid; }
.add-border-y-1      { border-top: 1px solid; border-bottom: 1px solid; }
.add-border-2        { border: 2px solid; }
.add-border-top-2    { border-top: 2px solid; }
.add-border-bottom-2 { border-bottom: 2px solid; }
.add-border-left-2   { border-left: 2px solid; }
.add-border-right-2  { border-right: 2px solid; }
.add-border-x-2      { border-left: 2px solid; border-right: 2px solid; }
.add-border-y-2      { border-top: 2px solid; border-bottom: 2px solid; }
.add-border-3        { border: 3px solid; }
.add-border-top-3    { border-top: 3px solid; }
.add-border-bottom-3 { border-bottom: 3px solid; }
.add-border-left-3   { border-left: 3px solid; }
.add-border-right-3  { border-right: 3px solid; }
.add-border-x-3      { border-left: 3px solid; border-right: 3px solid; }
.add-border-y-3      { border-top: 3px solid; border-bottom: 3px solid; }
.add-border-4        { border: 4px solid; }
.add-border-top-4    { border-top: 4px solid; }
.add-border-bottom-4 { border-bottom: 4px solid; }
.add-border-left-4   { border-left: 4px solid; }
.add-border-right-4  { border-right: 4px solid; }
.add-border-x-4      { border-left: 4px solid; border-right: 4px solid; }
.add-border-y-4      { border-top: 4px solid; border-bottom: 4px solid; }
.add-border-5        { border: 5px solid; }
.add-border-top-5    { border-top: 5px solid; }
.add-border-bottom-5 { border-bottom: 5px solid; }
.add-border-left-5   { border-left: 5px solid; }
.add-border-right-5  { border-right: 5px solid; }
.add-border-x-5      { border-left: 5px solid; border-right: 5px solid; }
.add-border-y-5      { border-top: 5px solid; border-bottom: 5px solid; }
.add-border-6        { border: 6px solid; }
.add-border-top-6    { border-top: 6px solid; }
.add-border-bottom-6 { border-bottom: 6px solid; }
.add-border-left-6   { border-left: 6px solid; }
.add-border-right-6  { border-right: 6px solid; }
.add-border-x-6      { border-left: 6px solid; border-right: 6px solid; }
.add-border-y-6      { border-top: 6px solid; border-bottom: 6px solid; }
.add-border-8        { border: 8px solid; }
.add-border-top-8    { border-top: 8px solid; }
.add-border-bottom-8 { border-bottom: 8px solid; }
.add-border-left-8   { border-left: 8px solid; }
.add-border-right-8  { border-right: 8px solid; }
.add-border-x-8      { border-left: 8px solid; border-right: 8px solid; }
.add-border-y-8      { border-top: 8px solid; border-bottom: 8px solid; }
.add-border-10        { border: 10px solid; }
.add-border-top-10    { border-top: 10px solid; }
.add-border-bottom-