@layer components {
  .error-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-5) var(--space-3);
    padding-inline: var(--space-5);
    border-radius: var(--radius-card);
    background-color: var(--color-danger-soft);
  }

  .error-summary__title {
    font: var(--type-heading);
    color: var(--color-ink);
  }

  .error-summary__link,
  .error-summary__text {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-min);
    font: var(--type-body-sm);
    color: var(--color-danger);
    text-wrap: pretty;
  }

  .error-summary__link {
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
  }
}