diff --git a/_apps/.gitkeep b/_apps/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/_includes/head.html b/_includes/head.html
index ff8a9384..940e9ea7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -37,5 +37,4 @@
   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,300&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" type="text/css" media="all" href="{{ '/css/main.css' | absolute_url | append: '?v=' | append: site.time }}">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.6.0/tiny-slider.css">
 </head>
diff --git a/_includes/screenshots.html b/_includes/screenshots.html
deleted file mode 100644
index 21eac391..00000000
--- a/_includes/screenshots.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<section class="screenshots constrain">
-  <div class="carousel">
-    {% for screenshot in page.screenshots %}
-      <div>
-        <img alt="Screenshot" src="{{ screenshot | absolute_url }}" />
-      </div>
-    {% endfor %}
-  </div>
-</section>
-
-{% if page.screenshots[1] %}
-  {% comment %}
-    Only load JS and show screenshots pager if more than one screenshot exists.
-  {% endcomment %}
-  
-  <div class="pager" style="display:none">
-    {% for screenshot in page.screenshots %}
-    <span>&nbsp;</span>
-    {% endfor %}
-  </div>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.6.0/min/tiny-slider.js"></script>
-  <script type="text/javascript">
-    // Show nav if Js is supported
-    document.querySelector(".pager").style.display = "";
-    tns({
-      speed: 350,
-      container: '.carousel',
-      autoplay: true,
-      autoplayHoverPause: true,
-      autoplayButtonOutput: false,
-      autoplayTimeout: 10000,
-      controls: false,
-      navContainer: ".pager"
-    });
-  </script>  
-{% endif %}
-
diff --git a/_layouts/app.html b/_layouts/app.html
index 753f285e..57abcba9 100644
--- a/_layouts/app.html
+++ b/_layouts/app.html
@@ -20,7 +20,15 @@ <h1>{{ page.title }}</h1>
 
 <div class="main">
 
-  {% include screenshots.html %}
+  {% if page.screenshots %}
+    <section class="screenshots constrain">
+      <img
+        alt="Screenshot of {{ page.title }}"
+        srcset="{{ page.screenshots[0] | absolute_url }}"
+        src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
+      />
+    </section>
+  {% endif %}
 
   <section class="description constrain">
     <h2>{{ page.summary }}</h2>
diff --git a/_sass/_apps.scss b/_sass/_apps.scss
index 7a57e73f..2c6065b6 100644
--- a/_sass/_apps.scss
+++ b/_sass/_apps.scss
@@ -1,38 +1,36 @@
 .screenshots {
-  background-color: rgba(150, 150, 150, 0.125);
-}
-
-.screenshots img {
-  display: block;
-  max-width: 100%;
-  max-height: 450px;
-  margin: 0 auto;
-}
-
-.pager {
-  display:flex;
-  justify-content: center;
-  padding: 12px 0;
+  align-items: center;
+  // Weird aspect ratio of legacy screenshots (16:9 minus bottom bar?)
+  aspect-ratio: 24 / 13;
+  background: rgba(150, 150, 150, 0.125);
+  display: flex;
 
-  span {
+  img {
     display: block;
-    width: 0.75em;
-    height: 0.75em;
-    background: #666;
-    border-radius: 50%;
-    margin: 0 8px;
-    cursor: pointer;
-    opacity: 0.5;
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
 
-    &:active,
-    &:focus {
-      outline: 0;
-      border: none;
+    &::before {
+      display: block;
+      text-align: center;
     }
-  }
 
-  .tns-nav-active {
-    opacity: 1;
+    &::after {
+      // We want it to match the color of the container over the page background,
+      // but it needs to be opaque to cover the browser's default alt text (which
+      // is not consistently stylable)
+      background-image:
+        linear-gradient(to bottom, rgba(150, 150, 150, 0.125), rgba(150, 150, 150, 0.125)),
+        linear-gradient(to bottom, var(--bg),  var(--bg));
+      bottom: 0;
+      content: attr(alt);
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 0;
+    }
   }
 }
-