Neither flex child nor auto fit grid is working for me

Design help Layout & Design
1

I’m trying to create an annotated bibliography page. Neither flex child nor auto fit grid is producing a consistent result.

Here is the link to my site

All images are the same size. Yet are displayed in different sizes.

Here’s what I’m trying to achieve:

  • Book cover image left.
  • Book title, author, and annotation (there isn’t an annotation for every book) in this order; on the right of the image.

If I get the book cover images consistent, then the Book title, author, and annotation are not near the book cover.

If I get the Book title, author, and annotation text aligned next to the book cover - the book covers are not the same size – despite them all being 200px high.

On breakpoints landscape and portrait, everything should run centered and top-down: Book cover, Book title, author, annotation (this part I got working.)

Can anyone help point me in the right direction, please?

Even if the right direction is a better way to do this than I have presented.

Many thanks in advance.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

If your project has custom code or layout issues on the published site, please share that URL/URI as well.

3

Sorry - I thought I included it.

Here is the link to my site… thanks for your help.