Render image in one column of PDF using Weasyprint via HTML & CSS

Question

I am calling Weasyprint from Python to generate a report PDF of a model I'm running. Weasyprint calls an HTML (report.html) file, which references a CSS file (report.css)

My HTML and CSS files closely follow the HTML and CSS templates used in this Weasyprint example. I am trying to add an image (shown below) to the first column of page 4 ("Big Title On Left Page..."), via HTML as follows, based off of another weasyprint example:

...
<article id="columns">
  <h2 id="columns-title">Big title on left page, with text on columns</h2>

  <h3>This is a little subtitle, here to explain what we are talking about</h3>

  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat faucibus vestibulum.
    </p>
    <p>
      Phasellus id nisl nec arcu tempor ultricies non id tortor. Mauris ex nibh, viverra vitae nisi eget, placerat pharetra est.
    </p>
    </section>

    <section>
      <div class="column">
        <img src="./map.png" style="height: 10; width: 30; float:inline-start">
      </div>
      <div class="column">
        This is some text for the image.
      </div>
    </section>

    <section
    <p>
      Duis maximus mauris ac purus eleifend, sit amet blandit nulla lacinia.
    </p>
 ...

Ultimately, I would like to have the below heatmap illustrated in the first column, sized to the width of the first column. I have been tinkering with different instantiations of height and width, but I have not been able to make the image smaller at all, much less sized to the width of whatever column the image ends up on.

Here is the dummy image I am using.:

and here is the result I am getting: