Replace the BSv4 media component used in the blog list page, `layouts/blog/list.html`. For details, see [Media object](https://getbootstrap.com/docs/5.2/utilities/flex/#media-object) from the BSv5.2 docs. Here are the former style definitions: ```css .media { display: flex; align-items: flex-start; } .media-body { flex: 1; // -> flex-grow: 1; // -> flex-shrink: 1; // -> flex-basis: 0%; } ``` Strange, I recall working on style definitions for `.media` and `.media-body`, but I can't find them -- so currently they are undefined. As a result, the [Docsy-example blog page](https://deploy-preview-215--goldydocs.netlify.app/blog/) can look like this: > <img width="1132" alt="Screen Shot 2023-06-09 at 21 51 02" src="https://github.com/google/docsy/assets/4140793/0d3ff6d8-b5dd-4abd-a50f-4c6e457668df"> It's because of the figure, which is made more obvious in this screenshot: > <img width="766" alt="Screen Shot 2023-06-09 at 21 51 54" src="https://github.com/google/docsy/assets/4140793/3dc51dc1-3c05-48fa-bcae-e30a8bd4c27b">