as a exercise for school, I want to scale-down the font Size of an H4 element inside a Grid and Typography Tag, here is the code:

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>

The question is, if the text takes more than 3 lines, I wanted the font size to scale down to stay in the maximum of 2 lines, I'll attach some screenshots here as well. Something I tried but it didn't work, was this:

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

This is what it looks like with 2 lines This is what it looks like with 3 lines This is what I am trying to achieve if it's big enough