[jcn363]

cover -> You don't mark any file as cover (usualy the first one, but...).
Calibre's solution:

Spoiler:

    <item href="0b393e09-d459-4110-8060-6b13a25c539c.xhtml" id="p_0b393e09-d459-4110-8060-6b13a25c539c" media-type="application/xhtml+xml" properties="calibre:title-page"/>

chapters index -> You don't create a toc.ncx as davidfor said before.
display: flex; -> consider adding -webkit-display: flex;
object-fit: contain; -> perhaps object-fit: cover;?
I like Calibre's solution:

Spoiler:

 <div style="page-break-before:always; page-break-after:always; page-break-inside:avoid">

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 420 600" preserveAspectRatio="xMidYMid meet">
        <image width="420" height="600" xlink:href="64798ac2-16c4-4c81-9414-85953e2b8e0b.png"/>
      </svg>

    </div>

I prefer rotated images. Two-scale images are pretty... well, I dislike them.
Good luck.