diff --git a/_layouts/media.html b/_layouts/media.html
new file mode 100644
index 0000000..d72bddd
--- /dev/null
+++ b/_layouts/media.html
@@ -0,0 +1,72 @@
+---
+layout: default
+---
+
+<section
+  class="
+    media
+    container
+    max-w-screen-xl
+    flex flex-col
+    sm:flex-row
+    pt-10
+    pb-8
+    lg:py-10
+    border-b
+  "
+>
+  <div
+    class="
+      heading-block
+      w-full
+      sm:w-2/12
+      lg:w-3/12
+      flex
+      lg:justify-center
+      items-start
+      pb-3
+      sm:pb-0
+    "
+  >
+    <a class="link link--back" href="{{site.url}}{{ site.baseurl }}">Back</a>
+  </div>
+  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
+    <h1 class="text-xl md:text-xxl mb-5 lg:mb-16 sm:max-w-md lg:max-w-xl">
+      Media
+    </h1>
+    <div
+      class="media__cards container mx-auto flex flex-col flex-wrap sm:flex-row"
+    >
+      {% for mediapost in site.data.media %}
+      <div
+        class="
+          media__card
+          flex flex-col
+          w-full
+          sl:w-1/2
+          xl:max-w-screen-xscard
+          sl:mr-5
+          mb-5
+          sm:mb-0
+        "
+      >
+        <img
+          src="{{ mediapost.image }}"
+          class="w-full mb-2"
+          alt="Media preview image"
+        />
+
+        <li class="flex flex-col w-full mb-5 lg:mb-8">
+          <time class="text-xxs opacity-75"
+            >{{ mediapost.date | date: '%B %d, %Y' }}</time
+          ><a
+            href="{{ mediapost.link }}"
+            class="text-xs lg:text-base font-semibold hover:underline"
+            >{{ mediapost.title }}</a
+          >
+        </li>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
diff --git a/media.md b/media.md
new file mode 100644
index 0000000..cdadd4b
--- /dev/null
+++ b/media.md
@@ -0,0 +1,5 @@
+---
+layout: media
+permalink: /media/
+title: Media
+---