diff --git a/sass/style.scss b/sass/style.scss
index 31a952b..f53130f 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -353,7 +353,6 @@ article.post .post-date {
   width: 100%;
   background-color: $panel-color-dark;
   margin: 0.75em;
-  padding: 0 0.75em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
@@ -376,14 +375,24 @@ article.post .post-date {
 
 .project-card a {
   text-decoration: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .project-card h2 {
   text-align: center;
+  margin: 0.75em;
+  font-size: 1.1em;
 }
 
 .project-card img {
-  max-width: 100%;
+  width: 100%;
+  aspect-ratio: 640 / 480;
+  object-fit: cover;
+}
+
+.project-card p {
+  margin: 0.75em;
 }
 
 /* CV */
diff --git a/templates/projects.html b/templates/projects.html
index cf405cd..f0d75d5 100644
--- a/templates/projects.html
+++ b/templates/projects.html
@@ -1,37 +1,41 @@
 {% extends "base.html" %}
+{% macro project_card(path, permalink, title, description, image_path) %}
+<div class="project-card">
+<a href="{{ permalink }}">
+{% if image_path is defined %}
+{% set image = resize_image(path=image_path, width=640, height=480, op="fit") %}
+<img src="{{ image.url }}" />
+{% else %}
+<img src="//picsum.photos/seed/{{ path | slugify }}/320/240" />
+{% endif %}
+<h2>{{ title }}</h2>
+<p>{{ description }}</p>
+</a>
+</div>
+{% endmacro %}
 {% block content %}
 <article class="post panel">
 <h1 class="post-title">{{ section.title }}</h1>
 {{ section.content | safe }}
 <div class="project-cards">
 {% for path in section.subsections %}
-<div class="project-card">
 {% set sect = get_section(path=path) %}
-<a href="{{ sect.permalink }}">
-<h2>{{ sect.title }}</h2>
-{% if sect.extra.image is defined %}
-{% set image = resize_image(path=sect.extra.image, width=640, height=480, op="fit") %}
-<img src="{{ image.url }}" />
-{% else %}
-<img src="//picsum.photos/seed/{{ path | slugify }}/320/240" />
-{% endif %}
-<p>{{ sect.description }}</p>
-</a>
-</div>
+{{ self::project_card(
+    path=path,
+    permalink=sect.permalink,
+    title=sect.title,
+    description=sect.description,
+    image_path=sect.extra.image,
+) }}
 {% endfor %}
 {% for page in section.pages %}
-<div class="project-card">
-<a href="{{ page.permalink }}">
-<h2>{{ page.title }}</h2>
-{% if page.extra.image is defined %}
-{% set image = resize_image(path=page.extra.image, width=640, height=480, op="fit") %}
-<img src="{{ image.url }}" />
-{% else %}
-<img src="//picsum.photos/seed/{{ page.path | slugify }}/320/240" />
-{% endif %}
-<p>{{ page.description }}</p>
-</a>
-</div>
+{{ self::project_card(
+    path=page.path,
+    permalink=page.permalink,
+    title=page.title,
+    description=page.description,
+    image_path=page.extra.image,
+) }}
 {% endfor %}
 </div>
 </article>