.grid,
.grid-row {
    --responsive-display: grid;
    --responsive-gap: 5px;
    --responsive-gap-x: 0px;
    --responsive-gap-y: 0px;
    --grid-columns: var(--standard-columns, var(--columns, var(--responsive-columns, 24)));
    display: grid;
    box-sizing: border-box;
    gap: var(--responsive-gap-y, 0px) var(--responsive-gap-x, 0px);
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    width: 100%;
}

.grid > *,
.grid-row > * {
    --grid-span: var(--standard-span, var(--span, 1));
    box-sizing: border-box;
    grid-column: span var(--grid-span);
    min-width: 0;
}

html[data-size="large-desktop"] .grid,
html[data-size="large-desktop"] .grid-row {
    --grid-columns: var(
        --large-desktop-columns,
        var(--standard-columns, var(--columns, var(--responsive-columns, 24)))
    );
}

html[data-size="large-desktop"] .grid > *,
html[data-size="large-desktop"] .grid-row > * {
    --grid-span: var(--large-desktop-span, var(--standard-span, var(--span, 1)));
}

html[data-size="small-desktop"] .grid,
html[data-size="small-desktop"] .grid-row {
    --grid-columns: var(--small-desktop-columns, var(--columns, var(--responsive-columns, 24)));
}

html[data-size="small-desktop"] .grid > *,
html[data-size="small-desktop"] .grid-row > * {
    --grid-span: var(--small-desktop-span, var(--span, 1));
}

html[data-size="tablet"] .grid,
html[data-size="tablet"] .grid-row {
    --grid-columns: var(--tablet-columns, var(--columns, var(--responsive-columns, 24)));
}

html[data-size="tablet"] .grid > *,
html[data-size="tablet"] .grid-row > * {
    --grid-span: var(--tablet-span, var(--span, 1));
}

html[data-size="mobile"] .grid,
html[data-size="mobile"] .grid-row {
    --grid-columns: var(--mobile-columns, var(--columns, var(--responsive-columns, 24)));
}

html[data-size="mobile"] .grid > *,
html[data-size="mobile"] .grid-row > * {
    --grid-span: var(--mobile-span, var(--span, 1));
}

html[data-size="small-mobile"] .grid,
html[data-size="small-mobile"] .grid-row {
    --grid-columns: var(
        --small-mobile-columns,
        var(--mobile-columns, var(--columns, var(--responsive-columns, 24)))
    );
}

html[data-size="small-mobile"] .grid > *,
html[data-size="small-mobile"] .grid-row > * {
    --grid-span: var(--small-mobile-span, var(--mobile-span, var(--span, 1)));
}

.grid-auto {
    --responsive-display: grid;
    --responsive-gap: 5px;
    --responsive-gap-x: 0px;
    --responsive-gap-y: 0px;
    display: grid;
    gap: var(--responsive-gap-y, 0px) var(--responsive-gap-x, 0px);
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, var(--grid-min-column-size, 15rem)), 1fr)
    );
    width: 100%;
}

.grid.grid-auto > *,
.grid-row.grid-auto > *,
.grid-auto > * {
    grid-column: auto;
}

.grid > .grid-filler,
.grid-row > .grid-filler {
    grid-column-end: -1;
}

.grid > .grid-full,
.grid-row > .grid-full {
    grid-column: 1 / -1;
}