/* ===== Grid Layout Primitive ===== */

.ui-grid {
    display: grid;
    grid-template-columns: var(--grid-template-columns, repeat(1, 1fr));
    gap: var(--grid-gap, 16px);
    align-items: var(--grid-align-items, stretch);
    justify-items: var(--grid-justify-items, stretch);
}

/* min/max height only when explicitly set. */
.ui-grid[style*="--grid-min-height"],
.ui-grid[style*="--grid-max-height"] {
    min-height: var(--grid-min-height, auto);
    max-height: var(--grid-max-height, none);
}

@media (min-width: 768px) {
    .ui-grid {
        grid-template-columns: var(--grid-template-columns-md, var(--grid-template-columns, repeat(1, 1fr)));
        gap: var(--grid-gap-md, var(--grid-gap, 16px));
    }
}

@media (min-width: 1024px) {
    .ui-grid {
        grid-template-columns: var(--grid-template-columns-lg, var(--grid-template-columns-md, var(--grid-template-columns, repeat(1, 1fr))));
        gap: var(--grid-gap-lg, var(--grid-gap-md, var(--grid-gap, 16px)));
    }
}