@layer components {
  .payments {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .loan-summary {
    margin-bottom: var(--block-space);
  }

  .loan-summary__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--inline-space);
  }

  .loan-summary__info h3 {
    margin: 0;
    font-size: var(--text-medium);
    font-weight: 600;
    grid-column: 1 / -1;
  }

  .payments-list {
    display: grid;
    gap: var(--block-space);
  }

  .payment-card {
    display: flex;
    flex-direction: column;
    gap: var(--inline-space-half);
    padding: var(--block-space);
  }

  .payment-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--inline-space);
  }

  .payment-card__header h3 {
    margin: 0;
    font-size: var(--text-large);
    font-weight: 600;
    color: var(--color-positive);
  }

  .payment-date {
    font-size: var(--text-small);
    color: var(--color-ink-medium);
  }

  .payment-info-item {
    display: flex;
    gap: var(--inline-space-half);
    font-size: var(--text-small);
  }

  .payment-info-item strong {
    color: var(--color-ink-dark);
  }

  .payment-card__meta {
    margin-top: var(--inline-space-half);
    font-size: var(--text-x-small);
    color: var(--color-ink-light);
  }

  .payment-card__actions {
    display: flex;
    gap: var(--inline-space-half);
    margin-top: var(--inline-space);
  }

  .payment-amount {
    font-size: var(--text-x-large);
    font-weight: 700;
    color: var(--color-positive);
  }

  .payment-notes {
    margin-top: var(--block-space);
    padding-top: var(--block-space-half);
    border-top: var(--border);
  }

  .payment-notes strong {
    display: block;
    margin-bottom: var(--inline-space-half);
  }

  .loan-info {
    margin-top: var(--block-space);
  }
}