.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
    overflow: hidden;
    border: var(--border);
    border-spacing: 0;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.grid-container .grid-item {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px;
}

.grid-container .grid-item:hover {
    background: var(--surface-soft);
    cursor: pointer;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }
}