@responsive {
    .grid {
        display: grid;
    }

    .cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cols-auto {
        grid-template-columns: auto;
        grid-auto-flow: column;
    }

    .cols-auto-1fr {
        grid-template-columns: auto 1fr;
    }

    .gap-0 {
        grid-gap: 0;
    }

    .gapx-0 {
        grid-column-gap: 0;
    }

    .gapy-0 {
        grid-row-gap: 0;
    }

    .gap-1 {
        grid-gap: theme('padding.1');
    }

    .gapx-1 {
        grid-column-gap: theme('padding.1');
    }

    .gapy-1 {
        grid-row-gap: theme('padding.1');
    }

    .gap-2 {
        grid-gap: theme('padding.2');
    }

    .gapx-2 {
        grid-column-gap: theme('padding.2');
    }

    .gapy-2 {
        grid-row-gap: theme('padding.2');
    }

    .gap-3 {
        grid-gap: theme('padding.3');
    }

    .gapx-3 {
        grid-column-gap: theme('padding.3');
    }

    .gapy-3 {
        grid-row-gap: theme('padding.3');
    }

    .gap-4 {
        grid-gap: theme('padding.4');
    }

    .gapx-4 {
        grid-column-gap: theme('padding.4');
    }

    .gapy-4 {
        grid-row-gap: theme('padding.4');
    }

    .gap-6 {
        grid-gap: theme('padding.6');
    }

    .gapx-6 {
        grid-column-gap: theme('padding.6');
    }

    .gapy-6 {
        grid-row-gap: theme('padding.6');
    }

    .gap-8 {
        grid-gap: theme('padding.8');
    }

    .gapx-8 {
        grid-column-gap: theme('padding.8');
    }

    .gapy-8 {
        grid-row-gap: theme('padding.8');
    }

    .gap-12 {
        grid-gap: theme('padding.12');
    }

    .gapx-12 {
        grid-column-gap: theme('padding.12');
    }

    .gapy-12 {
        grid-row-gap: theme('padding.12');
    }

    .gap-16 {
        grid-gap: theme('padding.16');
    }

    .gapx-16 {
        grid-column-gap: theme('padding.16');
    }

    .gapy-16 {
        grid-row-gap: theme('padding.16');
    }

    .span-1 {
        grid-column-end: span 1;
    }

    .span-2 {
        grid-column-end: span 2;
    }

    .span-3 {
        grid-column-end: span 3;
    }

    .span-4 {
        grid-column-end: span 4;
    }

    .span-5 {
        grid-column-end: span 5;
    }

    .span-6 {
        grid-column-end: span 6;
    }

    .span-end {
        grid-column-end: -1;
    }

    .start-1 {
        grid-column-start: 1;
    }

    .start-2 {
        grid-column-start: 2;
    }

    .start-3 {
        grid-column-start: 3;
    }

    .start-4 {
        grid-column-start: 4;
    }

    .start-5 {
        grid-column-start: 5;
    }

    .start-6 {
        grid-column-start: 6;
    }

    .align-self-start {
        align-self: start;
    }

    .align-self-end {
        align-self: end;
    }

    .align-self-center {
        align-self: center;
    }

    .align-self-stretch {
        align-self: stretch;
    }

    .place-center {
        align-items: center;
        justify-items: center;
        align-content: center;
        justify-content: center;
    }

    .place-items-center {
        align-items: center;
        justify-items: center;
    }

    .place-content-center {
        align-content: center;
        justify-content: center;
    }

    .justify-self-start {
        justify-self: start;
    }

    .justify-self-end {
        justify-self: end;
    }

    .justify-self-center {
        justify-self: center;
    }
}