{% macro picture(src, caption, alt_text="a picture of my cute dog") -%}

<style>
    .picture {
        margin: 0px;
        margin-bottom: 10px;
    }

    .picture img {
        max-width: 100%;
        width: auto;
        border: 1px solid #eeeeeea0;
        border-radius: 4px;
        box-shadow: 0px 0px 8px #12181b;
    }

    .picture p {
        margin: 0;
        margin-top: 5px;
    }
</style>

<div class="main-panel picture">
	<img src={{src}} alt={{alt_text}} style="height: calc(100% - ({{(caption|length / 28) | round(0, 'ceil') | int * 32}} px)">
    {% if caption %}
      <p>{{caption}}</p>
    {% endif %}
</div>
{%- endmacro %}