[Bug] Inline images are not working as advertised

[flobernd]

I confirm:

• [X] I am running the extended version of Hugo version 0.91.0 or above to build my site.
• [X] I have read the Hugo Clarity theme documentation.
• [X] I have used the example site's config files as reference.
• [X] I have reviewed other issues in this repository and mine is not recorded.

Hugo version

hugo v0.125.1-68c5ad638c2072969e47262926b912e80fd71a77+extended linux/amd64 BuildDate=2024-04-18T08:21:19Z

Where is this bug showing up?

In the browser: Hugo builds the site, but something doesn't look right.

Operating system

Docker

Browser (if applicable)

Firefox, Edge, ... (seems to affect all browsers)

Current behavior

Using the :inline modifier does not work as advertised:

![red wire:inline](local.png) +12V

The generated HTML looks like this:

<li>
  <figure class="inline">
  <picture>
    <img loading="lazy" decoding="async" alt="red wire" class="image_figure image_internal image_processed" width="20" height="20" src="/post/test-post/pin_red.png" data-pos="1"><figcaption class="img_alt">red wire</figcaption>
    </picture>
</figure>
 +12V</li>

Expected behavior

The image gets rendered inline as advertised.

Steps to reproduce

Use an image with the :inline style.

Relevant log output

No response

Related code

No response

Preferred solution

No response

Other information

No response