{% extends "base" %} {% block head %} {{super()}} <style> body { padding: 0.7rem; margin: 0; } header { font-size: 1.3rem; padding: 1rem; margin-bottom: 1rem; background-color: #ebff7a; border: 3px solid #b0cf00; border-radius: 1rem; } main { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0; gap: 0.7rem; } main > div { position: relative; pointer-events: none; min-height: 150px; } @media (min-width:60rem) { main > div { min-height: 250px; } } @media (min-width:100rem) { main > div { min-height: 350px; } } main::after { content: ''; flex-grow: 70; } main > div > img { position: absolute; top: 0; height: 100%; } </style> {% endblock head %} {% block main %} {% if top_message %} <header> {{top_message}} </header> {% endif %} <main> {% for image in images %} <div style="aspect-ratio: {{image.width}} / {{image.height}}; flex-grow: {{10*image.width/image.height}};"> <img loading="lazy" src="/image/{{image.encrypted_name}}" alt="Could not load image" /> </div> {% endfor %} </main> {% endblock main %}