set font size per custom-card instance

src/_includes/partials/card-blog.njk

@@ -1,5 +1,5 @@
 <custom-card clickable>
-  <h2 slot="headline">
+  <h2 slot="headline" class="text-step-2">
     <a href="{{ item.url | url }}">{{ item.data.title }}</a>
   </h2>
   <span slot="date"> {% include "partials/date.njk" %} </span>

src/_includes/partials/card-tag.njk

@@ -1,5 +1,5 @@
 <custom-card clickable>
-  <h2 slot="headline">
+  <h2 slot="headline" class="text-step-2">
     <a href="{{ item.url | url }}">{{ item.data.title }}</a>
   </h2>
   <span slot="date"> {% include "partials/date.njk" %} </span>

src/assets/css/local/custom-card.css

@@ -23,7 +23,6 @@ custom-card ::selection {
 custom-card :is(h2, h3) {
   --flow-space: var(--space-m);
   grid-row: headline;
-  font-size: var(--size-step-2);
 }
 
 custom-card :is(h2, h3) a {

src/pages/built-with.njk

@@ -39,7 +39,7 @@ widths: [400, 520]
       {% for site in builtwith | shuffle %}
         <custom-card clickable img-square class="text-step-min-1" style="--card-bg: var(--color-bg)">
           {% image "./src/assets/images/screenshots/" + site.filename + ".jpg", site.name, null, "lazy", null, null, widths, sizes %}
-          <h3 slot="headline" style="font-size: var(--size-step-0);">{{ site.name }}</h3>
+          <h3 slot="headline" class="text-step-min-1">{{ site.name }}</h3>
 
           <p slot="content">{{ site.description }}</p>
           <footer slot="footer" class="repel">