.panel {
  width: min(390px, calc(100vw - var(--mantine-spacing-xl)));
  max-height: min(70vh, 700px);
  overflow: hidden;
}

.viewport {
  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--mobile-column-count), minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 42px;
  gap: var(--mantine-spacing-xs);
}

.item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
  border-radius: var(--mantine-radius-sm);
  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
}

.itemContent {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .item {
    scroll-behavior: auto;
    transition: none;
  }
}