size-spacing.css

:root {
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 3rem;
    --spacing-6: 4rem;
    --spacing-7: 5rem;
    --spacing-8: 6rem;
    --spacing-9: 7rem;
    --spacing-10: 8rem;
}


/* Margin All Sides */
.m-1 {margin: var(--spacing-1) !important;}
.m-2 {margin: var(--spacing-2) !important;}
.m-3 {margin: var(--spacing-3) !important;}
.m-4 {margin: var(--spacing-4) !important;}
.m-5 {margin: var(--spacing-5) !important;}
.m-6 {margin: var(--spacing-6) !important;}
.m-7 {margin: var(--spacing-7) !important;}
.m-8 {margin: var(--spacing-8) !important;}
.m-9 {margin: var(--spacing-9) !important;}
.m-10 {margin: var(--spacing-10) !important;}

/* Margin Top */
.mt-1 {margin-top: var(--spacing-1) !important;}
.mt-2 {margin-top: var(--spacing-2) !important;}
.mt-3 {margin-top: var(--spacing-3) !important;}
.mt-4 {margin-top: var(--spacing-4) !important;}
.mt-5 {margin-top: var(--spacing-5) !important;}
.mt-6 {margin-top: var(--spacing-6) !important;}
.mt-7 {margin-top: var(--spacing-7) !important;}
.mt-8 {margin-top: var(--spacing-8) !important;}
.mt-9 {margin-top: var(--spacing-9) !important;}
.mt-10 {margin-top: var(--spacing-10) !important;}

/* Margin Bottom */
.mb-1 {margin-bottom: var(--spacing-1) !important;}
.mb-2 {margin-bottom: var(--spacing-2) !important;}
.mb-3 {margin-bottom: var(--spacing-3) !important;}
.mb-4 {margin-bottom: var(--spacing-4) !important;}
.mb-5 {margin-bottom: var(--spacing-5) !important;}
.mb-6 {margin-bottom: var(--spacing-6) !important;}
.mb-7 {margin-bottom: var(--spacing-7) !important;}
.mb-8 {margin-bottom: var(--spacing-8) !important;}
.mb-9 {margin-bottom: var(--spacing-9) !important;}
.mb-10 {margin-bottom: var(--spacing-10) !important;}

/* Margin Left (Start) */
.ml-1 {margin-left: var(--spacing-1) !important;}
.ml-2 {margin-left: var(--spacing-2) !important;}
.ml-3 {margin-left: var(--spacing-3) !important;}
.ml-4 {margin-left: var(--spacing-4) !important;}
.ml-5 {margin-left: var(--spacing-5) !important;}
.ml-6 {margin-left: var(--spacing-6) !important;}
.ml-7 {margin-left: var(--spacing-7) !important;}
.ml-8 {margin-left: var(--spacing-8) !important;}
.ml-9 {margin-left: var(--spacing-9) !important;}
.ml-10 {margin-left: var(--spacing-10) !important;}

/* Margin Right (End) */
.mr-1 {margin-right: var(--spacing-1) !important;}
.mr-2 {margin-right: var(--spacing-2) !important;}
.mr-3 {margin-right: var(--spacing-3) !important;}
.mr-4 {margin-right: var(--spacing-4) !important;}
.mr-5 {margin-right: var(--spacing-5) !important;}
.mr-6 {margin-right: var(--spacing-6) !important;}
.mr-7 {margin-right: var(--spacing-7) !important;}
.mr-8 {margin-right: var(--spacing-8) !important;}
.mr-9 {margin-right: var(--spacing-9) !important;}
.mr-10 {margin-right: var(--spacing-10) !important;}

/* Margin Horizontal (Left & Right) */
.mx-1 {margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important;}
.mx-2 {margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important;}
.mx-3 {margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important;}
.mx-4 {margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important;}
.mx-5 {margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important;}
.mx-6 {margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important;}
.mx-7 {margin-left: var(--spacing-7) !important; margin-right: var(--spacing-7) !important;}
.mx-8 {margin-left: var(--spacing-8) !important; margin-right: var(--spacing-8) !important;}
.mx-9 {margin-left: var(--spacing-9) !important; margin-right: var(--spacing-9) !important;}
.mx-10 {margin-left: var(--spacing-10) !important; margin-right: var(--spacing-10) !important;}

/* Margin Vertical (Top & Bottom) */
.my-1 {margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important;}
.my-2 {margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important;}
.my-3 {margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important;}
.my-4 {margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important;}
.my-5 {margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important;}
.my-6 {margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important;}
.my-7 {margin-top: var(--spacing-7) !important; margin-bottom: var(--spacing-7) !important;}
.my-8 {margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important;}
.my-9 {margin-top: var(--spacing-9) !important; margin-bottom: var(--spacing-9) !important;}
.my-10 {margin-top: var(--spacing-10) !important; margin-bottom: var(--spacing-10) !important;}


/* Auto Margin */
.m-auto {margin: auto !important;}
.mt-auto {margin-top: auto !important;}
.mb-auto {margin-bottom: auto !important;}
.ms-auto {margin-left: auto !important;}
.me-auto {margin-right: auto !important;}
.mx-auto {margin-left: auto !important; margin-right: auto !important;}
.my-auto {margin-top: auto !important; margin-bottom: auto !important;}

/* Padding All Sides */
.p-1 {padding: var(--spacing-1) !important;}
.p-2 {padding: var(--spacing-2) !important;}
.p-3 {padding: var(--spacing-3) !important;}
.p-4 {padding: var(--spacing-4) !important;}
.p-5 {padding: var(--spacing-5) !important;}
.p-6 {padding: var(--spacing-6) !important;}
.p-7 {padding: var(--spacing-7) !important;}
.p-8 {padding: var(--spacing-8) !important;}
.p-9 {padding: var(--spacing-9) !important;}
.p-10 {padding: var(--spacing-10) !important;}

/* Padding Top */
.pt-1 {padding-top: var(--spacing-1) !important;}
.pt-2 {padding-top: var(--spacing-2) !important;}
.pt-3 {padding-top: var(--spacing-3) !important;}
.pt-4 {padding-top: var(--spacing-4) !important;}
.pt-5 {padding-top: var(--spacing-5) !important;}
.pt-6 {padding-top: var(--spacing-6) !important;}
.pt-7 {padding-top: var(--spacing-7) !important;}
.pt-8 {padding-top: var(--spacing-8) !important;}
.pt-9 {padding-top: var(--spacing-9) !important;}
.pt-10 {padding-top: var(--spacing-10) !important;}

/* Padding Bottom */
.pb-1 {padding-bottom: var(--spacing-1) !important;}
.pb-2 {padding-bottom: var(--spacing-2) !important;}
.pb-3 {padding-bottom: var(--spacing-3) !important;}
.pb-4 {padding-bottom: var(--spacing-4) !important;}
.pb-5 {padding-bottom: var(--spacing-5) !important;}
.pb-6 {padding-bottom: var(--spacing-6) !important;}
.pb-7 {padding-bottom: var(--spacing-7) !important;}
.pb-8 {padding-bottom: var(--spacing-8) !important;}
.pb-9 {padding-bottom: var(--spacing-9) !important;}
.pb-10 {padding-bottom: var(--spacing-10) !important;}

/* Padding Left (Start) */
.pl-1 {padding-left: var(--spacing-1) !important;}
.pl-2 {padding-left: var(--spacing-2) !important;}
.pl-3 {padding-left: var(--spacing-3) !important;}
.pl-4 {padding-left: var(--spacing-4) !important;}
.pl-5 {padding-left: var(--spacing-5) !important;}
.pl-6 {padding-left: var(--spacing-6) !important;}
.pl-7 {padding-left: var(--spacing-7) !important;}
.pl-8 {padding-left: var(--spacing-8) !important;}
.pl-9 {padding-left: var(--spacing-9) !important;}
.pl-10 {padding-left: var(--spacing-10) !important;}

/* Padding Right (End) */
.pr-1 {padding-right: var(--spacing-1) !important;}
.pr-2 {padding-right: var(--spacing-2) !important;}
.pr-3 {padding-right: var(--spacing-3) !important;}
.pr-4 {padding-right: var(--spacing-4) !important;}
.pr-5 {padding-right: var(--spacing-5) !important;}
.pr-6 {padding-right: var(--spacing-6) !important;}
.pr-7 {padding-right: var(--spacing-7) !important;}
.pr-8 {padding-right: var(--spacing-8) !important;}
.pr-9 {padding-right: var(--spacing-9) !important;}
.pr-10 {padding-right: var(--spacing-10) !important;}

/* Padding Horizontal (Left & Right) */
.px-1 {padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important;}
.px-2 {padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important;}
.px-3 {padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important;}
.px-4 {padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important;}
.px-5 {padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important;}
.px-6 {padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important;}
.px-7 {padding-left: var(--spacing-7) !important; padding-right: var(--spacing-7) !important;}
.px-8 {padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important;}
.px-9 {padding-left: var(--spacing-9) !important; padding-right: var(--spacing-9) !important;}
.px-10 {padding-left: var(--spacing-10) !important; padding-right: var(--spacing-10) !important;}

/* Padding Vertical (Top & Bottom) */
.py-1 {padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important;}
.py-2 {padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important;}
.py-3 {padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important;}
.py-4 {padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important;}
.py-5 {padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important;}
.py-6 {padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important;}
.py-7 {padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important;}
.py-8 {padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important;}
.py-9 {padding-top: var(--spacing-9) !important; padding-bottom: var(--spacing-9) !important;}
.py-10 {padding-top: var(--spacing-10) !important; padding-bottom: var(--spacing-10) !important;}

/*
┌──────────────────────┐
│       Display        │
└──────────────────────┘
*/
.d-none {display: none !important;}
.d-inline {display: inline !important;}
.d-inline-block {display: inline-block !important;}
.d-block {display: block !important;}
.d-table {display: table !important;}
.d-table-row {display: table-row !important;}
.d-table-cell {display: table-cell !important;}
.d-flex {display: flex !important;}
.d-inline-flex {display: inline-flex !important;}

/*
┌──────────────────────┐
│  FLEXBOX CSS CODES   │
└──────────────────────┘
*/

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

/* Justify content */
.justify-content-start {justify-content: flex-start;}
.justify-content-end {justify-content: flex-end;}
.justify-content-center {justify-content: center;}
.justify-content-between {justify-content: space-between;}
.justify-content-around {justify-content: space-around;}
.justify-content-evenly {justify-content: space-evenly;}

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

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

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

/* Flex gap */
.gap-1 {gap: var(--spacing-1);}
.gap-2 {gap: var(--spacing-2);}
.gap-3 {gap: var(--spacing-3);}
.gap-4 {gap: var(--spacing-4);}
.gap-5 {gap: var(--spacing-5);}
.gap-6 {gap: var(--spacing-6);}
.gap-7 {gap: var(--spacing-7);}
.gap-8 {gap: var(--spacing-8);}
.gap-9 {gap: var(--spacing-9);}
.gap-10 {gap: var(--spacing-10);}

/* Flex fill */
.flex-fill {flex: 1 1 auto;}

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

/* Order */
.order-first {order: -1;}
.order-0 {order: 0;}
.order-1 {order: 1;}
.order-2 {order: 2;}
.order-3 {order: 3;}
.order-4 {order: 4;}
.order-5 {order: 5;}
.order-last {order: 6;}

/*
┌──────────────────────┐
│    GRID CSS CODES    │
└──────────────────────┘
*/

/* Row */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

/* Columns - main */
.col {
    flex: 1 0 0;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {width: 8.33333333%;}
.col-2 {width: 16.66666667%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33333333%;}
.col-5 {width: 41.66666667%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33333333%;}
.col-8 {width: 66.66666667%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33333333%;}
.col-11 {width: 91.66666667%;}
.col-12 {width: 100%;}

/* Offset */
.offset-1 {margin-left: 8.33333333%;}
.offset-2 {margin-left: 16.66666667%;}
.offset-3 {margin-left: 25%;}
.offset-4 {margin-left: 33.33333333%;}
.offset-5 {margin-left: 41.66666667%;}
.offset-6 {margin-left: 50%;}
.offset-7 {margin-left: 58.33333333%;}
.offset-8 {margin-left: 66.66666667%;}
.offset-9 {margin-left: 75%;}
.offset-10 {margin-left: 83.33333333%;}
.offset-11 {margin-left: 91.66666667%;}

/* Gutters */
.g-0 {
    margin-right: 0;
    margin-left: 0;
}
.g-0 > .col,
.g-0 > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.g-1 {
    margin-right: -4px;
    margin-left: -4px;
}
.g-1 > .col,
.g-1 > [class*="col-"] {
    padding-right: 4px;
    padding-left: 4px;
}

.g-2 {
    margin-right: -8px;
    margin-left: -8px;
}
.g-2 > .col,
.g-2 > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.g-3 {
    margin-right: -12px;
    margin-left: -12px;
}
.g-3 > .col,
.g-3 > [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
}

.g-4 {
    margin-right: -16px;
    margin-left: -16px;
}
.g-4 > .col,
.g-4 > [class*="col-"] {
    padding-right: 16px;
    padding-left: 16px;
}

.g-5 {
    margin-right: -20px;
    margin-left: -20px;
}
.g-5 > .col,
.g-5 > [class*="col-"] {
    padding-right: 20px;
    padding-left: 20px;
}

/* Row columns */
.row-cols-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.row-cols-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

/* Column control */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    flex-shrink: 0;
    max-width: 100%;
}