como ejercicio para la escuela, quiero reducir el tamaño de fuente de un elemento H4 dentro de una etiqueta de cuadrícula y tipografía, aquí está el código:

 const CompanyDetails: React.FC<Props> = (props) => { const { orgId, organisation, individuals, refetchOrg } = props; return ( <> <Grid container rowSpacing={2.3}> <Grid item xs={12}> <Card sx={{ p: 2 }}> <CardContent> <Grid container item xs justifyContent="space-between" alignItems="center" > <Grid container item md={6}> <Typography variant="h4" align="center" textAlign="start" paddingRight={6} > {organisation?.name} </Typography> </Grid>

La pregunta es, si el texto ocupa más de 3 líneas, quería que el tamaño de la fuente se redujera para permanecer en el máximo de 2 líneas, adjuntaré algunas capturas de pantalla aquí también. Algo que probé pero no funcionó, fue esto:

 const adaptiveFontSize = (text: string) => { if (text.length < 65) { return "1em"; } else { return "0.9em"; } };

Así es como se ve con 2 líneas Así es como se ve con 3 líneas Esto es lo que estoy tratando de lograr si es lo suficientemente grande