How to fit text in multi-column layouts to match CSS Grid columns?

Nothing better than solving a problem yourself to learn how something works.

```
body {
    display: grid;
    grid-column-gap: 2vw;
    grid-row-gap: 1vh;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


section:first-of-type {
    column-count: 3;
    column-gap: 2vw;
    column-width: 300px;
    grid-column: 2 / -1;
    grid-row: 3 / 4;
}

section:last-of-type {
    column-count: 3;
    column-gap: 2vw;
    column-width: 300px;
    grid-column: 2 / -1;
    grid-row: 7 / 8;
}

figure {
  display: grid;
  grid-gap: 2vw;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  width: 100vw;
}

@media (min-width: 37.5em) {
  figure {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 4 / 6;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
```