/*****************************************************************************************
Datei:  tws_flexbox_and_grid.css
*****************************************************************************************/

@charset "UTF-8";

/*****************************************************************************************
...
Grid Template Columns
Grid Column Start / End
Grid Template Rows
Grid Row Start / End
Grid Auto Flow
Grid Auto Columns
Grid Auto Rows
Gap
...
*****************************************************************************************/

/*****************************************************************************************
Grid Template Columns (CONTAINER)

WICHTIG bei Contao: '> .inside'
*****************************************************************************************/
.grid-cols-1    > .inside,
.grid-cols-2    > .inside,
.grid-cols-3    > .inside,
.grid-cols-4    > .inside,
.grid-cols-5    > .inside,
.grid-cols-6    > .inside,
.grid-cols-7    > .inside,
.grid-cols-8    > .inside,
.grid-cols-9    > .inside,
.grid-cols-10   > .inside,
.grid-cols-11   > .inside,
.grid-cols-12   > .inside,
.grid-cols-none > .inside {
    display: grid;
}
.grid-cols-1    > .inside { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
.grid-cols-2    > .inside { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
.grid-cols-3    > .inside { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
.grid-cols-4    > .inside { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
.grid-cols-5    > .inside { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
.grid-cols-6    > .inside { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
.grid-cols-7    > .inside { grid-template-columns: repeat(7,  minmax(0, 1fr)); }
.grid-cols-8    > .inside { grid-template-columns: repeat(8,  minmax(0, 1fr)); }
.grid-cols-9    > .inside { grid-template-columns: repeat(9,  minmax(0, 1fr)); }
.grid-cols-10   > .inside { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11   > .inside { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12   > .inside { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none > .inside { grid-template-columns: none; }

/*****************************************************************************************
Grid Column Start / End (ITEMS)
*****************************************************************************************/
.col-auto       { grid-column: auto; }
.col-span-1     { grid-column: span 1  / span 1; }
.col-span-2     { grid-column: span 2  / span 2; }
.col-span-3     { grid-column: span 3  / span 3; }
.col-span-4     { grid-column: span 4  / span 4; }
.col-span-5     { grid-column: span 5  / span 5; }
.col-span-6     { grid-column: span 6  / span 6; }
.col-span-7     { grid-column: span 7  / span 7; }
.col-span-8     { grid-column: span 8  / span 8; }
.col-span-9     { grid-column: span 9  / span 9; }
.col-span-10    { grid-column: span 10 / span 10; }
.col-span-11    { grid-column: span 11 / span 11; }
.col-span-12    { grid-column: span 12 / span 12; }
.col-span-full  { grid-column: 1 / -1; }

.col-start-1	{ grid-column-start: 1; }
.col-start-2	{ grid-column-start: 2; }
.col-start-3	{ grid-column-start: 3; }
.col-start-4	{ grid-column-start: 4; }
.col-start-5	{ grid-column-start: 5; }
.col-start-6	{ grid-column-start: 6; }
.col-start-7	{ grid-column-start: 7; }
.col-start-8	{ grid-column-start: 8; }
.col-start-9	{ grid-column-start: 9; }
.col-start-10	{ grid-column-start: 10; }
.col-start-11	{ grid-column-start: 11; }
.col-start-12	{ grid-column-start: 12; }
.col-start-13	{ grid-column-start: 13; }      /* wieso 13? */
.col-start-auto	{ grid-column-start: auto; }

.col-end-1      { grid-column-end: 1; }         /* wieso 1? */
.col-end-2      { grid-column-end: 2; }
.col-end-3      { grid-column-end: 3; }
.col-end-4      { grid-column-end: 4; }
.col-end-5      { grid-column-end: 5; }
.col-end-6      { grid-column-end: 6; }
.col-end-7      { grid-column-end: 7; }
.col-end-8      { grid-column-end: 8; }
.col-end-9      { grid-column-end: 9; }
.col-end-10     { grid-column-end: 10; }
.col-end-11     { grid-column-end: 11; }
.col-end-12     { grid-column-end: 12; }
.col-end-13     { grid-column-end: 13; }
.col-end-auto   { grid-column-end: auto; }

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

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

.row-start-1	{ grid-row-start: 1; }
.row-start-2	{ grid-row-start: 2; }
.row-start-3	{ grid-row-start: 3; }
.row-start-4	{ grid-row-start: 4; }
.row-start-5	{ grid-row-start: 5; }
.row-start-6	{ grid-row-start: 6; }
.row-start-7	{ grid-row-start: 7; }
.row-start-auto	{ grid-row-start: auto; }

.row-end-1	    { grid-row-end: 1; }
.row-end-2  	{ grid-row-end: 2; }
.row-end-3	    { grid-row-end: 3; }
.row-end-4	    { grid-row-end: 4; }
.row-end-5	    { grid-row-end: 5; }
.row-end-6	    { grid-row-end: 6; }
.row-end-7	    { grid-row-end: 7; }
.row-end-auto	{ grid-row-end: auto; }

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

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

/*****************************************************************************************
Grid Auto Rows
*****************************************************************************************/
.auto-row-auto	     > .inside { grid-auto-rows: auto; }
.auto-row-min	     > .inside { grid-auto-rows: min-content; }
.auto-row-max	     > .inside { grid-auto-rows: max-content; }
.auto-row-fr	     > .inside { grid-auto-rows: minmax(0, 1fr); }

/*****************************************************************************************
Gap
*****************************************************************************************/
.gap-0          > .inside { gap: 0px; }
.gap-x-0        > .inside { column-gap: 0px; }
.gap-y-0        > .inside { row-gap: 0px; }
.gap-px         > .inside { gap: 1px; }
.gap-x-px       > .inside { column-gap: 1px; }
.gap-y-px       > .inside { row-gap: 1px; }
.gap-0\.5       > .inside { gap: 0.125em;          /* 2px */ }
.gap-x-0\.5     > .inside { column-gap: 0.125em;   /* 2px */ }
.gap-y-0\.5     > .inside { row-gap: 0.125em;      /* 2px */ }
.gap-1          > .inside { gap: 0.25em;           /* 4px */ }
.gap-x-1        > .inside { column-gap: 0.25em;    /* 4px */ }
.gap-y-1        > .inside { row-gap: 0.25em;       /* 4px */ }
.gap-1\.5       > .inside { gap: 0.375em;          /* 6px */ }
.gap-x-1\.5     > .inside { column-gap: 0.375em;   /* 6px */ }
.gap-y-1\.5     > .inside { row-gap: 0.375em;      /* 6px */ }
.gap-2          > .inside { gap: 0.5em;            /* 8px */ }
.gap-x-2        > .inside { column-gap: 0.5em;     /* 8px */ }
.gap-y-2        > .inside { row-gap: 0.5em;        /* 8px */ }
.gap-2\.5       > .inside { gap: 0.625em;          /* 10px */ }
.gap-x-2\.5     > .inside { column-gap: 0.625em;   /* 10px */ }
.gap-y-2\.5     > .inside { row-gap: 0.625em;      /* 10px */ }
.gap-3          > .inside { gap: 0.75em;           /* 12px */ }
.gap-x-3        > .inside { column-gap: 0.75em;    /* 12px */ }
.gap-y-3        > .inside { row-gap: 0.75em;       /* 12px */ }
.gap-3\.5       > .inside { gap: 0.875em;          /* 14px */ }
.gap-x-3\.5     > .inside { column-gap: 0.875em;   /* 14px */ }
.gap-y-3\.5     > .inside { row-gap: 0.875em;      /* 14px */ }
.gap-4          > .inside { gap: 1em;              /* 16px */ }
.gap-x-4        > .inside { column-gap: 1em;       /* 16px */ }
.gap-y-4        > .inside { row-gap: 1em;          /* 16px */ }
.gap-5          > .inside { gap: 1.25em;           /* 20px */ }
.gap-x-5        > .inside { column-gap: 1.25em;    /* 20px */ }
.gap-y-5        > .inside { row-gap: 1.25em;       /* 20px */ }
.gap-6          > .inside { gap: 1.5em;            /* 24px */ }
.gap-x-6        > .inside { column-gap: 1.5em;     /* 24px */ }
.gap-y-6        > .inside { row-gap: 1.5em;        /* 24px */ }
.gap-7          > .inside { gap: 1.75em;           /* 28px */ }
.gap-x-7        > .inside { column-gap: 1.75em;    /* 28px */ }
.gap-y-7        > .inside { row-gap: 1.75em;       /* 28px */ }
.gap-8          > .inside { gap: 2em;              /* 32px */ }
.gap-x-8        > .inside { column-gap: 2em;       /* 32px */ }
.gap-y-8        > .inside { row-gap: 2em;          /* 32px */ }
.gap-9          > .inside { gap: 2.25em;           /* 36px */ }
.gap-x-9        > .inside { column-gap: 2.25em;    /* 36px */ }
.gap-y-9        > .inside { row-gap: 2.25em;       /* 36px */ }
.gap-10         > .inside { gap: 2.5em;            /* 40px */ }
.gap-x-10       > .inside { column-gap: 2.5em;     /* 40px */ }
.gap-y-10       > .inside { row-gap: 2.5em;        /* 40px */ }
.gap-11         > .inside { gap: 2.75em;           /* 44px */ }
.gap-x-11       > .inside { column-gap: 2.75em;    /* 44px */ }
.gap-y-11       > .inside { row-gap: 2.75em;       /* 44px */ }
.gap-12         > .inside { gap: 3em;              /* 48px */ }
.gap-x-12       > .inside { column-gap: 3em;       /* 48px */ }
.gap-y-12       > .inside { row-gap: 3em;          /* 48px */ }
.gap-14         > .inside { gap: 3.5em;            /* 56px */ }
.gap-x-14       > .inside { column-gap: 3.5em;     /* 56px */ }
.gap-y-14       > .inside { row-gap: 3.5em;        /* 56px */ }
.gap-16         > .inside { gap: 4em;              /* 64px */ }
.gap-x-16       > .inside { column-gap: 4em;       /* 64px */ }
.gap-y-16       > .inside { row-gap: 4em;          /* 64px */ }
.gap-20         > .inside { gap: 5em;              /* 80px */ }
.gap-x-20       > .inside { column-gap: 5em;       /* 80px */ }
.gap-y-20       > .inside { row-gap: 5em;          /* 80px */ }
.gap-24         > .inside { gap: 6em;              /* 96px */ }
.gap-x-24       > .inside { column-gap: 6em;       /* 96px */ }
.gap-y-24       > .inside { row-gap: 6em;          /* 96px */ }
.gap-28         > .inside { gap: 7em;              /* 112px */ }
.gap-x-28       > .inside { column-gap: 7em;       /* 112px */ }
.gap-y-28       > .inside { row-gap: 7em;          /* 112px */ }
.gap-32         > .inside { gap: 8em;              /* 128px */ }
.gap-x-32       > .inside { column-gap: 8em;       /* 128px */ }
.gap-y-32       > .inside { row-gap: 8em;          /* 128px */ }
.gap-36         > .inside { gap: 9em;              /* 144px */ }
.gap-x-36       > .inside { column-gap: 9em;       /* 144px */ }
.gap-y-36       > .inside { row-gap: 9em;          /* 144px */ }
.gap-40         > .inside { gap: 10em;             /* 160px */ }
.gap-x-40       > .inside { column-gap: 10em;      /* 160px */ }
.gap-y-40       > .inside { row-gap: 10em;         /* 160px */ }
.gap-44         > .inside { gap: 11em;             /* 176px */ }
.gap-x-44       > .inside { column-gap: 11em;      /* 176px */ }
.gap-y-44       > .inside { row-gap: 11em;         /* 176px */ }
.gap-48         > .inside { gap: 12em;             /* 192px */ }
.gap-x-48       > .inside { column-gap: 12em;      /* 192px */ }
.gap-y-48       > .inside { row-gap: 12em;         /* 192px */ }
.gap-52         > .inside { gap: 13em;             /* 208px */ }
.gap-x-52       > .inside { column-gap: 13em;      /* 208px */ }
.gap-y-52       > .inside { row-gap: 13em;         /* 208px */ }
.gap-56         > .inside { gap: 14em;             /* 224px */ }
.gap-x-56       > .inside { column-gap: 14em;      /* 224px */ }
.gap-y-56       > .inside { row-gap: 14em;         /* 224px */ }
.gap-60         > .inside { gap: 15em;             /* 240px */ }
.gap-x-60       > .inside { column-gap: 15em;      /* 240px */ }
.gap-y-60       > .inside { row-gap: 15em;         /* 240px */ }
.gap-64         > .inside { gap: 16em;             /* 256px */ }
.gap-x-64       > .inside { column-gap: 16em;      /* 256px */ }
.gap-y-64       > .inside { row-gap: 16em;         /* 256px */ }
.gap-72         > .inside { gap: 18em;             /* 288px */ }
.gap-x-72       > .inside { column-gap: 18em;      /* 288px */ }
.gap-y-72       > .inside { row-gap: 18em;         /* 288px */ }
.gap-80         > .inside { gap: 20em;             /* 320px */ }
.gap-x-80       > .inside { column-gap: 20em;      /* 320px */ }
.gap-y-80       > .inside { row-gap: 20em;         /* 320px */ }
.gap-96         > .inside { gap: 24em;             /* 384px */ }
.gap-x-96       > .inside { column-gap: 24em;      /* 384px */ }
.gap-y-96       > .inside { row-gap: 24em;         /* 384px */ }


/* //////////
nur nach Bedarf!
FEHLEN noch: Justify Content/Justify Items/Justify Self/Align Content/
                Align Items/Align Self/Place Content/Place Items/Place Self
///////////// */

/*  SM :: ab 640px = 40em */
@media screen and (min-width: 640px) {
    /*****************************************************************************************
    Grid Template Columns (CONTAINER)

    WICHTIG bei Contao: '> .inside'
    *****************************************************************************************/
    .sm\:grid-cols-1    > .inside,
    .sm\:grid-cols-2    > .inside,
    .sm\:grid-cols-3    > .inside,
    .sm\:grid-cols-4    > .inside,
    .sm\:grid-cols-5    > .inside,
    .sm\:grid-cols-6    > .inside,
    .sm\:grid-cols-7    > .inside,
    .sm\:grid-cols-8    > .inside,
    .sm\:grid-cols-9    > .inside,
    .sm\:grid-cols-10   > .inside,
    .sm\:grid-cols-11   > .inside,
    .sm\:grid-cols-12   > .inside,
    .sm\:grid-cols-none > .inside {
        display: grid;
    }
    .sm\:grid-cols-1    > .inside { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
    .sm\:grid-cols-2    > .inside { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
    .sm\:grid-cols-3    > .inside { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
    .sm\:grid-cols-4    > .inside { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
    .sm\:grid-cols-5    > .inside { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
    .sm\:grid-cols-6    > .inside { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
    .sm\:grid-cols-7    > .inside { grid-template-columns: repeat(7,  minmax(0, 1fr)); }
    .sm\:grid-cols-8    > .inside { grid-template-columns: repeat(8,  minmax(0, 1fr)); }
    .sm\:grid-cols-9    > .inside { grid-template-columns: repeat(9,  minmax(0, 1fr)); }
    .sm\:grid-cols-10   > .inside { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .sm\:grid-cols-11   > .inside { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .sm\:grid-cols-12   > .inside { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .sm\:grid-cols-none > .inside { grid-template-columns: none; }

    /*****************************************************************************************
    Grid Column Start / End (ITEMS)
    *****************************************************************************************/
    .sm\:col-auto       { grid-column: auto; }
    .sm\:col-span-1     { grid-column: span 1  / span 1; }
    .sm\:col-span-2     { grid-column: span 2  / span 2; }
    .sm\:col-span-3     { grid-column: span 3  / span 3; }
    .sm\:col-span-4     { grid-column: span 4  / span 4; }
    .sm\:col-span-5     { grid-column: span 5  / span 5; }
    .sm\:col-span-6     { grid-column: span 6  / span 6; }
    .sm\:col-span-7     { grid-column: span 7  / span 7; }
    .sm\:col-span-8     { grid-column: span 8  / span 8; }
    .sm\:col-span-9     { grid-column: span 9  / span 9; }
    .sm\:col-span-10    { grid-column: span 10 / span 10; }
    .sm\:col-span-11    { grid-column: span 11 / span 11; }
    .sm\:col-span-12    { grid-column: span 12 / span 12; }
    .sm\:col-span-full  { grid-column: 1 / -1; }

    .sm\:col-start-1    { grid-column-start: 1; }
    .sm\:col-start-2    { grid-column-start: 2; }
    .sm\:col-start-3    { grid-column-start: 3; }
    .sm\:col-start-4    { grid-column-start: 4; }
    .sm\:col-start-5    { grid-column-start: 5; }
    .sm\:col-start-6    { grid-column-start: 6; }
    .sm\:col-start-7    { grid-column-start: 7; }
    .sm\:col-start-8    { grid-column-start: 8; }
    .sm\:col-start-9    { grid-column-start: 9; }
    .sm\:col-start-10   { grid-column-start: 10; }
    .sm\:col-start-11   { grid-column-start: 11; }
    .sm\:col-start-12   { grid-column-start: 12; }
    .sm\:col-start-13   { grid-column-start: 13; }      /* wieso 13? */
    .sm\:col-start-auto { grid-column-start: auto; }

    .sm\:col-end-1      { grid-column-end: 1; }         /* wieso 1? */
    .sm\:col-end-2      { grid-column-end: 2; }
    .sm\:col-end-3      { grid-column-end: 3; }
    .sm\:col-end-4      { grid-column-end: 4; }
    .sm\:col-end-5      { grid-column-end: 5; }
    .sm\:col-end-6      { grid-column-end: 6; }
    .sm\:col-end-7      { grid-column-end: 7; }
    .sm\:col-end-8      { grid-column-end: 8; }
    .sm\:col-end-9      { grid-column-end: 9; }
    .sm\:col-end-10     { grid-column-end: 10; }
    .sm\:col-end-11     { grid-column-end: 11; }
    .sm\:col-end-12     { grid-column-end: 12; }
    .sm\:col-end-13     { grid-column-end: 13; }
    .sm\:col-end-auto   { grid-column-end: auto; }

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

    /*****************************************************************************************
    Grid Row Start / End
    *****************************************************************************************/
    .sm\:row-auto       { grid-row: auto; }
    .sm\:row-span-1     { grid-row: span 1 / span 1; }
    .sm\:row-span-2     { grid-row: span 2 / span 2; }
    .sm\:row-span-3     { grid-row: span 3 / span 3; }
    .sm\:row-span-4     { grid-row: span 4 / span 4; }
    .sm\:row-span-5     { grid-row: span 5 / span 5; }
    .sm\:row-span-6     { grid-row: span 6 / span 6; }
    .sm\:row-span-full  { grid-row: 1 / -1; }

    .sm\:row-start-1    { grid-row-start: 1; }
    .sm\:row-start-2    { grid-row-start: 2; }
    .sm\:row-start-3    { grid-row-start: 3; }
    .sm\:row-start-4    { grid-row-start: 4; }
    .sm\:row-start-5    { grid-row-start: 5; }
    .sm\:row-start-6    { grid-row-start: 6; }
    .sm\:row-start-7    { grid-row-start: 7; }
    .sm\:row-start-auto { grid-row-start: auto; }

    .sm\:row-end-1      { grid-row-end: 1; }
    .sm\:row-end-2      { grid-row-end: 2; }
    .sm\:row-end-3      { grid-row-end: 3; }
    .sm\:row-end-4      { grid-row-end: 4; }
    .sm\:row-end-5      { grid-row-end: 5; }
    .sm\:row-end-6      { grid-row-end: 6; }
    .sm\:row-end-7      { grid-row-end: 7; }
    .sm\:row-end-auto   { grid-row-end: auto; }

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

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

    /*****************************************************************************************
    Grid Auto Rows
    *****************************************************************************************/
    .sm\:auto-row-auto       > .inside { grid-auto-rows: auto; }
    .sm\:auto-row-min        > .inside { grid-auto-rows: min-content; }
    .sm\:auto-row-max        > .inside { grid-auto-rows: max-content; }
    .sm\:auto-row-fr         > .inside { grid-auto-rows: minmax(0, 1fr); }

    /*****************************************************************************************
    Gap
    *****************************************************************************************/
    .sm\:gap-0          > .inside { gap: 0px; }
    .sm\:gap-x-0        > .inside { column-gap: 0px; }
    .sm\:gap-y-0        > .inside { row-gap: 0px; }
    .sm\:gap-px         > .inside { gap: 1px; }
    .sm\:gap-x-px       > .inside { column-gap: 1px; }
    .sm\:gap-y-px       > .inside { row-gap: 1px; }
    .sm\:gap-0\.5       > .inside { gap: 0.125em;          /* 2px */ }
    .sm\:gap-x-0\.5     > .inside { column-gap: 0.125em;   /* 2px */ }
    .sm\:gap-y-0\.5     > .inside { row-gap: 0.125em;      /* 2px */ }
    .sm\:gap-1          > .inside { gap: 0.25em;           /* 4px */ }
    .sm\:gap-x-1        > .inside { column-gap: 0.25em;    /* 4px */ }
    .sm\:gap-y-1        > .inside { row-gap: 0.25em;       /* 4px */ }
    .sm\:gap-1\.5       > .inside { gap: 0.375em;          /* 6px */ }
    .sm\:gap-x-1\.5     > .inside { column-gap: 0.375em;   /* 6px */ }
    .sm\:gap-y-1\.5     > .inside { row-gap: 0.375em;      /* 6px */ }
    .sm\:gap-2          > .inside { gap: 0.5em;            /* 8px */ }
    .sm\:gap-x-2        > .inside { column-gap: 0.5em;     /* 8px */ }
    .sm\:gap-y-2        > .inside { row-gap: 0.5em;        /* 8px */ }
    .sm\:gap-2\.5       > .inside { gap: 0.625em;          /* 10px */ }
    .sm\:gap-x-2\.5     > .inside { column-gap: 0.625em;   /* 10px */ }
    .sm\:gap-y-2\.5     > .inside { row-gap: 0.625em;      /* 10px */ }
    .sm\:gap-3          > .inside { gap: 0.75em;           /* 12px */ }
    .sm\:gap-x-3        > .inside { column-gap: 0.75em;    /* 12px */ }
    .sm\:gap-y-3        > .inside { row-gap: 0.75em;       /* 12px */ }
    .sm\:gap-3\.5       > .inside { gap: 0.875em;          /* 14px */ }
    .sm\:gap-x-3\.5     > .inside { column-gap: 0.875em;   /* 14px */ }
    .sm\:gap-y-3\.5     > .inside { row-gap: 0.875em;      /* 14px */ }
    .sm\:gap-4          > .inside { gap: 1em;              /* 16px */ }
    .sm\:gap-x-4        > .inside { column-gap: 1em;       /* 16px */ }
    .sm\:gap-y-4        > .inside { row-gap: 1em;          /* 16px */ }
    .sm\:gap-5          > .inside { gap: 1.25em;           /* 20px */ }
    .sm\:gap-x-5        > .inside { column-gap: 1.25em;    /* 20px */ }
    .sm\:gap-y-5        > .inside { row-gap: 1.25em;       /* 20px */ }
    .sm\:gap-6          > .inside { gap: 1.5em;            /* 24px */ }
    .sm\:gap-x-6        > .inside { column-gap: 1.5em;     /* 24px */ }
    .sm\:gap-y-6        > .inside { row-gap: 1.5em;        /* 24px */ }
    .sm\:gap-7          > .inside { gap: 1.75em;           /* 28px */ }
    .sm\:gap-x-7        > .inside { column-gap: 1.75em;    /* 28px */ }
    .sm\:gap-y-7        > .inside { row-gap: 1.75em;       /* 28px */ }
    .sm\:gap-8          > .inside { gap: 2em;              /* 32px */ }
    .sm\:gap-x-8        > .inside { column-gap: 2em;       /* 32px */ }
    .sm\:gap-y-8        > .inside { row-gap: 2em;          /* 32px */ }
    .sm\:gap-9          > .inside { gap: 2.25em;           /* 36px */ }
    .sm\:gap-x-9        > .inside { column-gap: 2.25em;    /* 36px */ }
    .sm\:gap-y-9        > .inside { row-gap: 2.25em;       /* 36px */ }
    .sm\:gap-10         > .inside { gap: 2.5em;            /* 40px */ }
    .sm\:gap-x-10       > .inside { column-gap: 2.5em;     /* 40px */ }
    .sm\:gap-y-10       > .inside { row-gap: 2.5em;        /* 40px */ }
    .sm\:gap-11         > .inside { gap: 2.75em;           /* 44px */ }
    .sm\:gap-x-11       > .inside { column-gap: 2.75em;    /* 44px */ }
    .sm\:gap-y-11       > .inside { row-gap: 2.75em;       /* 44px */ }
    .sm\:gap-12         > .inside { gap: 3em;              /* 48px */ }
    .sm\:gap-x-12       > .inside { column-gap: 3em;       /* 48px */ }
    .sm\:gap-y-12       > .inside { row-gap: 3em;          /* 48px */ }
    .sm\:gap-14         > .inside { gap: 3.5em;            /* 56px */ }
    .sm\:gap-x-14       > .inside { column-gap: 3.5em;     /* 56px */ }
    .sm\:gap-y-14       > .inside { row-gap: 3.5em;        /* 56px */ }
    .sm\:gap-16         > .inside { gap: 4em;              /* 64px */ }
    .sm\:gap-x-16       > .inside { column-gap: 4em;       /* 64px */ }
    .sm\:gap-y-16       > .inside { row-gap: 4em;          /* 64px */ }
    .sm\:gap-20         > .inside { gap: 5em;              /* 80px */ }
    .sm\:gap-x-20       > .inside { column-gap: 5em;       /* 80px */ }
    .sm\:gap-y-20       > .inside { row-gap: 5em;          /* 80px */ }
    .sm\:gap-24         > .inside { gap: 6em;              /* 96px */ }
    .sm\:gap-x-24       > .inside { column-gap: 6em;       /* 96px */ }
    .sm\:gap-y-24       > .inside { row-gap: 6em;          /* 96px */ }
    .sm\:gap-28         > .inside { gap: 7em;              /* 112px */ }
    .sm\:gap-x-28       > .inside { column-gap: 7em;       /* 112px */ }
    .sm\:gap-y-28       > .inside { row-gap: 7em;          /* 112px */ }
    .sm\:gap-32         > .inside { gap: 8em;              /* 128px */ }
    .sm\:gap-x-32       > .inside { column-gap: 8em;       /* 128px */ }
    .sm\:gap-y-32       > .inside { row-gap: 8em;          /* 128px */ }
    .sm\:gap-36         > .inside { gap: 9em;              /* 144px */ }
    .sm\:gap-x-36       > .inside { column-gap: 9em;       /* 144px */ }
    .sm\:gap-y-36       > .inside { row-gap: 9em;          /* 144px */ }
    .sm\:gap-40         > .inside { gap: 10em;             /* 160px */ }
    .sm\:gap-x-40       > .inside { column-gap: 10em;      /* 160px */ }
    .sm\:gap-y-40       > .inside { row-gap: 10em;         /* 160px */ }
    .sm\:gap-44         > .inside { gap: 11em;             /* 176px */ }
    .sm\:gap-x-44       > .inside { column-gap: 11em;      /* 176px */ }
    .sm\:gap-y-44       > .inside { row-gap: 11em;         /* 176px */ }
    .sm\:gap-48         > .inside { gap: 12em;             /* 192px */ }
    .sm\:gap-x-48       > .inside { column-gap: 12em;      /* 192px */ }
    .sm\:gap-y-48       > .inside { row-gap: 12em;         /* 192px */ }
    .sm\:gap-52         > .inside { gap: 13em;             /* 208px */ }
    .sm\:gap-x-52       > .inside { column-gap: 13em;      /* 208px */ }
    .sm\:gap-y-52       > .inside { row-gap: 13em;         /* 208px */ }
    .sm\:gap-56         > .inside { gap: 14em;             /* 224px */ }
    .sm\:gap-x-56       > .inside { column-gap: 14em;      /* 224px */ }
    .sm\:gap-y-56       > .inside { row-gap: 14em;         /* 224px */ }
    .sm\:gap-60         > .inside { gap: 15em;             /* 240px */ }
    .sm\:gap-x-60       > .inside { column-gap: 15em;      /* 240px */ }
    .sm\:gap-y-60       > .inside { row-gap: 15em;         /* 240px */ }
    .sm\:gap-64         > .inside { gap: 16em;             /* 256px */ }
    .sm\:gap-x-64       > .inside { column-gap: 16em;      /* 256px */ }
    .sm\:gap-y-64       > .inside { row-gap: 16em;         /* 256px */ }
    .sm\:gap-72         > .inside { gap: 18em;             /* 288px */ }
    .sm\:gap-x-72       > .inside { column-gap: 18em;      /* 288px */ }
    .sm\:gap-y-72       > .inside { row-gap: 18em;         /* 288px */ }
    .sm\:gap-80         > .inside { gap: 20em;             /* 320px */ }
    .sm\:gap-x-80       > .inside { column-gap: 20em;      /* 320px */ }
    .sm\:gap-y-80       > .inside { row-gap: 20em;         /* 320px */ }
    .sm\:gap-96         > .inside { gap: 24em;             /* 384px */ }
    .sm\:gap-x-96       > .inside { column-gap: 24em;      /* 384px */ }
    .sm\:gap-y-96       > .inside { row-gap: 24em;         /* 384px */ }
}

/*  MD :: ab 768px = 48em */
@media screen and (min-width: 768px) {
    /*****************************************************************************************
    Grid Template Columns (CONTAINER)

    WICHTIG bei Contao: '> .inside'
    *****************************************************************************************/
    .md\:grid-cols-1    > .inside,
    .md\:grid-cols-2    > .inside,
    .md\:grid-cols-3    > .inside,
    .md\:grid-cols-4    > .inside,
    .md\:grid-cols-5    > .inside,
    .md\:grid-cols-6    > .inside,
    .md\:grid-cols-7    > .inside,
    .md\:grid-cols-8    > .inside,
    .md\:grid-cols-9    > .inside,
    .md\:grid-cols-10   > .inside,
    .md\:grid-cols-11   > .inside,
    .md\:grid-cols-12   > .inside,
    .md\:grid-cols-none > .inside {
        display: grid;
    }
    .md\:grid-cols-1    > .inside { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
    .md\:grid-cols-2    > .inside { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
    .md\:grid-cols-3    > .inside { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
    .md\:grid-cols-4    > .inside { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
    .md\:grid-cols-5    > .inside { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
    .md\:grid-cols-6    > .inside { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
    .md\:grid-cols-7    > .inside { grid-template-columns: repeat(7,  minmax(0, 1fr)); }
    .md\:grid-cols-8    > .inside { grid-template-columns: repeat(8,  minmax(0, 1fr)); }
    .md\:grid-cols-9    > .inside { grid-template-columns: repeat(9,  minmax(0, 1fr)); }
    .md\:grid-cols-10   > .inside { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md\:grid-cols-11   > .inside { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md\:grid-cols-12   > .inside { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:grid-cols-none > .inside { grid-template-columns: none; }

    /*****************************************************************************************
    Grid Column Start / End (ITEMS)
    *****************************************************************************************/
    .md\:col-auto       { grid-column: auto; }
    .md\:col-span-1     { grid-column: span 1  / span 1; }
    .md\:col-span-2     { grid-column: span 2  / span 2; }
    .md\:col-span-3     { grid-column: span 3  / span 3; }
    .md\:col-span-4     { grid-column: span 4  / span 4; }
    .md\:col-span-5     { grid-column: span 5  / span 5; }
    .md\:col-span-6     { grid-column: span 6  / span 6; }
    .md\:col-span-7     { grid-column: span 7  / span 7; }
    .md\:col-span-8     { grid-column: span 8  / span 8; }
    .md\:col-span-9     { grid-column: span 9  / span 9; }
    .md\:col-span-10    { grid-column: span 10 / span 10; }
    .md\:col-span-11    { grid-column: span 11 / span 11; }
    .md\:col-span-12    { grid-column: span 12 / span 12; }
    .md\:col-span-full  { grid-column: 1 / -1; }

    .md\:col-start-1    { grid-column-start: 1; }
    .md\:col-start-2    { grid-column-start: 2; }
    .md\:col-start-3    { grid-column-start: 3; }
    .md\:col-start-4    { grid-column-start: 4; }
    .md\:col-start-5    { grid-column-start: 5; }
    .md\:col-start-6    { grid-column-start: 6; }
    .md\:col-start-7    { grid-column-start: 7; }
    .md\:col-start-8    { grid-column-start: 8; }
    .md\:col-start-9    { grid-column-start: 9; }
    .md\:col-start-10   { grid-column-start: 10; }
    .md\:col-start-11   { grid-column-start: 11; }
    .md\:col-start-12   { grid-column-start: 12; }
    .md\:col-start-13   { grid-column-start: 13; }      /* wieso 13? */
    .md\:col-start-auto { grid-column-start: auto; }

    .md\:col-end-1      { grid-column-end: 1; }         /* wieso 1? */
    .md\:col-end-2      { grid-column-end: 2; }
    .md\:col-end-3      { grid-column-end: 3; }
    .md\:col-end-4      { grid-column-end: 4; }
    .md\:col-end-5      { grid-column-end: 5; }
    .md\:col-end-6      { grid-column-end: 6; }
    .md\:col-end-7      { grid-column-end: 7; }
    .md\:col-end-8      { grid-column-end: 8; }
    .md\:col-end-9      { grid-column-end: 9; }
    .md\:col-end-10     { grid-column-end: 10; }
    .md\:col-end-11     { grid-column-end: 11; }
    .md\:col-end-12     { grid-column-end: 12; }
    .md\:col-end-13     { grid-column-end: 13; }
    .md\:col-end-auto   { grid-column-end: auto; }

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

    /*****************************************************************************************
    Grid Row Start / End
    *****************************************************************************************/
    .md\:row-auto       { grid-row: auto; }
    .md\:row-span-1     { grid-row: span 1 / span 1; }
    .md\:row-span-2     { grid-row: span 2 / span 2; }
    .md\:row-span-3     { grid-row: span 3 / span 3; }
    .md\:row-span-4     { grid-row: span 4 / span 4; }
    .md\:row-span-5     { grid-row: span 5 / span 5; }
    .md\:row-span-6     { grid-row: span 6 / span 6; }
    .md\:row-span-full  { grid-row: 1 / -1; }

    .md\:row-start-1    { grid-row-start: 1; }
    .md\:row-start-2    { grid-row-start: 2; }
    .md\:row-start-3    { grid-row-start: 3; }
    .md\:row-start-4    { grid-row-start: 4; }
    .md\:row-start-5    { grid-row-start: 5; }
    .md\:row-start-6    { grid-row-start: 6; }
    .md\:row-start-7    { grid-row-start: 7; }
    .md\:row-start-auto { grid-row-start: auto; }

    .md\:row-end-1      { grid-row-end: 1; }
    .md\:row-end-2      { grid-row-end: 2; }
    .md\:row-end-3      { grid-row-end: 3; }
    .md\:row-end-4      { grid-row-end: 4; }
    .md\:row-end-5      { grid-row-end: 5; }
    .md\:row-end-6      { grid-row-end: 6; }
    .md\:row-end-7      { grid-row-end: 7; }
    .md\:row-end-auto   { grid-row-end: auto; }

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

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

    /*****************************************************************************************
    Grid Auto Rows
    *****************************************************************************************/
    .md\:auto-row-auto       > .inside { grid-auto-rows: auto; }
    .md\:auto-row-min        > .inside { grid-auto-rows: min-content; }
    .md\:auto-row-max        > .inside { grid-auto-rows: max-content; }
    .md\:auto-row-fr         > .inside { grid-auto-rows: minmax(0, 1fr); }

    /*****************************************************************************************
    Gap
    *****************************************************************************************/
    .md\:gap-0          > .inside { gap: 0px; }
    .md\:gap-x-0        > .inside { column-gap: 0px; }
    .md\:gap-y-0        > .inside { row-gap: 0px; }
    .md\:gap-px         > .inside { gap: 1px; }
    .md\:gap-x-px       > .inside { column-gap: 1px; }
    .md\:gap-y-px       > .inside { row-gap: 1px; }
    .md\:gap-0\.5       > .inside { gap: 0.125em;          /* 2px */ }
    .md\:gap-x-0\.5     > .inside { column-gap: 0.125em;   /* 2px */ }
    .md\:gap-y-0\.5     > .inside { row-gap: 0.125em;      /* 2px */ }
    .md\:gap-1          > .inside { gap: 0.25em;           /* 4px */ }
    .md\:gap-x-1        > .inside { column-gap: 0.25em;    /* 4px */ }
    .md\:gap-y-1        > .inside { row-gap: 0.25em;       /* 4px */ }
    .md\:gap-1\.5       > .inside { gap: 0.375em;          /* 6px */ }
    .md\:gap-x-1\.5     > .inside { column-gap: 0.375em;   /* 6px */ }
    .md\:gap-y-1\.5     > .inside { row-gap: 0.375em;      /* 6px */ }
    .md\:gap-2          > .inside { gap: 0.5em;            /* 8px */ }
    .md\:gap-x-2        > .inside { column-gap: 0.5em;     /* 8px */ }
    .md\:gap-y-2        > .inside { row-gap: 0.5em;        /* 8px */ }
    .md\:gap-2\.5       > .inside { gap: 0.625em;          /* 10px */ }
    .md\:gap-x-2\.5     > .inside { column-gap: 0.625em;   /* 10px */ }
    .md\:gap-y-2\.5     > .inside { row-gap: 0.625em;      /* 10px */ }
    .md\:gap-3          > .inside { gap: 0.75em;           /* 12px */ }
    .md\:gap-x-3        > .inside { column-gap: 0.75em;    /* 12px */ }
    .md\:gap-y-3        > .inside { row-gap: 0.75em;       /* 12px */ }
    .md\:gap-3\.5       > .inside { gap: 0.875em;          /* 14px */ }
    .md\:gap-x-3\.5     > .inside { column-gap: 0.875em;   /* 14px */ }
    .md\:gap-y-3\.5     > .inside { row-gap: 0.875em;      /* 14px */ }
    .md\:gap-4          > .inside { gap: 1em;              /* 16px */ }
    .md\:gap-x-4        > .inside { column-gap: 1em;       /* 16px */ }
    .md\:gap-y-4        > .inside { row-gap: 1em;          /* 16px */ }
    .md\:gap-5          > .inside { gap: 1.25em;           /* 20px */ }
    .md\:gap-x-5        > .inside { column-gap: 1.25em;    /* 20px */ }
    .md\:gap-y-5        > .inside { row-gap: 1.25em;       /* 20px */ }
    .md\:gap-6          > .inside { gap: 1.5em;            /* 24px */ }
    .md\:gap-x-6        > .inside { column-gap: 1.5em;     /* 24px */ }
    .md\:gap-y-6        > .inside { row-gap: 1.5em;        /* 24px */ }
    .md\:gap-7          > .inside { gap: 1.75em;           /* 28px */ }
    .md\:gap-x-7        > .inside { column-gap: 1.75em;    /* 28px */ }
    .md\:gap-y-7        > .inside { row-gap: 1.75em;       /* 28px */ }
    .md\:gap-8          > .inside { gap: 2em;              /* 32px */ }
    .md\:gap-x-8        > .inside { column-gap: 2em;       /* 32px */ }
    .md\:gap-y-8        > .inside { row-gap: 2em;          /* 32px */ }
    .md\:gap-9          > .inside { gap: 2.25em;           /* 36px */ }
    .md\:gap-x-9        > .inside { column-gap: 2.25em;    /* 36px */ }
    .md\:gap-y-9        > .inside { row-gap: 2.25em;       /* 36px */ }
    .md\:gap-10         > .inside { gap: 2.5em;            /* 40px */ }
    .md\:gap-x-10       > .inside { column-gap: 2.5em;     /* 40px */ }
    .md\:gap-y-10       > .inside { row-gap: 2.5em;        /* 40px */ }
    .md\:gap-11         > .inside { gap: 2.75em;           /* 44px */ }
    .md\:gap-x-11       > .inside { column-gap: 2.75em;    /* 44px */ }
    .md\:gap-y-11       > .inside { row-gap: 2.75em;       /* 44px */ }
    .md\:gap-12         > .inside { gap: 3em;              /* 48px */ }
    .md\:gap-x-12       > .inside { column-gap: 3em;       /* 48px */ }
    .md\:gap-y-12       > .inside { row-gap: 3em;          /* 48px */ }
    .md\:gap-14         > .inside { gap: 3.5em;            /* 56px */ }
    .md\:gap-x-14       > .inside { column-gap: 3.5em;     /* 56px */ }
    .md\:gap-y-14       > .inside { row-gap: 3.5em;        /* 56px */ }
    .md\:gap-16         > .inside { gap: 4em;              /* 64px */ }
    .md\:gap-x-16       > .inside { column-gap: 4em;       /* 64px */ }
    .md\:gap-y-16       > .inside { row-gap: 4em;          /* 64px */ }
    .md\:gap-20         > .inside { gap: 5em;              /* 80px */ }
    .md\:gap-x-20       > .inside { column-gap: 5em;       /* 80px */ }
    .md\:gap-y-20       > .inside { row-gap: 5em;          /* 80px */ }
    .md\:gap-24         > .inside { gap: 6em;              /* 96px */ }
    .md\:gap-x-24       > .inside { column-gap: 6em;       /* 96px */ }
    .md\:gap-y-24       > .inside { row-gap: 6em;          /* 96px */ }
    .md\:gap-28         > .inside { gap: 7em;              /* 112px */ }
    .md\:gap-x-28       > .inside { column-gap: 7em;       /* 112px */ }
    .md\:gap-y-28       > .inside { row-gap: 7em;          /* 112px */ }
    .md\:gap-32         > .inside { gap: 8em;              /* 128px */ }
    .md\:gap-x-32       > .inside { column-gap: 8em;       /* 128px */ }
    .md\:gap-y-32       > .inside { row-gap: 8em;          /* 128px */ }
    .md\:gap-36         > .inside { gap: 9em;              /* 144px */ }
    .md\:gap-x-36       > .inside { column-gap: 9em;       /* 144px */ }
    .md\:gap-y-36       > .inside { row-gap: 9em;          /* 144px */ }
    .md\:gap-40         > .inside { gap: 10em;             /* 160px */ }
    .md\:gap-x-40       > .inside { column-gap: 10em;      /* 160px */ }
    .md\:gap-y-40       > .inside { row-gap: 10em;         /* 160px */ }
    .md\:gap-44         > .inside { gap: 11em;             /* 176px */ }
    .md\:gap-x-44       > .inside { column-gap: 11em;      /* 176px */ }
    .md\:gap-y-44       > .inside { row-gap: 11em;         /* 176px */ }
    .md\:gap-48         > .inside { gap: 12em;             /* 192px */ }
    .md\:gap-x-48       > .inside { column-gap: 12em;      /* 192px */ }
    .md\:gap-y-48       > .inside { row-gap: 12em;         /* 192px */ }
    .md\:gap-52         > .inside { gap: 13em;             /* 208px */ }
    .md\:gap-x-52       > .inside { column-gap: 13em;      /* 208px */ }
    .md\:gap-y-52       > .inside { row-gap: 13em;         /* 208px */ }
    .md\:gap-56         > .inside { gap: 14em;             /* 224px */ }
    .md\:gap-x-56       > .inside { column-gap: 14em;      /* 224px */ }
    .md\:gap-y-56       > .inside { row-gap: 14em;         /* 224px */ }
    .md\:gap-60         > .inside { gap: 15em;             /* 240px */ }
    .md\:gap-x-60       > .inside { column-gap: 15em;      /* 240px */ }
    .md\:gap-y-60       > .inside { row-gap: 15em;         /* 240px */ }
    .md\:gap-64         > .inside { gap: 16em;             /* 256px */ }
    .md\:gap-x-64       > .inside { column-gap: 16em;      /* 256px */ }
    .md\:gap-y-64       > .inside { row-gap: 16em;         /* 256px */ }
    .md\:gap-72         > .inside { gap: 18em;             /* 288px */ }
    .md\:gap-x-72       > .inside { column-gap: 18em;      /* 288px */ }
    .md\:gap-y-72       > .inside { row-gap: 18em;         /* 288px */ }
    .md\:gap-80         > .inside { gap: 20em;             /* 320px */ }
    .md\:gap-x-80       > .inside { column-gap: 20em;      /* 320px */ }
    .md\:gap-y-80       > .inside { row-gap: 20em;         /* 320px */ }
    .md\:gap-96         > .inside { gap: 24em;             /* 384px */ }
    .md\:gap-x-96       > .inside { column-gap: 24em;      /* 384px */ }
    .md\:gap-y-96       > .inside { row-gap: 24em;         /* 384px */ }
}

/*  LG :: ab 1024px = 64em */
@media screen and (min-width: 1024px) {
    /*****************************************************************************************
    Grid Template Columns (CONTAINER)

    WICHTIG bei Contao: '> .inside'
    *****************************************************************************************/
    .lg\:grid-cols-1    > .inside,
    .lg\:grid-cols-2    > .inside,
    .lg\:grid-cols-3    > .inside,
    .lg\:grid-cols-4    > .inside,
    .lg\:grid-cols-5    > .inside,
    .lg\:grid-cols-6    > .inside,
    .lg\:grid-cols-7    > .inside,
    .lg\:grid-cols-8    > .inside,
    .lg\:grid-cols-9    > .inside,
    .lg\:grid-cols-10   > .inside,
    .lg\:grid-cols-11   > .inside,
    .lg\:grid-cols-12   > .inside,
    .lg\:grid-cols-none > .inside {
        display: grid;
    }
    .lg\:grid-cols-1    > .inside { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
    .lg\:grid-cols-2    > .inside { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
    .lg\:grid-cols-3    > .inside { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
    .lg\:grid-cols-4    > .inside { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
    .lg\:grid-cols-5    > .inside { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
    .lg\:grid-cols-6    > .inside { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
    .lg\:grid-cols-7    > .inside { grid-template-columns: repeat(7,  minmax(0, 1fr)); }
    .lg\:grid-cols-8    > .inside { grid-template-columns: repeat(8,  minmax(0, 1fr)); }
    .lg\:grid-cols-9    > .inside { grid-template-columns: repeat(9,  minmax(0, 1fr)); }
    .lg\:grid-cols-10   > .inside { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .lg\:grid-cols-11   > .inside { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .lg\:grid-cols-12   > .inside { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:grid-cols-none > .inside { grid-template-columns: none; }

    /*****************************************************************************************
    Grid Column Start / End (ITEMS)
    *****************************************************************************************/
    .lg\:col-auto       { grid-column: auto; }
    .lg\:col-span-1     { grid-column: span 1  / span 1; }
    .lg\:col-span-2     { grid-column: span 2  / span 2; }
    .lg\:col-span-3     { grid-column: span 3  / span 3; }
    .lg\:col-span-4     { grid-column: span 4  / span 4; }
    .lg\:col-span-5     { grid-column: span 5  / span 5; }
    .lg\:col-span-6     { grid-column: span 6  / span 6; }
    .lg\:col-span-7     { grid-column: span 7  / span 7; }
    .lg\:col-span-8     { grid-column: span 8  / span 8; }
    .lg\:col-span-9     { grid-column: span 9  / span 9; }
    .lg\:col-span-10    { grid-column: span 10 / span 10; }
    .lg\:col-span-11    { grid-column: span 11 / span 11; }
    .lg\:col-span-12    { grid-column: span 12 / span 12; }
    .lg\:col-span-full  { grid-column: 1 / -1; }

    .lg\:col-start-1    { grid-column-start: 1; }
    .lg\:col-start-2    { grid-column-start: 2; }
    .lg\:col-start-3    { grid-column-start: 3; }
    .lg\:col-start-4    { grid-column-start: 4; }
    .lg\:col-start-5    { grid-column-start: 5; }
    .lg\:col-start-6    { grid-column-start: 6; }
    .lg\:col-start-7    { grid-column-start: 7; }
    .lg\:col-start-8    { grid-column-start: 8; }
    .lg\:col-start-9    { grid-column-start: 9; }
    .lg\:col-start-10   { grid-column-start: 10; }
    .lg\:col-start-11   { grid-column-start: 11; }
    .lg\:col-start-12   { grid-column-start: 12; }
    .lg\:col-start-13   { grid-column-start: 13; }      /* wieso 13? */
    .lg\:col-start-auto { grid-column-start: auto; }

    .lg\:col-end-1      { grid-column-end: 1; }         /* wieso 1? */
    .lg\:col-end-2      { grid-column-end: 2; }
    .lg\:col-end-3      { grid-column-end: 3; }
    .lg\:col-end-4      { grid-column-end: 4; }
    .lg\:col-end-5      { grid-column-end: 5; }
    .lg\:col-end-6      { grid-column-end: 6; }
    .lg\:col-end-7      { grid-column-end: 7; }
    .lg\:col-end-8      { grid-column-end: 8; }
    .lg\:col-end-9      { grid-column-end: 9; }
    .lg\:col-end-10     { grid-column-end: 10; }
    .lg\:col-end-11     { grid-column-end: 11; }
    .lg\:col-end-12     { grid-column-end: 12; }
    .lg\:col-end-13     { grid-column-end: 13; }
    .lg\:col-end-auto   { grid-column-end: auto; }

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

    /*****************************************************************************************
    Grid Row Start / End
    *****************************************************************************************/
    .lg\:row-auto       { grid-row: auto; }
    .lg\:row-span-1     { grid-row: span 1 / span 1; }
    .lg\:row-span-2     { grid-row: span 2 / span 2; }
    .lg\:row-span-3     { grid-row: span 3 / span 3; }
    .lg\:row-span-4     { grid-row: span 4 / span 4; }
    .lg\:row-span-5     { grid-row: span 5 / span 5; }
    .lg\:row-span-6     { grid-row: span 6 / span 6; }
    .lg\:row-span-full  { grid-row: 1 / -1; }

    .lg\:row-start-1    { grid-row-start: 1; }
    .lg\:row-start-2    { grid-row-start: 2; }
    .lg\:row-start-3    { grid-row-start: 3; }
    .lg\:row-start-4    { grid-row-start: 4; }
    .lg\:row-start-5    { grid-row-start: 5; }
    .lg\:row-start-6    { grid-row-start: 6; }
    .lg\:row-start-7    { grid-row-start: 7; }
    .lg\:row-start-auto { grid-row-start: auto; }

    .lg\:row-end-1      { grid-row-end: 1; }
    .lg\:row-end-2      { grid-row-end: 2; }
    .lg\:row-end-3      { grid-row-end: 3; }
    .lg\:row-end-4      { grid-row-end: 4; }
    .lg\:row-end-5      { grid-row-end: 5; }
    .lg\:row-end-6      { grid-row-end: 6; }
    .lg\:row-end-7      { grid-row-end: 7; }
    .lg\:row-end-auto   { grid-row-end: auto; }

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

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

    /*****************************************************************************************
    Grid Auto Rows
    *****************************************************************************************/
    .lg\:auto-row-auto       > .inside { grid-auto-rows: auto; }
    .lg\:auto-row-min        > .inside { grid-auto-rows: min-content; }
    .lg\:auto-row-max        > .inside { grid-auto-rows: max-content; }
    .lg\:auto-row-fr         > .inside { grid-auto-rows: minmax(0, 1fr); }

    /*****************************************************************************************
    Gap
    *****************************************************************************************/
    .lg\:gap-0          > .inside { gap: 0px; }
    .lg\:gap-x-0        > .inside { column-gap: 0px; }
    .lg\:gap-y-0        > .inside { row-gap: 0px; }
    .lg\:gap-px         > .inside { gap: 1px; }
    .lg\:gap-x-px       > .inside { column-gap: 1px; }
    .lg\:gap-y-px       > .inside { row-gap: 1px; }
    .lg\:gap-0\.5       > .inside { gap: 0.125em;          /* 2px */ }
    .lg\:gap-x-0\.5     > .inside { column-gap: 0.125em;   /* 2px */ }
    .lg\:gap-y-0\.5     > .inside { row-gap: 0.125em;      /* 2px */ }
    .lg\:gap-1          > .inside { gap: 0.25em;           /* 4px */ }
    .lg\:gap-x-1        > .inside { column-gap: 0.25em;    /* 4px */ }
    .lg\:gap-y-1        > .inside { row-gap: 0.25em;       /* 4px */ }
    .lg\:gap-1\.5       > .inside { gap: 0.375em;          /* 6px */ }
    .lg\:gap-x-1\.5     > .inside { column-gap: 0.375em;   /* 6px */ }
    .lg\:gap-y-1\.5     > .inside { row-gap: 0.375em;      /* 6px */ }
    .lg\:gap-2          > .inside { gap: 0.5em;            /* 8px */ }
    .lg\:gap-x-2        > .inside { column-gap: 0.5em;     /* 8px */ }
    .lg\:gap-y-2        > .inside { row-gap: 0.5em;        /* 8px */ }
    .lg\:gap-2\.5       > .inside { gap: 0.625em;          /* 10px */ }
    .lg\:gap-x-2\.5     > .inside { column-gap: 0.625em;   /* 10px */ }
    .lg\:gap-y-2\.5     > .inside { row-gap: 0.625em;      /* 10px */ }
    .lg\:gap-3          > .inside { gap: 0.75em;           /* 12px */ }
    .lg\:gap-x-3        > .inside { column-gap: 0.75em;    /* 12px */ }
    .lg\:gap-y-3        > .inside { row-gap: 0.75em;       /* 12px */ }
    .lg\:gap-3\.5       > .inside { gap: 0.875em;          /* 14px */ }
    .lg\:gap-x-3\.5     > .inside { column-gap: 0.875em;   /* 14px */ }
    .lg\:gap-y-3\.5     > .inside { row-gap: 0.875em;      /* 14px */ }
    .lg\:gap-4          > .inside { gap: 1em;              /* 16px */ }
    .lg\:gap-x-4        > .inside { column-gap: 1em;       /* 16px */ }
    .lg\:gap-y-4        > .inside { row-gap: 1em;          /* 16px */ }
    .lg\:gap-5          > .inside { gap: 1.25em;           /* 20px */ }
    .lg\:gap-x-5        > .inside { column-gap: 1.25em;    /* 20px */ }
    .lg\:gap-y-5        > .inside { row-gap: 1.25em;       /* 20px */ }
    .lg\:gap-6          > .inside { gap: 1.5em;            /* 24px */ }
    .lg\:gap-x-6        > .inside { column-gap: 1.5em;     /* 24px */ }
    .lg\:gap-y-6        > .inside { row-gap: 1.5em;        /* 24px */ }
    .lg\:gap-7          > .inside { gap: 1.75em;           /* 28px */ }
    .lg\:gap-x-7        > .inside { column-gap: 1.75em;    /* 28px */ }
    .lg\:gap-y-7        > .inside { row-gap: 1.75em;       /* 28px */ }
    .lg\:gap-8          > .inside { gap: 2em;              /* 32px */ }
    .lg\:gap-x-8        > .inside { column-gap: 2em;       /* 32px */ }
    .lg\:gap-y-8        > .inside { row-gap: 2em;          /* 32px */ }
    .lg\:gap-9          > .inside { gap: 2.25em;           /* 36px */ }
    .lg\:gap-x-9        > .inside { column-gap: 2.25em;    /* 36px */ }
    .lg\:gap-y-9        > .inside { row-gap: 2.25em;       /* 36px */ }
    .lg\:gap-10         > .inside { gap: 2.5em;            /* 40px */ }
    .lg\:gap-x-10       > .inside { column-gap: 2.5em;     /* 40px */ }
    .lg\:gap-y-10       > .inside { row-gap: 2.5em;        /* 40px */ }
    .lg\:gap-11         > .inside { gap: 2.75em;           /* 44px */ }
    .lg\:gap-x-11       > .inside { column-gap: 2.75em;    /* 44px */ }
    .lg\:gap-y-11       > .inside { row-gap: 2.75em;       /* 44px */ }
    .lg\:gap-12         > .inside { gap: 3em;              /* 48px */ }
    .lg\:gap-x-12       > .inside { column-gap: 3em;       /* 48px */ }
    .lg\:gap-y-12       > .inside { row-gap: 3em;          /* 48px */ }
    .lg\:gap-14         > .inside { gap: 3.5em;            /* 56px */ }
    .lg\:gap-x-14       > .inside { column-gap: 3.5em;     /* 56px */ }
    .lg\:gap-y-14       > .inside { row-gap: 3.5em;        /* 56px */ }
    .lg\:gap-16         > .inside { gap: 4em;              /* 64px */ }
    .lg\:gap-x-16       > .inside { column-gap: 4em;       /* 64px */ }
    .lg\:gap-y-16       > .inside { row-gap: 4em;          /* 64px */ }
    .lg\:gap-20         > .inside { gap: 5em;              /* 80px */ }
    .lg\:gap-x-20       > .inside { column-gap: 5em;       /* 80px */ }
    .lg\:gap-y-20       > .inside { row-gap: 5em;          /* 80px */ }
    .lg\:gap-24         > .inside { gap: 6em;              /* 96px */ }
    .lg\:gap-x-24       > .inside { column-gap: 6em;       /* 96px */ }
    .lg\:gap-y-24       > .inside { row-gap: 6em;          /* 96px */ }
    .lg\:gap-28         > .inside { gap: 7em;              /* 112px */ }
    .lg\:gap-x-28       > .inside { column-gap: 7em;       /* 112px */ }
    .lg\:gap-y-28       > .inside { row-gap: 7em;          /* 112px */ }
    .lg\:gap-32         > .inside { gap: 8em;              /* 128px */ }
    .lg\:gap-x-32       > .inside { column-gap: 8em;       /* 128px */ }
    .lg\:gap-y-32       > .inside { row-gap: 8em;          /* 128px */ }
    .lg\:gap-36         > .inside { gap: 9em;              /* 144px */ }
    .lg\:gap-x-36       > .inside { column-gap: 9em;       /* 144px */ }
    .lg\:gap-y-36       > .inside { row-gap: 9em;          /* 144px */ }
    .lg\:gap-40         > .inside { gap: 10em;             /* 160px */ }
    .lg\:gap-x-40       > .inside { column-gap: 10em;      /* 160px */ }
    .lg\:gap-y-40       > .inside { row-gap: 10em;         /* 160px */ }
    .lg\:gap-44         > .inside { gap: 11em;             /* 176px */ }
    .lg\:gap-x-44       > .inside { column-gap: 11em;      /* 176px */ }
    .lg\:gap-y-44       > .inside { row-gap: 11em;         /* 176px */ }
    .lg\:gap-48         > .inside { gap: 12em;             /* 192px */ }
    .lg\:gap-x-48       > .inside { column-gap: 12em;      /* 192px */ }
    .lg\:gap-y-48       > .inside { row-gap: 12em;         /* 192px */ }
    .lg\:gap-52         > .inside { gap: 13em;             /* 208px */ }
    .lg\:gap-x-52       > .inside { column-gap: 13em;      /* 208px */ }
    .lg\:gap-y-52       > .inside { row-gap: 13em;         /* 208px */ }
    .lg\:gap-56         > .inside { gap: 14em;             /* 224px */ }
    .lg\:gap-x-56       > .inside { column-gap: 14em;      /* 224px */ }
    .lg\:gap-y-56       > .inside { row-gap: 14em;         /* 224px */ }
    .lg\:gap-60         > .inside { gap: 15em;             /* 240px */ }
    .lg\:gap-x-60       > .inside { column-gap: 15em;      /* 240px */ }
    .lg\:gap-y-60       > .inside { row-gap: 15em;         /* 240px */ }
    .lg\:gap-64         > .inside { gap: 16em;             /* 256px */ }
    .lg\:gap-x-64       > .inside { column-gap: 16em;      /* 256px */ }
    .lg\:gap-y-64       > .inside { row-gap: 16em;         /* 256px */ }
    .lg\:gap-72         > .inside { gap: 18em;             /* 288px */ }
    .lg\:gap-x-72       > .inside { column-gap: 18em;      /* 288px */ }
    .lg\:gap-y-72       > .inside { row-gap: 18em;         /* 288px */ }
    .lg\:gap-80         > .inside { gap: 20em;             /* 320px */ }
    .lg\:gap-x-80       > .inside { column-gap: 20em;      /* 320px */ }
    .lg\:gap-y-80       > .inside { row-gap: 20em;         /* 320px */ }
    .lg\:gap-96         > .inside { gap: 24em;             /* 384px */ }
    .lg\:gap-x-96       > .inside { column-gap: 24em;      /* 384px */ }
    .lg\:gap-y-96       > .inside { row-gap: 24em;         /* 384px */ }
}

/*  XL :: ab 1280px = 80em */
@media screen and (min-width: 1280px) {
    /*****************************************************************************************
    Grid Template Columns (CONTAINER)

    WICHTIG bei Contao: '> .inside'
    *****************************************************************************************/
    .xl\:grid-cols-1    > .inside,
    .xl\:grid-cols-2    > .inside,
    .xl\:grid-cols-3    > .inside,
    .xl\:grid-cols-4    > .inside,
    .xl\:grid-cols-5    > .inside,
    .xl\:grid-cols-6    > .inside,
    .xl\:grid-cols-7    > .inside,
    .xl\:grid-cols-8    > .inside,
    .xl\:grid-cols-9    > .inside,
    .xl\:grid-cols-10   > .inside,
    .xl\:grid-cols-11   > .inside,
    .xl\:grid-cols-12   > .inside,
    .xl\:grid-cols-none > .inside {
        display: grid;
    }
    .xl\:grid-cols-1    > .inside { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
    .xl\:grid-cols-2    > .inside { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
    .xl\:grid-cols-3    > .inside { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
    .xl\:grid-cols-4    > .inside { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
    .xl\:grid-cols-5    > .inside { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
    .xl\:grid-cols-6    > .inside { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
    .xl\:grid-cols-7    > .inside { grid-template-columns: repeat(7,  minmax(0, 1fr)); }
    .xl\:grid-cols-8    > .inside { grid-template-columns: repeat(8,  minmax(0, 1fr)); }
    .xl\:grid-cols-9    > .inside { grid-template-columns: repeat(9,  minmax(0, 1fr)); }
    .xl\:grid-cols-10   > .inside { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .xl\:grid-cols-11   > .inside { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .xl\:grid-cols-12   > .inside { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .xl\:grid-cols-none > .inside { grid-template-columns: none; }

    /*****************************************************************************************
    Grid Column Start / End (ITEMS)
    *****************************************************************************************/
    .xl\:col-auto       { grid-column: auto; }
    .xl\:col-span-1     { grid-column: span 1  / span 1; }
    .xl\:col-span-2     { grid-column: span 2  / span 2; }
    .xl\:col-span-3     { grid-column: span 3  / span 3; }
    .xl\:col-span-4     { grid-column: span 4  / span 4; }
    .xl\:col-span-5     { grid-column: span 5  / span 5; }
    .xl\:col-span-6     { grid-column: span 6  / span 6; }
    .xl\:col-span-7     { grid-column: span 7  / span 7; }
    .xl\:col-span-8     { grid-column: span 8  / span 8; }
    .xl\:col-span-9     { grid-column: span 9  / span 9; }
    .xl\:col-span-10    { grid-column: span 10 / span 10; }
    .xl\:col-span-11    { grid-column: span 11 / span 11; }
    .xl\:col-span-12    { grid-column: span 12 / span 12; }
    .xl\:col-span-full  { grid-column: 1 / -1; }

    .xl\:col-start-1    { grid-column-start: 1; }
    .xl\:col-start-2    { grid-column-start: 2; }
    .xl\:col-start-3    { grid-column-start: 3; }
    .xl\:col-start-4    { grid-column-start: 4; }
    .xl\:col-start-5    { grid-column-start: 5; }
    .xl\:col-start-6    { grid-column-start: 6; }
    .xl\:col-start-7    { grid-column-start: 7; }
    .xl\:col-start-8    { grid-column-start: 8; }
    .xl\:col-start-9    { grid-column-start: 9; }
    .xl\:col-start-10   { grid-column-start: 10; }
    .xl\:col-start-11   { grid-column-start: 11; }
    .xl\:col-start-12   { grid-column-start: 12; }
    .xl\:col-start-13   { grid-column-start: 13; }      /* wieso 13? */
    .xl\:col-start-auto { grid-column-start: auto; }

    .xl\:col-end-1      { grid-column-end: 1; }         /* wieso 1? */
    .xl\:col-end-2      { grid-column-end: 2; }
    .xl\:col-end-3      { grid-column-end: 3; }
    .xl\:col-end-4      { grid-column-end: 4; }
    .xl\:col-end-5      { grid-column-end: 5; }
    .xl\:col-end-6      { grid-column-end: 6; }
    .xl\:col-end-7      { grid-column-end: 7; }
    .xl\:col-end-8      { grid-column-end: 8; }
    .xl\:col-end-9      { grid-column-end: 9; }
    .xl\:col-end-10     { grid-column-end: 10; }
    .xl\:col-end-11     { grid-column-end: 11; }
    .xl\:col-end-12     { grid-column-end: 12; }
    .xl\:col-end-13     { grid-column-end: 13; }
    .xl\:col-end-auto   { grid-column-end: auto; }

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

    /*****************************************************************************************
    Grid Row Start / End
    *****************************************************************************************/
    .xl\:row-auto       { grid-row: auto; }
    .xl\:row-span-1     { grid-row: span 1 / span 1; }
    .xl\:row-span-2     { grid-row: span 2 / span 2; }
    .xl\:row-span-3     { grid-row: span 3 / span 3; }
    .xl\:row-span-4     { grid-row: span 4 / span 4; }
    .xl\:row-span-5     { grid-row: span 5 / span 5; }
    .xl\:row-span-6     { grid-row: span 6 / span 6; }
    .xl\:row-span-full  { grid-row: 1 / -1; }

    .xl\:row-start-1    { grid-row-start: 1; }
    .xl\:row-start-2    { grid-row-start: 2; }
    .xl\:row-start-3    { grid-row-start: 3; }
    .xl\:row-start-4    { grid-row-start: 4; }
    .xl\:row-start-5    { grid-row-start: 5; }
    .xl\:row-start-6    { grid-row-start: 6; }
    .xl\:row-start-7    { grid-row-start: 7; }
    .xl\:row-start-auto { grid-row-start: auto; }

    .xl\:row-end-1      { grid-row-end: 1; }
    .xl\:row-end-2      { grid-row-end: 2; }
    .xl\:row-end-3      { grid-row-end: 3; }
    .xl\:row-end-4      { grid-row-end: 4; }
    .xl\:row-end-5      { grid-row-end: 5; }
    .xl\:row-end-6      { grid-row-end: 6; }
    .xl\:row-end-7      { grid-row-end: 7; }
    .xl\:row-end-auto   { grid-row-end: auto; }

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

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

    /*****************************************************************************************
    Grid Auto Rows
    *****************************************************************************************/
    .xl\:auto-row-auto       > .inside { grid-auto-rows: auto; }
    .xl\:auto-row-min        > .inside { grid-auto-rows: min-content; }
    .xl\:auto-row-max        > .inside { grid-auto-rows: max-content; }
    .xl\:auto-row-fr         > .inside { grid-auto-rows: minmax(0, 1fr); }

    /*****************************************************************************************
    Gap
    *****************************************************************************************/
    .xl\:gap-0          > .inside { gap: 0px; }
    .xl\:gap-x-0        > .inside { column-gap: 0px; }
    .xl\:gap-y-0        > .inside { row-gap: 0px; }
    .xl\:gap-px         > .inside { gap: 1px; }
    .xl\:gap-x-px       > .inside { column-gap: 1px; }
    .xl\:gap-y-px       > .inside { row-gap: 1px; }
    .xl\:gap-0\.5       > .inside { gap: 0.125em;          /* 2px */ }
    .xl\:gap-x-0\.5     > .inside { column-gap: 0.125em;   /* 2px */ }
    .xl\:gap-y-0\.5     > .inside { row-gap: 0.125em;      /* 2px */ }
    .xl\:gap-1          > .inside { gap: 0.25em;           /* 4px */ }
    .xl\:gap-x-1        > .inside { column-gap: 0.25em;    /* 4px */ }
    .xl\:gap-y-1        > .inside { row-gap: 0.25em;       /* 4px */ }
    .xl\:gap-1\.5       > .inside { gap: 0.375em;          /* 6px */ }
    .xl\:gap-x-1\.5     > .inside { column-gap: 0.375em;   /* 6px */ }
    .xl\:gap-y-1\.5     > .inside { row-gap: 0.375em;      /* 6px */ }
    .xl\:gap-2          > .inside { gap: 0.5em;            /* 8px */ }
    .xl\:gap-x-2        > .inside { column-gap: 0.5em;     /* 8px */ }
    .xl\:gap-y-2        > .inside { row-gap: 0.5em;        /* 8px */ }
    .xl\:gap-2\.5       > .inside { gap: 0.625em;          /* 10px */ }
    .xl\:gap-x-2\.5     > .inside { column-gap: 0.625em;   /* 10px */ }
    .xl\:gap-y-2\.5     > .inside { row-gap: 0.625em;      /* 10px */ }
    .xl\:gap-3          > .inside { gap: 0.75em;           /* 12px */ }
    .xl\:gap-x-3        > .inside { column-gap: 0.75em;    /* 12px */ }
    .xl\:gap-y-3        > .inside { row-gap: 0.75em;       /* 12px */ }
    .xl\:gap-3\.5       > .inside { gap: 0.875em;          /* 14px */ }
    .xl\:gap-x-3\.5     > .inside { column-gap: 0.875em;   /* 14px */ }
    .xl\:gap-y-3\.5     > .inside { row-gap: 0.875em;      /* 14px */ }
    .xl\:gap-4          > .inside { gap: 1em;              /* 16px */ }
    .xl\:gap-x-4        > .inside { column-gap: 1em;       /* 16px */ }
    .xl\:gap-y-4        > .inside { row-gap: 1em;          /* 16px */ }
    .xl\:gap-5          > .inside { gap: 1.25em;           /* 20px */ }
    .xl\:gap-x-5        > .inside { column-gap: 1.25em;    /* 20px */ }
    .xl\:gap-y-5        > .inside { row-gap: 1.25em;       /* 20px */ }
    .xl\:gap-6          > .inside { gap: 1.5em;            /* 24px */ }
    .xl\:gap-x-6        > .inside { column-gap: 1.5em;     /* 24px */ }
    .xl\:gap-y-6        > .inside { row-gap: 1.5em;        /* 24px */ }
    .xl\:gap-7          > .inside { gap: 1.75em;           /* 28px */ }
    .xl\:gap-x-7        > .inside { column-gap: 1.75em;    /* 28px */ }
    .xl\:gap-y-7        > .inside { row-gap: 1.75em;       /* 28px */ }
    .xl\:gap-8          > .inside { gap: 2em;              /* 32px */ }
    .xl\:gap-x-8        > .inside { column-gap: 2em;       /* 32px */ }
    .xl\:gap-y-8        > .inside { row-gap: 2em;          /* 32px */ }
    .xl\:gap-9          > .inside { gap: 2.25em;           /* 36px */ }
    .xl\:gap-x-9        > .inside { column-gap: 2.25em;    /* 36px */ }
    .xl\:gap-y-9        > .inside { row-gap: 2.25em;       /* 36px */ }
    .xl\:gap-10         > .inside { gap: 2.5em;            /* 40px */ }
    .xl\:gap-x-10       > .inside { column-gap: 2.5em;     /* 40px */ }
    .xl\:gap-y-10       > .inside { row-gap: 2.5em;        /* 40px */ }
    .xl\:gap-11         > .inside { gap: 2.75em;           /* 44px */ }
    .xl\:gap-x-11       > .inside { column-gap: 2.75em;    /* 44px */ }
    .xl\:gap-y-11       > .inside { row-gap: 2.75em;       /* 44px */ }
    .xl\:gap-12         > .inside { gap: 3em;              /* 48px */ }
    .xl\:gap-x-12       > .inside { column-gap: 3em;       /* 48px */ }
    .xl\:gap-y-12       > .inside { row-gap: 3em;          /* 48px */ }
    .xl\:gap-14         > .inside { gap: 3.5em;            /* 56px */ }
    .xl\:gap-x-14       > .inside { column-gap: 3.5em;     /* 56px */ }
    .xl\:gap-y-14       > .inside { row-gap: 3.5em;        /* 56px */ }
    .xl\:gap-16         > .inside { gap: 4em;              /* 64px */ }
    .xl\:gap-x-16       > .inside { column-gap: 4em;       /* 64px */ }
    .xl\:gap-y-16       > .inside { row-gap: 4em;          /* 64px */ }
    .xl\:gap-20         > .inside { gap: 5em;              /* 80px */ }
    .xl\:gap-x-20       > .inside { column-gap: 5em;       /* 80px */ }
    .xl\:gap-y-20       > .inside { row-gap: 5em;          /* 80px */ }
    .xl\:gap-24         > .inside { gap: 6em;              /* 96px */ }
    .xl\:gap-x-24       > .inside { column-gap: 6em;       /* 96px */ }
    .xl\:gap-y-24       > .inside { row-gap: 6em;          /* 96px */ }
    .xl\:gap-28         > .inside { gap: 7em;              /* 112px */ }
    .xl\:gap-x-28       > .inside { column-gap: 7em;       /* 112px */ }
    .xl\:gap-y-28       > .inside { row-gap: 7em;          /* 112px */ }
    .xl\:gap-32         > .inside { gap: 8em;              /* 128px */ }
    .xl\:gap-x-32       > .inside { column-gap: 8em;       /* 128px */ }
    .xl\:gap-y-32       > .inside { row-gap: 8em;          /* 128px */ }
    .xl\:gap-36         > .inside { gap: 9em;              /* 144px */ }
    .xl\:gap-x-36       > .inside { column-gap: 9em;       /* 144px */ }
    .xl\:gap-y-36       > .inside { row-gap: 9em;          /* 144px */ }
    .xl\:gap-40         > .inside { gap: 10em;             /* 160px */ }
    .xl\:gap-x-40       > .inside { column-gap: 10em;      /* 160px */ }
    .xl\:gap-y-40       > .inside { row-gap: 10em;         /* 160px */ }
    .xl\:gap-44         > .inside { gap: 11em;             /* 176px */ }
    .xl\:gap-x-44       > .inside { column-gap: 11em;      /* 176px */ }
    .xl\:gap-y-44       > .inside { row-gap: 11em;         /* 176px */ }
    .xl\:gap-48         > .inside { gap: 12em;             /* 192px */ }
    .xl\:gap-x-48       > .inside { column-gap: 12em;      /* 192px */ }
    .xl\:gap-y-48       > .inside { row-gap: 12em;         /* 192px */ }
    .xl\:gap-52         > .inside { gap: 13em;             /* 208px */ }
    .xl\:gap-x-52       > .inside { column-gap: 13em;      /* 208px */ }
    .xl\:gap-y-52       > .inside { row-gap: 13em;         /* 208px */ }
    .xl\:gap-56         > .inside { gap: 14em;             /* 224px */ }
    .xl\:gap-x-56       > .inside { column-gap: 14em;      /* 224px */ }
    .xl\:gap-y-56       > .inside { row-gap: 14em;         /* 224px */ }
    .xl\:gap-60         > .inside { gap: 15em;             /* 240px */ }
    .xl\:gap-x-60       > .inside { column-gap: 15em;      /* 240px */ }
    .xl\:gap-y-60       > .inside { row-gap: 15em;         /* 240px */ }
    .xl\:gap-64         > .inside { gap: 16em;             /* 256px */ }
    .xl\:gap-x-64       > .inside { column-gap: 16em;      /* 256px */ }
    .xl\:gap-y-64       > .inside { row-gap: 16em;         /* 256px */ }
    .xl\:gap-72         > .inside { gap: 18em;             /* 288px */ }
    .xl\:gap-x-72       > .inside { column-gap: 18em;      /* 288px */ }
    .xl\:gap-y-72       > .inside { row-gap: 18em;         /* 288px */ }
    .xl\:gap-80         > .inside { gap: 20em;             /* 320px */ }
    .xl\:gap-x-80       > .inside { column-gap: 20em;      /* 320px */ }
    .xl\:gap-y-80       > .inside { row-gap: 20em;         /* 320px */ }
    .xl\:gap-96         > .inside { gap: 24em;             /* 384px */ }
    .xl\:gap-x-96       > .inside { column-gap: 24em;      /* 384px */ }
    .xl\:gap-y-96       > .inside { row-gap: 24em;         /* 384px */ }
}

/*  2XL :: ab 1536px = 96em */
@media screen and (min-width: 1536px) {
    /*****************************************************************************************
    Grid Template Columns (CONTAINER)

    WICHTIG bei Contao: '> .inside'
    *****************************************************************************************/
    .2xl\:grid-cols-1    > .inside,
    .2xl\:grid-cols-2    > .inside,
    .2xl\:grid-cols-3    > .inside,
    .2xl\:grid-cols-4    > .inside,
    .2xl\:grid-cols-5    > .inside,
    .2xl\:grid-cols-6    > .inside,
    .2xl\:grid-cols-7    > .inside,
    .2xl\:grid-cols-8    > .inside,
    .2xl\:grid-cols-9    > .inside,
    .2xl\:grid-cols-10   > .inside,
    .2xl\:grid-cols-11   > .inside,
    .2xl\:grid-cols-12   > .inside,
    .2xl\:grid-cols-none > .inside {
        display: grid;
    }
    .2xl\:grid-cols-1    > .inside { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
    .2xl\:grid-cols-2    > .inside { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
    .2xl\:grid-cols-3    > .inside { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
    .2xl\:grid-cols-4    > .inside { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
    .2xl\:grid-cols-5    > .inside { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
    .2xl\:grid-cols-6    > .inside { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
    .2xl\:grid-cols-7    > .inside { grid-template-columns: repeat(7,  minmax(0, 1fr)); }
    .2xl\:grid-cols-8    > .inside { grid-template-columns: repeat(8,  minmax(0, 1fr)); }
    .2xl\:grid-cols-9    > .inside { grid-template-columns: repeat(9,  minmax(0, 1fr)); }
    .2xl\:grid-cols-10   > .inside { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .2xl\:grid-cols-11   > .inside { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .2xl\:grid-cols-12   > .inside { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .2xl\:grid-cols-none > .inside { grid-template-columns: none; }

    /*****************************************************************************************
    Grid Column Start / End (ITEMS)
    *****************************************************************************************/
    .2xl\:col-auto       { grid-column: auto; }
    .2xl\:col-span-1     { grid-column: span 1  / span 1; }
    .2xl\:col-span-2     { grid-column: span 2  / span 2; }
    .2xl\:col-span-3     { grid-column: span 3  / span 3; }
    .2xl\:col-span-4     { grid-column: span 4  / span 4; }
    .2xl\:col-span-5     { grid-column: span 5  / span 5; }
    .2xl\:col-span-6     { grid-column: span 6  / span 6; }
    .2xl\:col-span-7     { grid-column: span 7  / span 7; }
    .2xl\:col-span-8     { grid-column: span 8  / span 8; }
    .2xl\:col-span-9     { grid-column: span 9  / span 9; }
    .2xl\:col-span-10    { grid-column: span 10 / span 10; }
    .2xl\:col-span-11    { grid-column: span 11 / span 11; }
    .2xl\:col-span-12    { grid-column: span 12 / span 12; }
    .2xl\:col-span-full  { grid-column: 1 / -1; }

    .2xl\:col-start-1    { grid-column-start: 1; }
    .2xl\:col-start-2    { grid-column-start: 2; }
    .2xl\:col-start-3    { grid-column-start: 3; }
    .2xl\:col-start-4    { grid-column-start: 4; }
    .2xl\:col-start-5    { grid-column-start: 5; }
    .2xl\:col-start-6    { grid-column-start: 6; }
    .2xl\:col-start-7    { grid-column-start: 7; }
    .2xl\:col-start-8    { grid-column-start: 8; }
    .2xl\:col-start-9    { grid-column-start: 9; }
    .2xl\:col-start-10   { grid-column-start: 10; }
    .2xl\:col-start-11   { grid-column-start: 11; }
    .2xl\:col-start-12   { grid-column-start: 12; }
    .2xl\:col-start-13   { grid-column-start: 13; }      /* wieso 13? */
    .2xl\:col-start-auto { grid-column-start: auto; }

    .2xl\:col-end-1      { grid-column-end: 1; }         /* wieso 1? */
    .2xl\:col-end-2      { grid-column-end: 2; }
    .2xl\:col-end-3      { grid-column-end: 3; }
    .2xl\:col-end-4      { grid-column-end: 4; }
    .2xl\:col-end-5      { grid-column-end: 5; }
    .2xl\:col-end-6      { grid-column-end: 6; }
    .2xl\:col-end-7      { grid-column-end: 7; }
    .2xl\:col-end-8      { grid-column-end: 8; }
    .2xl\:col-end-9      { grid-column-end: 9; }
    .2xl\:col-end-10     { grid-column-end: 10; }
    .2xl\:col-end-11     { grid-column-end: 11; }
    .2xl\:col-end-12     { grid-column-end: 12; }
    .2xl\:col-end-13     { grid-column-end: 13; }
    .2xl\:col-end-auto   { grid-column-end: auto; }

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

    /*****************************************************************************************
    Grid Row Start / End
    *****************************************************************************************/
    .2xl\:row-auto       { grid-row: auto; }
    .2xl\:row-span-1     { grid-row: span 1 / span 1; }
    .2xl\:row-span-2     { grid-row: span 2 / span 2; }
    .2xl\:row-span-3     { grid-row: span 3 / span 3; }
    .2xl\:row-span-4     { grid-row: span 4 / span 4; }
    .2xl\:row-span-5     { grid-row: span 5 / span 5; }
    .2xl\:row-span-6     { grid-row: span 6 / span 6; }
    .2xl\:row-span-full  { grid-row: 1 / -1; }

    .2xl\:row-start-1    { grid-row-start: 1; }
    .2xl\:row-start-2    { grid-row-start: 2; }
    .2xl\:row-start-3    { grid-row-start: 3; }
    .2xl\:row-start-4    { grid-row-start: 4; }
    .2xl\:row-start-5    { grid-row-start: 5; }
    .2xl\:row-start-6    { grid-row-start: 6; }
    .2xl\:row-start-7    { grid-row-start: 7; }
    .2xl\:row-start-auto { grid-row-start: auto; }

    .2xl\:row-end-1      { grid-row-end: 1; }
    .2xl\:row-end-2      { grid-row-end: 2; }
    .2xl\:row-end-3      { grid-row-end: 3; }
    .2xl\:row-end-4      { grid-row-end: 4; }
    .2xl\:row-end-5      { grid-row-end: 5; }
    .2xl\:row-end-6      { grid-row-end: 6; }
    .2xl\:row-end-7      { grid-row-end: 7; }
    .2xl\:row-end-auto   { grid-row-end: auto; }

    /*****************************************************************************************
    Grid Auto Flow
    *****************************************************************************************/
    .2xl\:grid-flow-row       > .inside { grid-auto-flow: row; }
    .2xl\:grid-flow-col       > .inside { grid-auto-flow: column; }
    .2xl\:grid-flow-dense     > .inside { grid-auto-flow: dense; }
    .2xl\:grid-flow-row-dense > .inside { grid-auto-flow: row dense; }
    .2xl\:grid-flow-col-dense > .inside { grid-auto-flow: column dense; }

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

    /*****************************************************************************************
    Grid Auto Rows
    *****************************************************************************************/
    .2xl\:auto-row-auto       > .inside { grid-auto-rows: auto; }
    .2xl\:auto-row-min        > .inside { grid-auto-rows: min-content; }
    .2xl\:auto-row-max        > .inside { grid-auto-rows: max-content; }
    .2xl\:auto-row-fr         > .inside { grid-auto-rows: minmax(0, 1fr); }

    /*****************************************************************************************
    Gap
    *****************************************************************************************/
    .xl\:gap-0          > .inside { gap: 0px; }
    .xl\:gap-x-0        > .inside { column-gap: 0px; }
    .xl\:gap-y-0        > .inside { row-gap: 0px; }
    .xl\:gap-px         > .inside { gap: 1px; }
    .xl\:gap-x-px       > .inside { column-gap: 1px; }
    .xl\:gap-y-px       > .inside { row-gap: 1px; }
    .xl\:gap-0\.5       > .inside { gap: 0.125em;          /* 2px */ }
    .xl\:gap-x-0\.5     > .inside { column-gap: 0.125em;   /* 2px */ }
    .xl\:gap-y-0\.5     > .inside { row-gap: 0.125em;      /* 2px */ }
    .xl\:gap-1          > .inside { gap: 0.25em;           /* 4px */ }
    .xl\:gap-x-1        > .inside { column-gap: 0.25em;    /* 4px */ }
    .xl\:gap-y-1        > .inside { row-gap: 0.25em;       /* 4px */ }
    .xl\:gap-1\.5       > .inside { gap: 0.375em;          /* 6px */ }
    .xl\:gap-x-1\.5     > .inside { column-gap: 0.375em;   /* 6px */ }
    .xl\:gap-y-1\.5     > .inside { row-gap: 0.375em;      /* 6px */ }
    .xl\:gap-2          > .inside { gap: 0.5em;            /* 8px */ }
    .xl\:gap-x-2        > .inside { column-gap: 0.5em;     /* 8px */ }
    .xl\:gap-y-2        > .inside { row-gap: 0.5em;        /* 8px */ }
    .xl\:gap-2\.5       > .inside { gap: 0.625em;          /* 10px */ }
    .xl\:gap-x-2\.5     > .inside { column-gap: 0.625em;   /* 10px */ }
    .xl\:gap-y-2\.5     > .inside { row-gap: 0.625em;      /* 10px */ }
    .xl\:gap-3          > .inside { gap: 0.75em;           /* 12px */ }
    .xl\:gap-x-3        > .inside { column-gap: 0.75em;    /* 12px */ }
    .xl\:gap-y-3        > .inside { row-gap: 0.75em;       /* 12px */ }
    .xl\:gap-3\.5       > .inside { gap: 0.875em;          /* 14px */ }
    .xl\:gap-x-3\.5     > .inside { column-gap: 0.875em;   /* 14px */ }
    .xl\:gap-y-3\.5     > .inside { row-gap: 0.875em;      /* 14px */ }
    .xl\:gap-4          > .inside { gap: 1em;              /* 16px */ }
    .xl\:gap-x-4        > .inside { column-gap: 1em;       /* 16px */ }
    .xl\:gap-y-4        > .inside { row-gap: 1em;          /* 16px */ }
    .xl\:gap-5          > .inside { gap: 1.25em;           /* 20px */ }
    .xl\:gap-x-5        > .inside { column-gap: 1.25em;    /* 20px */ }
    .xl\:gap-y-5        > .inside { row-gap: 1.25em;       /* 20px */ }
    .xl\:gap-6          > .inside { gap: 1.5em;            /* 24px */ }
    .xl\:gap-x-6        > .inside { column-gap: 1.5em;     /* 24px */ }
    .xl\:gap-y-6        > .inside { row-gap: 1.5em;        /* 24px */ }
    .xl\:gap-7          > .inside { gap: 1.75em;           /* 28px */ }
    .xl\:gap-x-7        > .inside { column-gap: 1.75em;    /* 28px */ }
    .xl\:gap-y-7        > .inside { row-gap: 1.75em;       /* 28px */ }
    .xl\:gap-8          > .inside { gap: 2em;              /* 32px */ }
    .xl\:gap-x-8        > .inside { column-gap: 2em;       /* 32px */ }
    .xl\:gap-y-8        > .inside { row-gap: 2em;          /* 32px */ }
    .xl\:gap-9          > .inside { gap: 2.25em;           /* 36px */ }
    .xl\:gap-x-9        > .inside { column-gap: 2.25em;    /* 36px */ }
    .xl\:gap-y-9        > .inside { row-gap: 2.25em;       /* 36px */ }
    .xl\:gap-10         > .inside { gap: 2.5em;            /* 40px */ }
    .xl\:gap-x-10       > .inside { column-gap: 2.5em;     /* 40px */ }
    .xl\:gap-y-10       > .inside { row-gap: 2.5em;        /* 40px */ }
    .xl\:gap-11         > .inside { gap: 2.75em;           /* 44px */ }
    .xl\:gap-x-11       > .inside { column-gap: 2.75em;    /* 44px */ }
    .xl\:gap-y-11       > .inside { row-gap: 2.75em;       /* 44px */ }
    .xl\:gap-12         > .inside { gap: 3em;              /* 48px */ }
    .xl\:gap-x-12       > .inside { column-gap: 3em;       /* 48px */ }
    .xl\:gap-y-12       > .inside { row-gap: 3em;          /* 48px */ }
    .xl\:gap-14         > .inside { gap: 3.5em;            /* 56px */ }
    .xl\:gap-x-14       > .inside { column-gap: 3.5em;     /* 56px */ }
    .xl\:gap-y-14       > .inside { row-gap: 3.5em;        /* 56px */ }
    .xl\:gap-16         > .inside { gap: 4em;              /* 64px */ }
    .xl\:gap-x-16       > .inside { column-gap: 4em;       /* 64px */ }
    .xl\:gap-y-16       > .inside { row-gap: 4em;          /* 64px */ }
    .xl\:gap-20         > .inside { gap: 5em;              /* 80px */ }
    .xl\:gap-x-20       > .inside { column-gap: 5em;       /* 80px */ }
    .xl\:gap-y-20       > .inside { row-gap: 5em;          /* 80px */ }
    .xl\:gap-24         > .inside { gap: 6em;              /* 96px */ }
    .xl\:gap-x-24       > .inside { column-gap: 6em;       /* 96px */ }
    .xl\:gap-y-24       > .inside { row-gap: 6em;          /* 96px */ }
    .xl\:gap-28         > .inside { gap: 7em;              /* 112px */ }
    .xl\:gap-x-28       > .inside { column-gap: 7em;       /* 112px */ }
    .xl\:gap-y-28       > .inside { row-gap: 7em;          /* 112px */ }
    .xl\:gap-32         > .inside { gap: 8em;              /* 128px */ }
    .xl\:gap-x-32       > .inside { column-gap: 8em;       /* 128px */ }
    .xl\:gap-y-32       > .inside { row-gap: 8em;          /* 128px */ }
    .xl\:gap-36         > .inside { gap: 9em;              /* 144px */ }
    .xl\:gap-x-36       > .inside { column-gap: 9em;       /* 144px */ }
    .xl\:gap-y-36       > .inside { row-gap: 9em;          /* 144px */ }
    .xl\:gap-40         > .inside { gap: 10em;             /* 160px */ }
    .xl\:gap-x-40       > .inside { column-gap: 10em;      /* 160px */ }
    .xl\:gap-y-40       > .inside { row-gap: 10em;         /* 160px */ }
    .xl\:gap-44         > .inside { gap: 11em;             /* 176px */ }
    .xl\:gap-x-44       > .inside { column-gap: 11em;      /* 176px */ }
    .xl\:gap-y-44       > .inside { row-gap: 11em;         /* 176px */ }
    .xl\:gap-48         > .inside { gap: 12em;             /* 192px */ }
    .xl\:gap-x-48       > .inside { column-gap: 12em;      /* 192px */ }
    .xl\:gap-y-48       > .inside { row-gap: 12em;         /* 192px */ }
    .xl\:gap-52         > .inside { gap: 13em;             /* 208px */ }
    .xl\:gap-x-52       > .inside { column-gap: 13em;      /* 208px */ }
    .xl\:gap-y-52       > .inside { row-gap: 13em;         /* 208px */ }
    .xl\:gap-56         > .inside { gap: 14em;             /* 224px */ }
    .xl\:gap-x-56       > .inside { column-gap: 14em;      /* 224px */ }
    .xl\:gap-y-56       > .inside { row-gap: 14em;         /* 224px */ }
    .xl\:gap-60         > .inside { gap: 15em;             /* 240px */ }
    .xl\:gap-x-60       > .inside { column-gap: 15em;      /* 240px */ }
    .xl\:gap-y-60       > .inside { row-gap: 15em;         /* 240px */ }
    .xl\:gap-64         > .inside { gap: 16em;             /* 256px */ }
    .xl\:gap-x-64       > .inside { column-gap: 16em;      /* 256px */ }
    .xl\:gap-y-64       > .inside { row-gap: 16em;         /* 256px */ }
    .xl\:gap-72         > .inside { gap: 18em;             /* 288px */ }
    .xl\:gap-x-72       > .inside { column-gap: 18em;      /* 288px */ }
    .xl\:gap-y-72       > .inside { row-gap: 18em;         /* 288px */ }
    .xl\:gap-80         > .inside { gap: 20em;             /* 320px */ }
    .xl\:gap-x-80       > .inside { column-gap: 20em;      /* 320px */ }
    .xl\:gap-y-80       > .inside { row-gap: 20em;         /* 320px */ }
    .xl\:gap-96         > .inside { gap: 24em;             /* 384px */ }
    .xl\:gap-x-96       > .inside { column-gap: 24em;      /* 384px */ }
    .xl\:gap-y-96       > .inside { row-gap: 24em;         /* 384px */ }
}