overflowing text in grid area

div.grid-of-columns {
  display: grid;
  grid-template-columns: repeat(12, 300px);
  gap: 10px;
}

div.grid-of-areas {
  display: grid;
  grid-template-columns: [image-start] 
                         1fr 
                         [image-end term-start desc-start latest-start] 
                         1fr 
                         [term-end desc-end latest-end];
  grid-template-rows: [term-start image-start row-start] 
                      auto 
                      [term-end image-end desc-start] 
                      auto 
                      [desc-end latest-start] 
                      1fr 
                      [latest-end row-end];
}

div.grid-item {
  grid-area: desc;
}

span.text {
  margin:0;
}