Tengo el siguiente fragmento de código en mi componente

 if (buyer !== null) { return ( <Card> <li key={sale_id}> <h3> <Transaction>{seller}</Transaction> just sold item number{' '} <Transaction>{sale_id}</Transaction> to{' '} <Transaction>{buyer}</Transaction> for{' '} <Transaction>{formatNumber(listing_price)}</Transaction>{' '} {listing_symbol} at {parseTimestampJM(created_at_time)} </h3> </li> </Card> ); }

los componentes Transacción y Tarjeta están hechos del siguiente código:

 export const Card = styled.article` width: 100%; height: 144px; border-radius: 16px; border: solid 1px #e6e6e6; display: flex; align-items: center; @media (max-width: 1300px) { justify-content: center; } ${breakpoint.mobile` justify-content: flex-start; `} `; export const Transaction = styled.h2` font-size: 15px; fontweight: 'bold'; color: purple; margin-bottom: 8px; ${breakpoint.tablet` font-size: 20px; line-height: 32px; margin-bottom: 4px; `} ${breakpoint.mobile` font-size: 28px; line-height: 40px; margin-bottom: 8px; `} `;

Esto da como resultado una tarjeta que se flexiona con el ancho de la página web, pero no puedo hacer que el texto encaje correctamente. El texto se apila uno encima del otro. El vendedor está recién vendido... que está en ID de venta... etc. Quisiera solo una línea de texto donde se convierte en dos si la tarjeta es demasiado pequeña para que quepa el texto en ella.