/* TEMPORARY — Sprint 1 Step 3 component showcase only.
   Safe to delete this file, its <link> in index.html, and the showcase
   markup/mount call in app.js before Home screen implementation begins. */

.showcase {
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.showcase__note {
  color: var(--color-text-muted);
  font-size: 14px;
}

.showcase__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.showcase__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.showcase .card {
  flex: 1;
  min-width: 140px;
}