feat(*): refactor dynamic vs. static structure and distinctions; make additional elements dynamic

src/includes/static/media/grid.liquid

@@ -0,0 +1,47 @@
+<div class="media-grid {{ shape | default: square }}">
+  {%- assign loadingStrategy = loading | default:"lazy" -%}
+  {%- for item in data limit:count -%}
+    {%- assign alt = item.grid.alt | replaceQuotes -%}
+    {%- assign imageUrl = item.grid.image -%}
+    <a class="{{ item.type }}" href="{{ item.grid.url }}" title="{{ alt }}">
+      <div class="media-grid-item">
+        {%- if item.grid.title or item.grid.subtext -%}
+        <div class="meta-text media-highlight {{ item.type }}">
+            {% if item.grid.title %}
+            <div class="header">{{ item.grid.title }}</div>
+            {% endif %}
+            {% if item.grid.subtext %}
+            <div class="subheader">{{ item.grid.subtext }}</div>
+            {% endif %}
+          </mark>
+        </div>
+        {%- endif -%}
+        {%- assign imageClass = "square" -%}
+        {%- assign width = 150 -%}
+        {%- assign height = 150 -%}
+        {%- case shape -%}
+          {%- when "vertical" -%}
+            {%- assign imageClass = "vertical" -%}
+            {%- assign width = 120 -%}
+            {%- assign height = 184 -%}
+        {%- endcase -%}
+        <img
+          srcset="
+            {{ imageUrl }}?class={{ imageClass }}sm&type=webp {{ width }}w,
+            {{ imageUrl }}?class={{ imageClass }}md&type=webp {{ width | times:2 }}w
+          "
+          sizes="(max-width: 450px) {{ width }}px, {{ width | times:2 }}px"
+          src="{{ imageUrl }}?class={{ imageClass }}sm&type=webp"
+          alt="{{ alt }}"
+          loading="{{ loadingStrategy }}"
+          decoding="async"
+          width="{{ width }}"
+          height="{{ height }}"
+        >
+      </div>
+    </a>
+  {%- endfor -%}
+</div>
+{% render "static/nav/paginator.liquid",
+  pagination:pagination
+%}