First child spacing styles

The first child spacing styles allow you to modify the spacing (i.e. margin and padding) for the first child in an element.

Available spacing styles

• All sides spacing
• Bottom spacing
• End spacing
• Horizontal spacing
• Start spacing
• Top spacing
• Vertical spacing

Combined import

You can import all of the first child spacing styles with the following import:

@import 'cacao-css/dist/child-spacing/first-child/spacing/combined-import.css';

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/child-spacing/first-child/spacing/all.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical.css';

Granular imports

If you only need to import a specific size of the first child spacing styles then you can import the individual file.

All sides spacing

@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-0.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-1.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-2.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-3.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-4.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-5.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-6.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-7.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-8.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-9.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-10.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-11.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-12.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-13.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-14.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/all/all-15.css';

Bottom spacing

@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-0.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-1.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-2.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-3.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-4.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-5.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-6.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-7.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-8.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-9.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-10.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-11.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-12.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-13.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-14.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/bottom/bottom-15.css';

End spacing

@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-0.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-1.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-2.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-3.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-4.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-5.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-6.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-7.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-8.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-9.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-10.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-11.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-12.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-13.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-14.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/end/end-15.css';

Horizontal spacing

@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-0.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-1.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-2.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-3.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-4.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-5.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-6.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-7.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-8.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-9.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-10.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-11.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-12.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-13.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-14.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/horizontal/horizontal-15.css';

Start spacing

@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-0.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-1.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-2.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-3.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-4.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-5.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-6.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-7.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-8.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-9.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-10.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-11.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-12.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-13.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-14.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/start/start-15.css';

Top spacing

@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-0.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-1.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-2.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-3.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-4.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-5.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-6.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-7.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-8.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-9.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-10.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-11.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-12.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-13.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-14.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-15.css';

Vertical spacing

@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-0.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-1.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-2.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-3.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-4.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-5.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-6.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-7.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-8.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-9.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-10.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-11.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-12.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-13.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-14.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/vertical/vertical-15.css';

Source css

All sides spacing

child-spacing/first-child/spacing/all.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-0 > *:first-child {
    margin: var(--child-spacing-0);
    padding: var(--child-spacing-0);
}

.first-child-s-1 > *:first-child {
    margin: var(--child-spacing-1);
    padding: var(--child-spacing-1);
}

.first-child-s-2 > *:first-child {
    margin: var(--child-spacing-2);
    padding: var(--child-spacing-2);
}

.first-child-s-3 > *:first-child {
    margin: var(--child-spacing-3);
    padding: var(--child-spacing-3);
}

.first-child-s-4 > *:first-child {
    margin: var(--child-spacing-4);
    padding: var(--child-spacing-4);
}

.first-child-s-5 > *:first-child {
    margin: var(--child-spacing-5);
    padding: var(--child-spacing-5);
}

.first-child-s-6 > *:first-child {
    margin: var(--child-spacing-6);
    padding: var(--child-spacing-6);
}

.first-child-s-7 > *:first-child {
    margin: var(--child-spacing-7);
    padding: var(--child-spacing-7);
}

.first-child-s-8 > *:first-child {
    margin: var(--child-spacing-8);
    padding: var(--child-spacing-8);
}

.first-child-s-9 > *:first-child {
    margin: var(--child-spacing-9);
    padding: var(--child-spacing-9);
}

.first-child-s-10 > *:first-child {
    margin: var(--child-spacing-10);
    padding: var(--child-spacing-10);
}

.first-child-s-11 > *:first-child {
    margin: var(--child-spacing-11);
    padding: var(--child-spacing-11);
}

.first-child-s-12 > *:first-child {
    margin: var(--child-spacing-12);
    padding: var(--child-spacing-12);
}

.first-child-s-13 > *:first-child {
    margin: var(--child-spacing-13);
    padding: var(--child-spacing-13);
}

.first-child-s-14 > *:first-child {
    margin: var(--child-spacing-14);
    padding: var(--child-spacing-14);
}

.first-child-s-15 > *:first-child {
    margin: var(--child-spacing-15);
    padding: var(--child-spacing-15);
}

All sides spacing - 0

child-spacing/first-child/spacing/all/all-0.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-0 > *:first-child {
    margin: var(--child-spacing-0);
    padding: var(--child-spacing-0);
}

All sides spacing - 1

child-spacing/first-child/spacing/all/all-1.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-1 > *:first-child {
    margin: var(--child-spacing-1);
    padding: var(--child-spacing-1);
}

All sides spacing - 2

child-spacing/first-child/spacing/all/all-2.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-2 > *:first-child {
    margin: var(--child-spacing-2);
    padding: var(--child-spacing-2);
}

All sides spacing - 3

child-spacing/first-child/spacing/all/all-3.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-3 > *:first-child {
    margin: var(--child-spacing-3);
    padding: var(--child-spacing-3);
}

All sides spacing - 4

child-spacing/first-child/spacing/all/all-4.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-4 > *:first-child {
    margin: var(--child-spacing-4);
    padding: var(--child-spacing-4);
}

All sides spacing - 5

child-spacing/first-child/spacing/all/all-5.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-5 > *:first-child {
    margin: var(--child-spacing-5);
    padding: var(--child-spacing-5);
}

All sides spacing - 6

child-spacing/first-child/spacing/all/all-6.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-6 > *:first-child {
    margin: var(--child-spacing-6);
    padding: var(--child-spacing-6);
}

All sides spacing - 7

child-spacing/first-child/spacing/all/all-7.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-7 > *:first-child {
    margin: var(--child-spacing-7);
    padding: var(--child-spacing-7);
}

All sides spacing - 8

child-spacing/first-child/spacing/all/all-8.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-8 > *:first-child {
    margin: var(--child-spacing-8);
    padding: var(--child-spacing-8);
}

All sides spacing - 9

child-spacing/first-child/spacing/all/all-9.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-9 > *:first-child {
    margin: var(--child-spacing-9);
    padding: var(--child-spacing-9);
}

All sides spacing - 10

child-spacing/first-child/spacing/all/all-10.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-10 > *:first-child {
    margin: var(--child-spacing-10);
    padding: var(--child-spacing-10);
}

All sides spacing - 11

child-spacing/first-child/spacing/all/all-11.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-11 > *:first-child {
    margin: var(--child-spacing-11);
    padding: var(--child-spacing-11);
}

All sides spacing - 12

child-spacing/first-child/spacing/all/all-12.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-12 > *:first-child {
    margin: var(--child-spacing-12);
    padding: var(--child-spacing-12);
}

All sides spacing - 13

child-spacing/first-child/spacing/all/all-13.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-13 > *:first-child {
    margin: var(--child-spacing-13);
    padding: var(--child-spacing-13);
}

All sides spacing - 14

child-spacing/first-child/spacing/all/all-14.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-14 > *:first-child {
    margin: var(--child-spacing-14);
    padding: var(--child-spacing-14);
}

All sides spacing - 15

child-spacing/first-child/spacing/all/all-15.css

/* =========================================================================== *
   First child all sides margin and padding utilities
 * =========================================================================== */


.first-child-s-15 > *:first-child {
    margin: var(--child-spacing-15);
    padding: var(--child-spacing-15);
}

Bottom spacing

child-spacing/first-child/spacing/bottom.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-0 > *:first-child {
    margin-bottom: var(--child-spacing-0);
    padding-bottom: var(--child-spacing-0);
}

.first-child-sb-1 > *:first-child {
    margin-bottom: var(--child-spacing-1);
    padding-bottom: var(--child-spacing-1);
}

.first-child-sb-2 > *:first-child {
    margin-bottom: var(--child-spacing-2);
    padding-bottom: var(--child-spacing-2);
}

.first-child-sb-3 > *:first-child {
    margin-bottom: var(--child-spacing-3);
    padding-bottom: var(--child-spacing-3);
}

.first-child-sb-4 > *:first-child {
    margin-bottom: var(--child-spacing-4);
    padding-bottom: var(--child-spacing-4);
}

.first-child-sb-5 > *:first-child {
    margin-bottom: var(--child-spacing-5);
    padding-bottom: var(--child-spacing-5);
}

.first-child-sb-6 > *:first-child {
    margin-bottom: var(--child-spacing-6);
    padding-bottom: var(--child-spacing-6);
}

.first-child-sb-7 > *:first-child {
    margin-bottom: var(--child-spacing-7);
    padding-bottom: var(--child-spacing-7);
}

.first-child-sb-8 > *:first-child {
    margin-bottom: var(--child-spacing-8);
    padding-bottom: var(--child-spacing-8);
}

.first-child-sb-9 > *:first-child {
    margin-bottom: var(--child-spacing-9);
    padding-bottom: var(--child-spacing-9);
}

.first-child-sb-10 > *:first-child {
    margin-bottom: var(--child-spacing-10);
    padding-bottom: var(--child-spacing-10);
}

.first-child-sb-11 > *:first-child {
    margin-bottom: var(--child-spacing-11);
    padding-bottom: var(--child-spacing-11);
}

.first-child-sb-12 > *:first-child {
    margin-bottom: var(--child-spacing-12);
    padding-bottom: var(--child-spacing-12);
}

.first-child-sb-13 > *:first-child {
    margin-bottom: var(--child-spacing-13);
    padding-bottom: var(--child-spacing-13);
}

.first-child-sb-14 > *:first-child {
    margin-bottom: var(--child-spacing-14);
    padding-bottom: var(--child-spacing-14);
}

.first-child-sb-15 > *:first-child {
    margin-bottom: var(--child-spacing-15);
    padding-bottom: var(--child-spacing-15);
}

Bottom spacing - 0

child-spacing/first-child/spacing/bottom/bottom-0.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-0 > *:first-child {
    margin-bottom: var(--child-spacing-0);
    padding-bottom: var(--child-spacing-0);
}

Bottom spacing - 1

child-spacing/first-child/spacing/bottom/bottom-1.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-1 > *:first-child {
    margin-bottom: var(--child-spacing-1);
    padding-bottom: var(--child-spacing-1);
}

Bottom spacing - 2

child-spacing/first-child/spacing/bottom/bottom-2.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-2 > *:first-child {
    margin-bottom: var(--child-spacing-2);
    padding-bottom: var(--child-spacing-2);
}

Bottom spacing - 3

child-spacing/first-child/spacing/bottom/bottom-3.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-3 > *:first-child {
    margin-bottom: var(--child-spacing-3);
    padding-bottom: var(--child-spacing-3);
}

Bottom spacing - 4

child-spacing/first-child/spacing/bottom/bottom-4.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-4 > *:first-child {
    margin-bottom: var(--child-spacing-4);
    padding-bottom: var(--child-spacing-4);
}

Bottom spacing - 5

child-spacing/first-child/spacing/bottom/bottom-5.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-5 > *:first-child {
    margin-bottom: var(--child-spacing-5);
    padding-bottom: var(--child-spacing-5);
}

Bottom spacing - 6

child-spacing/first-child/spacing/bottom/bottom-6.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-6 > *:first-child {
    margin-bottom: var(--child-spacing-6);
    padding-bottom: var(--child-spacing-6);
}

Bottom spacing - 7

child-spacing/first-child/spacing/bottom/bottom-7.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-7 > *:first-child {
    margin-bottom: var(--child-spacing-7);
    padding-bottom: var(--child-spacing-7);
}

Bottom spacing - 8

child-spacing/first-child/spacing/bottom/bottom-8.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-8 > *:first-child {
    margin-bottom: var(--child-spacing-8);
    padding-bottom: var(--child-spacing-8);
}

Bottom spacing - 9

child-spacing/first-child/spacing/bottom/bottom-9.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-9 > *:first-child {
    margin-bottom: var(--child-spacing-9);
    padding-bottom: var(--child-spacing-9);
}

Bottom spacing - 10

child-spacing/first-child/spacing/bottom/bottom-10.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-10 > *:first-child {
    margin-bottom: var(--child-spacing-10);
    padding-bottom: var(--child-spacing-10);
}

Bottom spacing - 11

child-spacing/first-child/spacing/bottom/bottom-11.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-11 > *:first-child {
    margin-bottom: var(--child-spacing-11);
    padding-bottom: var(--child-spacing-11);
}

Bottom spacing - 12

child-spacing/first-child/spacing/bottom/bottom-12.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-12 > *:first-child {
    margin-bottom: var(--child-spacing-12);
    padding-bottom: var(--child-spacing-12);
}

Bottom spacing - 13

child-spacing/first-child/spacing/bottom/bottom-13.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-13 > *:first-child {
    margin-bottom: var(--child-spacing-13);
    padding-bottom: var(--child-spacing-13);
}

Bottom spacing - 14

child-spacing/first-child/spacing/bottom/bottom-14.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-14 > *:first-child {
    margin-bottom: var(--child-spacing-14);
    padding-bottom: var(--child-spacing-14);
}

Bottom spacing - 15

child-spacing/first-child/spacing/bottom/bottom-15.css

/* =========================================================================== *
   First child bottom margin and padding utilities
 * =========================================================================== */


.first-child-sb-15 > *:first-child {
    margin-bottom: var(--child-spacing-15);
    padding-bottom: var(--child-spacing-15);
}

End spacing

child-spacing/first-child/spacing/end.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-0 > *:first-child {
    margin-right: var(--child-spacing-0);
    padding-right: var(--child-spacing-0);
}

.first-child-se-1 > *:first-child {
    margin-right: var(--child-spacing-1);
    padding-right: var(--child-spacing-1);
}

.first-child-se-2 > *:first-child {
    margin-right: var(--child-spacing-2);
    padding-right: var(--child-spacing-2);
}

.first-child-se-3 > *:first-child {
    margin-right: var(--child-spacing-3);
    padding-right: var(--child-spacing-3);
}

.first-child-se-4 > *:first-child {
    margin-right: var(--child-spacing-4);
    padding-right: var(--child-spacing-4);
}

.first-child-se-5 > *:first-child {
    margin-right: var(--child-spacing-5);
    padding-right: var(--child-spacing-5);
}

.first-child-se-6 > *:first-child {
    margin-right: var(--child-spacing-6);
    padding-right: var(--child-spacing-6);
}

.first-child-se-7 > *:first-child {
    margin-right: var(--child-spacing-7);
    padding-right: var(--child-spacing-7);
}

.first-child-se-8 > *:first-child {
    margin-right: var(--child-spacing-8);
    padding-right: var(--child-spacing-8);
}

.first-child-se-9 > *:first-child {
    margin-right: var(--child-spacing-9);
    padding-right: var(--child-spacing-9);
}

.first-child-se-10 > *:first-child {
    margin-right: var(--child-spacing-10);
    padding-right: var(--child-spacing-10);
}

.first-child-se-11 > *:first-child {
    margin-right: var(--child-spacing-11);
    padding-right: var(--child-spacing-11);
}

.first-child-se-12 > *:first-child {
    margin-right: var(--child-spacing-12);
    padding-right: var(--child-spacing-12);
}

.first-child-se-13 > *:first-child {
    margin-right: var(--child-spacing-13);
    padding-right: var(--child-spacing-13);
}

.first-child-se-14 > *:first-child {
    margin-right: var(--child-spacing-14);
    padding-right: var(--child-spacing-14);
}

.first-child-se-15 > *:first-child {
    margin-right: var(--child-spacing-15);
    padding-right: var(--child-spacing-15);
}

End spacing - 0

child-spacing/first-child/spacing/end/end-0.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-0 > *:first-child {
    margin-right: var(--child-spacing-0);
    padding-right: var(--child-spacing-0);
}

End spacing - 1

child-spacing/first-child/spacing/end/end-1.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-1 > *:first-child {
    margin-right: var(--child-spacing-1);
    padding-right: var(--child-spacing-1);
}

End spacing - 2

child-spacing/first-child/spacing/end/end-2.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-2 > *:first-child {
    margin-right: var(--child-spacing-2);
    padding-right: var(--child-spacing-2);
}

End spacing - 3

child-spacing/first-child/spacing/end/end-3.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-3 > *:first-child {
    margin-right: var(--child-spacing-3);
    padding-right: var(--child-spacing-3);
}

End spacing - 4

child-spacing/first-child/spacing/end/end-4.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-4 > *:first-child {
    margin-right: var(--child-spacing-4);
    padding-right: var(--child-spacing-4);
}

End spacing - 5

child-spacing/first-child/spacing/end/end-5.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-5 > *:first-child {
    margin-right: var(--child-spacing-5);
    padding-right: var(--child-spacing-5);
}

End spacing - 6

child-spacing/first-child/spacing/end/end-6.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-6 > *:first-child {
    margin-right: var(--child-spacing-6);
    padding-right: var(--child-spacing-6);
}

End spacing - 7

child-spacing/first-child/spacing/end/end-7.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-7 > *:first-child {
    margin-right: var(--child-spacing-7);
    padding-right: var(--child-spacing-7);
}

End spacing - 8

child-spacing/first-child/spacing/end/end-8.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-8 > *:first-child {
    margin-right: var(--child-spacing-8);
    padding-right: var(--child-spacing-8);
}

End spacing - 9

child-spacing/first-child/spacing/end/end-9.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-9 > *:first-child {
    margin-right: var(--child-spacing-9);
    padding-right: var(--child-spacing-9);
}

End spacing - 10

child-spacing/first-child/spacing/end/end-10.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-10 > *:first-child {
    margin-right: var(--child-spacing-10);
    padding-right: var(--child-spacing-10);
}

End spacing - 11

child-spacing/first-child/spacing/end/end-11.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-11 > *:first-child {
    margin-right: var(--child-spacing-11);
    padding-right: var(--child-spacing-11);
}

End spacing - 12

child-spacing/first-child/spacing/end/end-12.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-12 > *:first-child {
    margin-right: var(--child-spacing-12);
    padding-right: var(--child-spacing-12);
}

End spacing - 13

child-spacing/first-child/spacing/end/end-13.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-13 > *:first-child {
    margin-right: var(--child-spacing-13);
    padding-right: var(--child-spacing-13);
}

End spacing - 14

child-spacing/first-child/spacing/end/end-14.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-14 > *:first-child {
    margin-right: var(--child-spacing-14);
    padding-right: var(--child-spacing-14);
}

End spacing - 15

child-spacing/first-child/spacing/end/end-15.css

/* =========================================================================== *
   First child end margin and padding utilities
 * =========================================================================== */


.first-child-se-15 > *:first-child {
    margin-right: var(--child-spacing-15);
    padding-right: var(--child-spacing-15);
}

Horizontal spacing

child-spacing/first-child/spacing/horizontal.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-0 > *:first-child {
    margin-left: var(--child-spacing-0);
    margin-right: var(--child-spacing-0);
    padding-left: var(--child-spacing-0);
    padding-right: var(--child-spacing-0);
}

.first-child-sx-1 > *:first-child {
    margin-left: var(--child-spacing-1);
    margin-right: var(--child-spacing-1);
    padding-left: var(--child-spacing-1);
    padding-right: var(--child-spacing-1);
}

.first-child-sx-2 > *:first-child {
    margin-left: var(--child-spacing-2);
    margin-right: var(--child-spacing-2);
    padding-left: var(--child-spacing-2);
    padding-right: var(--child-spacing-2);
}

.first-child-sx-3 > *:first-child {
    margin-left: var(--child-spacing-3);
    margin-right: var(--child-spacing-3);
    padding-left: var(--child-spacing-3);
    padding-right: var(--child-spacing-3);
}

.first-child-sx-4 > *:first-child {
    margin-left: var(--child-spacing-4);
    margin-right: var(--child-spacing-4);
    padding-left: var(--child-spacing-4);
    padding-right: var(--child-spacing-4);
}

.first-child-sx-5 > *:first-child {
    margin-left: var(--child-spacing-5);
    margin-right: var(--child-spacing-5);
    padding-left: var(--child-spacing-5);
    padding-right: var(--child-spacing-5);
}

.first-child-sx-6 > *:first-child {
    margin-left: var(--child-spacing-6);
    margin-right: var(--child-spacing-6);
    padding-left: var(--child-spacing-6);
    padding-right: var(--child-spacing-6);
}

.first-child-sx-7 > *:first-child {
    margin-left: var(--child-spacing-7);
    margin-right: var(--child-spacing-7);
    padding-left: var(--child-spacing-7);
    padding-right: var(--child-spacing-7);
}

.first-child-sx-8 > *:first-child {
    margin-left: var(--child-spacing-8);
    margin-right: var(--child-spacing-8);
    padding-left: var(--child-spacing-8);
    padding-right: var(--child-spacing-8);
}

.first-child-sx-9 > *:first-child {
    margin-left: var(--child-spacing-9);
    margin-right: var(--child-spacing-9);
    padding-left: var(--child-spacing-9);
    padding-right: var(--child-spacing-9);
}

.first-child-sx-10 > *:first-child {
    margin-left: var(--child-spacing-10);
    margin-right: var(--child-spacing-10);
    padding-left: var(--child-spacing-10);
    padding-right: var(--child-spacing-10);
}

.first-child-sx-11 > *:first-child {
    margin-left: var(--child-spacing-11);
    margin-right: var(--child-spacing-11);
    padding-left: var(--child-spacing-11);
    padding-right: var(--child-spacing-11);
}

.first-child-sx-12 > *:first-child {
    margin-left: var(--child-spacing-12);
    margin-right: var(--child-spacing-12);
    padding-left: var(--child-spacing-12);
    padding-right: var(--child-spacing-12);
}

.first-child-sx-13 > *:first-child {
    margin-left: var(--child-spacing-13);
    margin-right: var(--child-spacing-13);
    padding-left: var(--child-spacing-13);
    padding-right: var(--child-spacing-13);
}

.first-child-sx-14 > *:first-child {
    margin-left: var(--child-spacing-14);
    margin-right: var(--child-spacing-14);
    padding-left: var(--child-spacing-14);
    padding-right: var(--child-spacing-14);
}

.first-child-sx-15 > *:first-child {
    margin-left: var(--child-spacing-15);
    margin-right: var(--child-spacing-15);
    padding-left: var(--child-spacing-15);
    padding-right: var(--child-spacing-15);
}

Horizontal spacing - 0

child-spacing/first-child/spacing/horizontal/horizontal-0.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-0 > *:first-child {
    margin-left: var(--child-spacing-0);
    margin-right: var(--child-spacing-0);
    padding-left: var(--child-spacing-0);
    padding-right: var(--child-spacing-0);
}

Horizontal spacing - 1

child-spacing/first-child/spacing/horizontal/horizontal-1.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-1 > *:first-child {
    margin-left: var(--child-spacing-1);
    margin-right: var(--child-spacing-1);
    padding-left: var(--child-spacing-1);
    padding-right: var(--child-spacing-1);
}

Horizontal spacing - 2

child-spacing/first-child/spacing/horizontal/horizontal-2.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-2 > *:first-child {
    margin-left: var(--child-spacing-2);
    margin-right: var(--child-spacing-2);
    padding-left: var(--child-spacing-2);
    padding-right: var(--child-spacing-2);
}

Horizontal spacing - 3

child-spacing/first-child/spacing/horizontal/horizontal-3.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-3 > *:first-child {
    margin-left: var(--child-spacing-3);
    margin-right: var(--child-spacing-3);
    padding-left: var(--child-spacing-3);
    padding-right: var(--child-spacing-3);
}

Horizontal spacing - 4

child-spacing/first-child/spacing/horizontal/horizontal-4.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-4 > *:first-child {
    margin-left: var(--child-spacing-4);
    margin-right: var(--child-spacing-4);
    padding-left: var(--child-spacing-4);
    padding-right: var(--child-spacing-4);
}

Horizontal spacing - 5

child-spacing/first-child/spacing/horizontal/horizontal-5.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-5 > *:first-child {
    margin-left: var(--child-spacing-5);
    margin-right: var(--child-spacing-5);
    padding-left: var(--child-spacing-5);
    padding-right: var(--child-spacing-5);
}

Horizontal spacing - 6

child-spacing/first-child/spacing/horizontal/horizontal-6.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-6 > *:first-child {
    margin-left: var(--child-spacing-6);
    margin-right: var(--child-spacing-6);
    padding-left: var(--child-spacing-6);
    padding-right: var(--child-spacing-6);
}

Horizontal spacing - 7

child-spacing/first-child/spacing/horizontal/horizontal-7.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-7 > *:first-child {
    margin-left: var(--child-spacing-7);
    margin-right: var(--child-spacing-7);
    padding-left: var(--child-spacing-7);
    padding-right: var(--child-spacing-7);
}

Horizontal spacing - 8

child-spacing/first-child/spacing/horizontal/horizontal-8.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-8 > *:first-child {
    margin-left: var(--child-spacing-8);
    margin-right: var(--child-spacing-8);
    padding-left: var(--child-spacing-8);
    padding-right: var(--child-spacing-8);
}

Horizontal spacing - 9

child-spacing/first-child/spacing/horizontal/horizontal-9.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-9 > *:first-child {
    margin-left: var(--child-spacing-9);
    margin-right: var(--child-spacing-9);
    padding-left: var(--child-spacing-9);
    padding-right: var(--child-spacing-9);
}

Horizontal spacing - 10

child-spacing/first-child/spacing/horizontal/horizontal-10.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-10 > *:first-child {
    margin-left: var(--child-spacing-10);
    margin-right: var(--child-spacing-10);
    padding-left: var(--child-spacing-10);
    padding-right: var(--child-spacing-10);
}

Horizontal spacing - 11

child-spacing/first-child/spacing/horizontal/horizontal-11.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-11 > *:first-child {
    margin-left: var(--child-spacing-11);
    margin-right: var(--child-spacing-11);
    padding-left: var(--child-spacing-11);
    padding-right: var(--child-spacing-11);
}

Horizontal spacing - 12

child-spacing/first-child/spacing/horizontal/horizontal-12.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-12 > *:first-child {
    margin-left: var(--child-spacing-12);
    margin-right: var(--child-spacing-12);
    padding-left: var(--child-spacing-12);
    padding-right: var(--child-spacing-12);
}

Horizontal spacing - 13

child-spacing/first-child/spacing/horizontal/horizontal-13.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-13 > *:first-child {
    margin-left: var(--child-spacing-13);
    margin-right: var(--child-spacing-13);
    padding-left: var(--child-spacing-13);
    padding-right: var(--child-spacing-13);
}

Horizontal spacing - 14

child-spacing/first-child/spacing/horizontal/horizontal-14.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-14 > *:first-child {
    margin-left: var(--child-spacing-14);
    margin-right: var(--child-spacing-14);
    padding-left: var(--child-spacing-14);
    padding-right: var(--child-spacing-14);
}

Horizontal spacing - 15

child-spacing/first-child/spacing/horizontal/horizontal-15.css

/* =========================================================================== *
   First child horizontal margin and padding utilities
 * =========================================================================== */


.first-child-sx-15 > *:first-child {
    margin-left: var(--child-spacing-15);
    margin-right: var(--child-spacing-15);
    padding-left: var(--child-spacing-15);
    padding-right: var(--child-spacing-15);
}

Start spacing

child-spacing/first-child/spacing/start.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-0 > *:first-child {
    margin-left: var(--child-spacing-0);
    padding-left: var(--child-spacing-0);
}

.first-child-ss-1 > *:first-child {
    margin-left: var(--child-spacing-1);
    padding-left: var(--child-spacing-1);
}

.first-child-ss-2 > *:first-child {
    margin-left: var(--child-spacing-2);
    padding-left: var(--child-spacing-2);
}

.first-child-ss-3 > *:first-child {
    margin-left: var(--child-spacing-3);
    padding-left: var(--child-spacing-3);
}

.first-child-ss-4 > *:first-child {
    margin-left: var(--child-spacing-4);
    padding-left: var(--child-spacing-4);
}

.first-child-ss-5 > *:first-child {
    margin-left: var(--child-spacing-5);
    padding-left: var(--child-spacing-5);
}

.first-child-ss-6 > *:first-child {
    margin-left: var(--child-spacing-6);
    padding-left: var(--child-spacing-6);
}

.first-child-ss-7 > *:first-child {
    margin-left: var(--child-spacing-7);
    padding-left: var(--child-spacing-7);
}

.first-child-ss-8 > *:first-child {
    margin-left: var(--child-spacing-8);
    padding-left: var(--child-spacing-8);
}

.first-child-ss-9 > *:first-child {
    margin-left: var(--child-spacing-9);
    padding-left: var(--child-spacing-9);
}

.first-child-ss-10 > *:first-child {
    margin-left: var(--child-spacing-10);
    padding-left: var(--child-spacing-10);
}

.first-child-ss-11 > *:first-child {
    margin-left: var(--child-spacing-11);
    padding-left: var(--child-spacing-11);
}

.first-child-ss-12 > *:first-child {
    margin-left: var(--child-spacing-12);
    padding-left: var(--child-spacing-12);
}

.first-child-ss-13 > *:first-child {
    margin-left: var(--child-spacing-13);
    padding-left: var(--child-spacing-13);
}

.first-child-ss-14 > *:first-child {
    margin-left: var(--child-spacing-14);
    padding-left: var(--child-spacing-14);
}

.first-child-ss-15 > *:first-child {
    margin-left: var(--child-spacing-15);
    padding-left: var(--child-spacing-15);
}

Start spacing - 0

child-spacing/first-child/spacing/start/start-0.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-0 > *:first-child {
    margin-left: var(--child-spacing-0);
    padding-left: var(--child-spacing-0);
}

Start spacing - 1

child-spacing/first-child/spacing/start/start-1.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-1 > *:first-child {
    margin-left: var(--child-spacing-1);
    padding-left: var(--child-spacing-1);
}

Start spacing - 2

child-spacing/first-child/spacing/start/start-2.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-2 > *:first-child {
    margin-left: var(--child-spacing-2);
    padding-left: var(--child-spacing-2);
}

Start spacing - 3

child-spacing/first-child/spacing/start/start-3.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-3 > *:first-child {
    margin-left: var(--child-spacing-3);
    padding-left: var(--child-spacing-3);
}

Start spacing - 4

child-spacing/first-child/spacing/start/start-4.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-4 > *:first-child {
    margin-left: var(--child-spacing-4);
    padding-left: var(--child-spacing-4);
}

Start spacing - 5

child-spacing/first-child/spacing/start/start-5.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-5 > *:first-child {
    margin-left: var(--child-spacing-5);
    padding-left: var(--child-spacing-5);
}

Start spacing - 6

child-spacing/first-child/spacing/start/start-6.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-6 > *:first-child {
    margin-left: var(--child-spacing-6);
    padding-left: var(--child-spacing-6);
}

Start spacing - 7

child-spacing/first-child/spacing/start/start-7.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-7 > *:first-child {
    margin-left: var(--child-spacing-7);
    padding-left: var(--child-spacing-7);
}

Start spacing - 8

child-spacing/first-child/spacing/start/start-8.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-8 > *:first-child {
    margin-left: var(--child-spacing-8);
    padding-left: var(--child-spacing-8);
}

Start spacing - 9

child-spacing/first-child/spacing/start/start-9.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-9 > *:first-child {
    margin-left: var(--child-spacing-9);
    padding-left: var(--child-spacing-9);
}

Start spacing - 10

child-spacing/first-child/spacing/start/start-10.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-10 > *:first-child {
    margin-left: var(--child-spacing-10);
    padding-left: var(--child-spacing-10);
}

Start spacing - 11

child-spacing/first-child/spacing/start/start-11.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-11 > *:first-child {
    margin-left: var(--child-spacing-11);
    padding-left: var(--child-spacing-11);
}

Start spacing - 12

child-spacing/first-child/spacing/start/start-12.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-12 > *:first-child {
    margin-left: var(--child-spacing-12);
    padding-left: var(--child-spacing-12);
}

Start spacing - 13

child-spacing/first-child/spacing/start/start-13.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-13 > *:first-child {
    margin-left: var(--child-spacing-13);
    padding-left: var(--child-spacing-13);
}

Start spacing - 14

child-spacing/first-child/spacing/start/start-14.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-14 > *:first-child {
    margin-left: var(--child-spacing-14);
    padding-left: var(--child-spacing-14);
}

Start spacing - 15

child-spacing/first-child/spacing/start/start-15.css

/* =========================================================================== *
   First child start margin and padding utilities
 * =========================================================================== */


.first-child-ss-15 > *:first-child {
    margin-left: var(--child-spacing-15);
    padding-left: var(--child-spacing-15);
}

Top spacing

child-spacing/first-child/spacing/top.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-0 > *:first-child {
    margin-top: var(--child-spacing-0);
    padding-top: var(--child-spacing-0);
}

.first-child-st-1 > *:first-child {
    margin-top: var(--child-spacing-1);
    padding-top: var(--child-spacing-1);
}

.first-child-st-2 > *:first-child {
    margin-top: var(--child-spacing-2);
    padding-top: var(--child-spacing-2);
}

.first-child-st-3 > *:first-child {
    margin-top: var(--child-spacing-3);
    padding-top: var(--child-spacing-3);
}

.first-child-st-4 > *:first-child {
    margin-top: var(--child-spacing-4);
    padding-top: var(--child-spacing-4);
}

.first-child-st-5 > *:first-child {
    margin-top: var(--child-spacing-5);
    padding-top: var(--child-spacing-5);
}

.first-child-st-6 > *:first-child {
    margin-top: var(--child-spacing-6);
    padding-top: var(--child-spacing-6);
}

.first-child-st-7 > *:first-child {
    margin-top: var(--child-spacing-7);
    padding-top: var(--child-spacing-7);
}

.first-child-st-8 > *:first-child {
    margin-top: var(--child-spacing-8);
    padding-top: var(--child-spacing-8);
}

.first-child-st-9 > *:first-child {
    margin-top: var(--child-spacing-9);
    padding-top: var(--child-spacing-9);
}

.first-child-st-10 > *:first-child {
    margin-top: var(--child-spacing-10);
    padding-top: var(--child-spacing-10);
}

.first-child-st-11 > *:first-child {
    margin-top: var(--child-spacing-11);
    padding-top: var(--child-spacing-11);
}

.first-child-st-12 > *:first-child {
    margin-top: var(--child-spacing-12);
    padding-top: var(--child-spacing-12);
}

.first-child-st-13 > *:first-child {
    margin-top: var(--child-spacing-13);
    padding-top: var(--child-spacing-13);
}

.first-child-st-14 > *:first-child {
    margin-top: var(--child-spacing-14);
    padding-top: var(--child-spacing-14);
}

.first-child-st-15 > *:first-child {
    margin-top: var(--child-spacing-15);
    padding-top: var(--child-spacing-15);
}

Top spacing - 0

child-spacing/first-child/spacing/top/top-0.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-0 > *:first-child {
    margin-top: var(--child-spacing-0);
    padding-top: var(--child-spacing-0);
}

Top spacing - 1

child-spacing/first-child/spacing/top/top-1.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-1 > *:first-child {
    margin-top: var(--child-spacing-1);
    padding-top: var(--child-spacing-1);
}

Top spacing - 2

child-spacing/first-child/spacing/top/top-2.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-2 > *:first-child {
    margin-top: var(--child-spacing-2);
    padding-top: var(--child-spacing-2);
}

Top spacing - 3

child-spacing/first-child/spacing/top/top-3.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-3 > *:first-child {
    margin-top: var(--child-spacing-3);
    padding-top: var(--child-spacing-3);
}

Top spacing - 4

child-spacing/first-child/spacing/top/top-4.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-4 > *:first-child {
    margin-top: var(--child-spacing-4);
    padding-top: var(--child-spacing-4);
}

Top spacing - 5

child-spacing/first-child/spacing/top/top-5.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-5 > *:first-child {
    margin-top: var(--child-spacing-5);
    padding-top: var(--child-spacing-5);
}

Top spacing - 6

child-spacing/first-child/spacing/top/top-6.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-6 > *:first-child {
    margin-top: var(--child-spacing-6);
    padding-top: var(--child-spacing-6);
}

Top spacing - 7

child-spacing/first-child/spacing/top/top-7.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-7 > *:first-child {
    margin-top: var(--child-spacing-7);
    padding-top: var(--child-spacing-7);
}

Top spacing - 8

child-spacing/first-child/spacing/top/top-8.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-8 > *:first-child {
    margin-top: var(--child-spacing-8);
    padding-top: var(--child-spacing-8);
}

Top spacing - 9

child-spacing/first-child/spacing/top/top-9.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-9 > *:first-child {
    margin-top: var(--child-spacing-9);
    padding-top: var(--child-spacing-9);
}

Top spacing - 10

child-spacing/first-child/spacing/top/top-10.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-10 > *:first-child {
    margin-top: var(--child-spacing-10);
    padding-top: var(--child-spacing-10);
}

Top spacing - 11

child-spacing/first-child/spacing/top/top-11.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-11 > *:first-child {
    margin-top: var(--child-spacing-11);
    padding-top: var(--child-spacing-11);
}

Top spacing - 12

child-spacing/first-child/spacing/top/top-12.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-12 > *:first-child {
    margin-top: var(--child-spacing-12);
    padding-top: var(--child-spacing-12);
}

Top spacing - 13

child-spacing/first-child/spacing/top/top-13.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-13 > *:first-child {
    margin-top: var(--child-spacing-13);
    padding-top: var(--child-spacing-13);
}

Top spacing - 14

child-spacing/first-child/spacing/top/top-14.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-14 > *:first-child {
    margin-top: var(--child-spacing-14);
    padding-top: var(--child-spacing-14);
}

Top spacing - 15

child-spacing/first-child/spacing/top/top-15.css

/* =========================================================================== *
   First child top margin and padding utilities
 * =========================================================================== */


.first-child-st-15 > *:first-child {
    margin-top: var(--child-spacing-15);
    padding-top: var(--child-spacing-15);
}

Vertical spacing

child-spacing/first-child/spacing/vertical.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-0 > *:first-child {
    margin-top: var(--child-spacing-0);
    margin-bottom: var(--child-spacing-0);
    padding-top: var(--child-spacing-0);
    padding-bottom: var(--child-spacing-0);
}

.first-child-sy-1 > *:first-child {
    margin-top: var(--child-spacing-1);
    margin-bottom: var(--child-spacing-1);
    padding-top: var(--child-spacing-1);
    padding-bottom: var(--child-spacing-1);
}

.first-child-sy-2 > *:first-child {
    margin-top: var(--child-spacing-2);
    margin-bottom: var(--child-spacing-2);
    padding-top: var(--child-spacing-2);
    padding-bottom: var(--child-spacing-2);
}

.first-child-sy-3 > *:first-child {
    margin-top: var(--child-spacing-3);
    margin-bottom: var(--child-spacing-3);
    padding-top: var(--child-spacing-3);
    padding-bottom: var(--child-spacing-3);
}

.first-child-sy-4 > *:first-child {
    margin-top: var(--child-spacing-4);
    margin-bottom: var(--child-spacing-4);
    padding-top: var(--child-spacing-4);
    padding-bottom: var(--child-spacing-4);
}

.first-child-sy-5 > *:first-child {
    margin-top: var(--child-spacing-5);
    margin-bottom: var(--child-spacing-5);
    padding-top: var(--child-spacing-5);
    padding-bottom: var(--child-spacing-5);
}

.first-child-sy-6 > *:first-child {
    margin-top: var(--child-spacing-6);
    margin-bottom: var(--child-spacing-6);
    padding-top: var(--child-spacing-6);
    padding-bottom: var(--child-spacing-6);
}

.first-child-sy-7 > *:first-child {
    margin-top: var(--child-spacing-7);
    margin-bottom: var(--child-spacing-7);
    padding-top: var(--child-spacing-7);
    padding-bottom: var(--child-spacing-7);
}

.first-child-sy-8 > *:first-child {
    margin-top: var(--child-spacing-8);
    margin-bottom: var(--child-spacing-8);
    padding-top: var(--child-spacing-8);
    padding-bottom: var(--child-spacing-8);
}

.first-child-sy-9 > *:first-child {
    margin-top: var(--child-spacing-9);
    margin-bottom: var(--child-spacing-9);
    padding-top: var(--child-spacing-9);
    padding-bottom: var(--child-spacing-9);
}

.first-child-sy-10 > *:first-child {
    margin-top: var(--child-spacing-10);
    margin-bottom: var(--child-spacing-10);
    padding-top: var(--child-spacing-10);
    padding-bottom: var(--child-spacing-10);
}

.first-child-sy-11 > *:first-child {
    margin-top: var(--child-spacing-11);
    margin-bottom: var(--child-spacing-11);
    padding-top: var(--child-spacing-11);
    padding-bottom: var(--child-spacing-11);
}

.first-child-sy-12 > *:first-child {
    margin-top: var(--child-spacing-12);
    margin-bottom: var(--child-spacing-12);
    padding-top: var(--child-spacing-12);
    padding-bottom: var(--child-spacing-12);
}

.first-child-sy-13 > *:first-child {
    margin-top: var(--child-spacing-13);
    margin-bottom: var(--child-spacing-13);
    padding-top: var(--child-spacing-13);
    padding-bottom: var(--child-spacing-13);
}

.first-child-sy-14 > *:first-child {
    margin-top: var(--child-spacing-14);
    margin-bottom: var(--child-spacing-14);
    padding-top: var(--child-spacing-14);
    padding-bottom: var(--child-spacing-14);
}

.first-child-sy-15 > *:first-child {
    margin-top: var(--child-spacing-15);
    margin-bottom: var(--child-spacing-15);
    padding-top: var(--child-spacing-15);
    padding-bottom: var(--child-spacing-15);
}

Vertical spacing - 0

child-spacing/first-child/spacing/vertical/vertical-0.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-0 > *:first-child {
    margin-top: var(--child-spacing-0);
    margin-bottom: var(--child-spacing-0);
    padding-top: var(--child-spacing-0);
    padding-bottom: var(--child-spacing-0);
}

Vertical spacing - 1

child-spacing/first-child/spacing/vertical/vertical-1.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-1 > *:first-child {
    margin-top: var(--child-spacing-1);
    margin-bottom: var(--child-spacing-1);
    padding-top: var(--child-spacing-1);
    padding-bottom: var(--child-spacing-1);
}

Vertical spacing - 2

child-spacing/first-child/spacing/vertical/vertical-2.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-2 > *:first-child {
    margin-top: var(--child-spacing-2);
    margin-bottom: var(--child-spacing-2);
    padding-top: var(--child-spacing-2);
    padding-bottom: var(--child-spacing-2);
}

Vertical spacing - 3

child-spacing/first-child/spacing/vertical/vertical-3.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-3 > *:first-child {
    margin-top: var(--child-spacing-3);
    margin-bottom: var(--child-spacing-3);
    padding-top: var(--child-spacing-3);
    padding-bottom: var(--child-spacing-3);
}

Vertical spacing - 4

child-spacing/first-child/spacing/vertical/vertical-4.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-4 > *:first-child {
    margin-top: var(--child-spacing-4);
    margin-bottom: var(--child-spacing-4);
    padding-top: var(--child-spacing-4);
    padding-bottom: var(--child-spacing-4);
}

Vertical spacing - 5

child-spacing/first-child/spacing/vertical/vertical-5.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-5 > *:first-child {
    margin-top: var(--child-spacing-5);
    margin-bottom: var(--child-spacing-5);
    padding-top: var(--child-spacing-5);
    padding-bottom: var(--child-spacing-5);
}

Vertical spacing - 6

child-spacing/first-child/spacing/vertical/vertical-6.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-6 > *:first-child {
    margin-top: var(--child-spacing-6);
    margin-bottom: var(--child-spacing-6);
    padding-top: var(--child-spacing-6);
    padding-bottom: var(--child-spacing-6);
}

Vertical spacing - 7

child-spacing/first-child/spacing/vertical/vertical-7.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-7 > *:first-child {
    margin-top: var(--child-spacing-7);
    margin-bottom: var(--child-spacing-7);
    padding-top: var(--child-spacing-7);
    padding-bottom: var(--child-spacing-7);
}

Vertical spacing - 8

child-spacing/first-child/spacing/vertical/vertical-8.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-8 > *:first-child {
    margin-top: var(--child-spacing-8);
    margin-bottom: var(--child-spacing-8);
    padding-top: var(--child-spacing-8);
    padding-bottom: var(--child-spacing-8);
}

Vertical spacing - 9

child-spacing/first-child/spacing/vertical/vertical-9.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-9 > *:first-child {
    margin-top: var(--child-spacing-9);
    margin-bottom: var(--child-spacing-9);
    padding-top: var(--child-spacing-9);
    padding-bottom: var(--child-spacing-9);
}

Vertical spacing - 10

child-spacing/first-child/spacing/vertical/vertical-10.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-10 > *:first-child {
    margin-top: var(--child-spacing-10);
    margin-bottom: var(--child-spacing-10);
    padding-top: var(--child-spacing-10);
    padding-bottom: var(--child-spacing-10);
}

Vertical spacing - 11

child-spacing/first-child/spacing/vertical/vertical-11.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-11 > *:first-child {
    margin-top: var(--child-spacing-11);
    margin-bottom: var(--child-spacing-11);
    padding-top: var(--child-spacing-11);
    padding-bottom: var(--child-spacing-11);
}

Vertical spacing - 12

child-spacing/first-child/spacing/vertical/vertical-12.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-12 > *:first-child {
    margin-top: var(--child-spacing-12);
    margin-bottom: var(--child-spacing-12);
    padding-top: var(--child-spacing-12);
    padding-bottom: var(--child-spacing-12);
}

Vertical spacing - 13

child-spacing/first-child/spacing/vertical/vertical-13.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-13 > *:first-child {
    margin-top: var(--child-spacing-13);
    margin-bottom: var(--child-spacing-13);
    padding-top: var(--child-spacing-13);
    padding-bottom: var(--child-spacing-13);
}

Vertical spacing - 14

child-spacing/first-child/spacing/vertical/vertical-14.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-14 > *:first-child {
    margin-top: var(--child-spacing-14);
    margin-bottom: var(--child-spacing-14);
    padding-top: var(--child-spacing-14);
    padding-bottom: var(--child-spacing-14);
}

Vertical spacing - 15

child-spacing/first-child/spacing/vertical/vertical-15.css

/* =========================================================================== *
   First child vertical margin and padding utilities
 * =========================================================================== */


.first-child-sy-15 > *:first-child {
    margin-top: var(--child-spacing-15);
    margin-bottom: var(--child-spacing-15);
    padding-top: var(--child-spacing-15);
    padding-bottom: var(--child-spacing-15);
}