.settings-empty-state.settings-empty-state--compact {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  inline-size: 100%;
}

.settings-empty-state--compact .settings-empty-state__image {
  inline-size: min(100%, 18rem);
  margin-inline: auto;
}

.settings-empty-state--compact .settings-empty-state__copy {
  gap: var(--space-xs);
}

.settings-empty-state--compact .settings-empty-state__title {
  max-inline-size: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.settings-empty-state--compact .settings-empty-state__description {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

/* At this card width the illustration and a readable text column fit side by side. */
@container pickup-entry (min-width: 36rem) {
  .settings-empty-state.settings-empty-state--compact {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--space-lg), 5cqi, var(--space-2xl));
  }
}