/* ---- Empty state component ---- */

.view-empty {
  padding-block: 5rem;
  text-align: center;
}

.empty-state {
  max-width: var(--width-large);
  margin-inline: auto;
}

.empty-state__heading {
  font-size: var(--font-size-h3);
  font-weight: 500;
}

.empty-state__message {
  margin-block: 0;
  font-size: var(--font-size-h5-m);
}

@media (max-width: 40rem) {
  .empty-state__message {
    font-size: var(--font-size-h6);
  }

  .empty-state__heading {
    font-size: var(--font-size-h1-m);
  }

  .view-empty {
    padding-block: var(--spacing-largest);
    text-align: center;
  }
}