diff --git a/src/pallets/templates/index.html b/src/pallets/templates/index.html
index 8a67ed4..3637d2a 100644
--- a/src/pallets/templates/index.html
+++ b/src/pallets/templates/index.html
@@ -4,7 +4,7 @@
   <section>
     {{ page.content_html | safe }}
   </section>
-  <section style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pico-spacing);">
+  <section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(16ch, 21%, 100%), 1fr)); gap: var(--pico-spacing);">
     {% for title in ("Flask", "Quart", "Jinja", "Click", "Werkzeug", "ItsDangerous", "MarkupSafe") %}
       {% set name = title.lower() %}
       <p>
diff --git a/src/pallets/templates/layout.html b/src/pallets/templates/layout.html
index 19a9390..b42ba8c 100644
--- a/src/pallets/templates/layout.html
+++ b/src/pallets/templates/layout.html
@@ -6,7 +6,7 @@
   <title>Pallets</title>
   <link rel=icon href="/static/pallets-logo.svg">
   <link rel="alternate" type="application/atom+xml" title="Blog" href="{{ url_for(".blog_feed") }}">
-  <link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@anyblades/blades@2.3.1/css/blades.min.css">
   <link rel=stylesheet href="/static/style.css">
   {% block extra_head %}{% endblock %}
 </head>