.demo-shell {
  display: grid;
  gap: 1.5rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem;
}

.demo-hero {
  gap: 0.75rem;
  box-shadow: var(--shadow-md);
}

.demo-copy {
  max-width: 40rem;
  color: var(--color-muted);
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.demo-stack {
  display: grid;
  gap: 0.75rem;
}

.demo-icon-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.demo-icon {
  --icon-size: 1.25rem;
}

.demo-icon::before {
  mask-image: var(--mask-folder);
  -webkit-mask-image: var(--mask-folder);
}

.demo-icon-bookmark::before {
  mask-image: var(--mask-bookmark);
  -webkit-mask-image: var(--mask-bookmark);
}