I have an assignment where I need to fit an image and header into a div with a fixed width that changes heights every time. It needs to look like the screenshot below, but I have no idea how to get that look.

The sections are where the flexbox starts and I organized the child elements to appear like they should, but everything inside of that, I can't get to work. HTML

<main class="card-grid">
      <section class="row-grid"></section>
      <section class="col-grid">                                  
         <div class="card" style="width: 200px; height: 280px;">  
             <img src="littlecolorado.jpg">                
             <h2>Another card</h2></div>                    
       </section>
    </main>

CSS

    .col-grid {
  display: flex;
  flex-flow: column wrap;
  gap: 20px;
  height: 2000px;
}
.col-grid div img {
  width: 200px;
}
.col-grid div h2 {
  display: block;
}

My file:

What it should look like: