/* The Carpool Gas Cost Calculator's result (KID-1324): each family's share, marked with its color from the result. */
@layer pages {
  .kp-split__families {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--kp-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kp-split__family {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-1);
    padding: var(--kp-space-4);
    border: 1px solid var(--kp-border);
    border-inline-start: 6px solid var(--kp-split-color);
    border-radius: var(--kp-radius-sm);
    break-inside: avoid;
  }

  .kp-split__name {
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .kp-split__amount {
    color: var(--kp-head);
    font-family: var(--kp-font-display);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1.1;
  }

  .kp-split__detail {
    color: var(--kp-muted);
    font-size: 0.875rem;
  }
}