/*
 * Lists
 *
 * BEM classes for the simple grid-of-items used by
 * Ui::Lists::SimpleComponent.
 *
 * Usage:
 *   class="simple-list simple-list--cols-3"
 *
 * Note: the component still accepts additional semantic classes through its
 * `style:` kwarg for older call sites.
 */

.simple-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
}

.simple-list--spacious {
  margin-bottom: 1rem;
}

.simple-list--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.simple-list__cell--span-2 {
  grid-column: span 2 / span 2;
}

.simple-list__cell--span-3 {
  grid-column: span 3 / span 3;
}

@media (min-width: 768px) {
  .simple-list--cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .simple-list--cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .simple-list--cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .simple-list--cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .simple-list--cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .simple-list--cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .simple-list--cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}