<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Evan Scherrer - Dog</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
    <style>
      .credits {
        size: 12px;
        max-width: 600px;
        margin: auto;
        color: rgb(149, 166, 180);
      }
      .main-panel {
        margin-bottom: 20px;
      }
      .flex {
        display: flex;
        flex-direction: column;
        break-inside: avoid;
      }
      .horizontal {
        display: flex;
        flex-direction: row;
        margin: auto;
        column-gap: 10px;
        max-width: 640px;
      }
      .big {
        margin: auto;
        max-width: 640px;
      }
    </style>
    {% from 'components/header.html' import header %}
    {% from 'components/footer.html' import footer %}
    {% from 'components/picture.html' import picture %}
  </head>
  <body>
    <div class="main-panel">
      {{ header("Dog Pictures", "/about") }}
      <br>Enjoy some pictures of my adorable dog Aayla. She's a 6-year-old border collie mix, and I think she's the cutest dog in the world. More pictures available upon request. 
    </div>
    <div class="big">
        {{ picture(url_for('static', filename="aayla/aayla.jpg")) }}
    </div>
    <div class="horizontal">
      <div class="flex">
        <!-- left column -->
	{{ picture(url_for('static', filename="aayla/IMG20251225101512.jpg"), "Merry Christmas, Aayla!") }}
	{{ picture(url_for('static', filename="aayla/IMG_20200324_135849261.jpg" )) }}
	{{ picture(url_for('static', filename="aayla/IMG_0975.jpg"), "Monitoring the squirrels in her territory") }}
      </div>

      <div class="flex">
        <!-- right column -->
	{{ picture(url_for('static', filename="aayla/IMG20220806084554.jpg")) }}
	{{ picture(url_for('static', filename="aayla/IMG_1625.jpg"), '"Can I have some of that??"') }}
	{{ picture(url_for('static', filename="aayla/IMG20251225102233.jpg")) }}
	{{ picture(url_for('static', filename="aayla/IMG_4637.JPG" )) }}
      </div>
    </div>
    {{ footer("December 2025") }}
  </body>
</html>
